Commit e71fca26 authored by Thomas Park's avatar Thomas Park
Browse files

Added css and less files

parent a6084de5
This diff is collapsed.
This diff is collapsed.
// Bootswatch.less
// Swatch: Cerulean
// -----------------------------------------------------
// TYPOGRAPHY
// -----------------------------------------------------
@import url(http://fonts.googleapis.com/css?family=Telex);
h1,h2,h3,h4,h5,h6, .navbar, .subnav {
font-family: 'Telex', sans-serif;
}
h1,h2,h3,h4,h5,h6 {
color: #317EAC
}
// NAVBAR
// -----------------------------------------------------
.navbar-inner {
#gradient > .vertical-three-colors(@navbarBackground, @navbarBackground, 90%, @navbarBackgroundHighlight);
}
.navbar .nav .active > a,
.navbar .nav .active > a:hover {
background-color: @navbarBackground;
background-color: rgba(0,0,0,.2);
}
.navbar .search-query {
border: 1px solid darken(@linkColor, 10%);
}
// FORMS
// -----------------------------------------------------
// Warning
.control-group.warning {
.formFieldState(@orange, @orange, @warningBackground);
}
// Error
.control-group.error {
.formFieldState(@red, @red, @errorBackground);
}
// Success
.control-group.success {
.formFieldState(darken(@green, 10%), darken(@green, 10%), @successBackground);
}
// BUTTONS
// -----------------------------------------------------
.btn {
#gradient > .vertical-three-colors(@white, @white, 5%, darken(@white, 0%));
@shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
.box-shadow(@shadow);
}
// Set the backgrounds
// -------------------------
.btn-primary {
.buttonBackground(lighten(@linkColor, 5%), @linkColor);
}
// Warning appears are orange
.btn-warning {
.buttonBackground(lighten(@orange, 5%), @orange);
}
// Danger and error appear as red
.btn-danger {
.buttonBackground(lighten(@red, 5%), @red);
}
// Success appears as green
.btn-success {
.buttonBackground(lighten(@green, 5%), @green);
}
// Info appears as a neutral blue
.btn-info {
.buttonBackground(lighten(@purple, 5%), @purple);
}
// ICONS
// -----------------------------------------------------
// Make icons gray
i[class^="icon-"]{
opacity: 0.8;
}
\ No newline at end of file
// Variables.less
// Variables to customize the look and feel of Bootstrap
// Swatch: Cerulean
// -----------------------------------------------------
// GLOBAL VALUES
// --------------------------------------------------
// Links
@linkColor: #369BD7;
@linkColorHover: darken(@linkColor, 15%);
// Grays
@black: #000;
@grayDarker: #222;
@grayDark: #333;
@gray: #555;
@grayLight: #999;
@grayLighter: #eee;
@white: #fff;
// Accent colors
@blue: #3E78B3;
@blueDark: #033C73;
@green: #73A839;
@red: #C71C22;
@yellow: #F7B42C;
@orange: #DD5600;
@pink: #F49AC1;
@purple: #9760B3;
// Typography
@baseFontSize: 13px;
@baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
@baseLineHeight: 18px;
@textColor: @gray;
// Buttons
@primaryButtonBackground: @linkColor;
// COMPONENT VARIABLES
// --------------------------------------------------
// Z-index master list
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
@zindexDropdown: 1000;
@zindexPopover: 1010;
@zindexTooltip: 1020;
@zindexFixedNavbar: 1030;
@zindexModalBackdrop: 1040;
@zindexModal: 1050;
// Input placeholder text color
@placeholderText: @grayLight;
// Navbar
@navbarHeight: 40px;
@navbarBackground: @linkColor;
@navbarBackgroundHighlight: lighten(@linkColor, 10%);
@navbarText: @grayLighter;
@navbarLinkColor: @grayLighter;
@navbarLinkColorHover: @white;
// Form states and alerts
@warningText: #908A62;
@warningBackground: #EDEBE1;
@warningBorder: darken(spin(@warningBackground, -10), 3%);
@errorText: @pink;
@errorBackground: #EDDBE3;
@errorBorder: darken(spin(@errorBackground, -10), 3%);
@successText: #565C4C;
@successBackground: #CDB;
@successBorder: darken(spin(@successBackground, -10), 5%);
@infoText: #908A62;
@infoBackground: #EDEBE1;
@infoBorder: darken(spin(@infoBackground, -10), 7%);
// GRID
// --------------------------------------------------
// Default 940px grid
@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 20px;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
// Fluid grid
@fluidGridColumnWidth: 6.382978723%;
@fluidGridGutterWidth: 2.127659574%;
This diff is collapsed.
This diff is collapsed.
// Variables.less
// Variables to customize the look and feel of Bootstrap
// -----------------------------------------------------
// GLOBAL VALUES
// --------------------------------------------------
// Links
@linkColor: #08c;
@linkColorHover: darken(@linkColor, 15%);
// Grays
@black: #000;
@grayDarker: #222;
@grayDark: #333;
@gray: #555;
@grayLight: #999;
@grayLighter: #eee;
@white: #fff;
// Accent colors
@blue: #049cdb;
@blueDark: #0064cd;
@green: #46a546;
@red: #9d261d;
@yellow: #ffc40d;
@orange: #f89406;
@pink: #c3325f;
@purple: #7a43b6;
// Typography
@baseFontSize: 13px;
@baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
@baseLineHeight: 18px;
@textColor: @grayDark;
// Buttons
@primaryButtonBackground: @linkColor;
// COMPONENT VARIABLES
// --------------------------------------------------
// Z-index master list
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
@zindexDropdown: 1000;
@zindexPopover: 1010;
@zindexTooltip: 1020;
@zindexFixedNavbar: 1030;
@zindexModalBackdrop: 1040;
@zindexModal: 1050;
// Input placeholder text color
@placeholderText: @grayLight;
// Navbar
@navbarHeight: 40px;
@navbarBackground: @grayDarker;
@navbarBackgroundHighlight: @grayDark;
@navbarText: @grayLight;
@navbarLinkColor: @grayLight;
@navbarLinkColorHover: @white;
// Form states and alerts
@warningText: #c09853;
@warningBackground: #fcf8e3;
@warningBorder: darken(spin(@warningBackground, -10), 3%);
@errorText: #b94a48;
@errorBackground: #f2dede;
@errorBorder: darken(spin(@errorBackground, -10), 3%);
@successText: #468847;
@successBackground: #dff0d8;
@successBorder: darken(spin(@successBackground, -10), 5%);
@infoText: #3a87ad;
@infoBackground: #d9edf7;
@infoBorder: darken(spin(@infoBackground, -10), 7%);
// GRID
// --------------------------------------------------
// Default 940px grid
@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 20px;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
// Fluid grid
@fluidGridColumnWidth: 6.382978723%;
@fluidGridGutterWidth: 2.127659574%;
This diff is collapsed.
This diff is collapsed.
// Bootswatch.less
// Swatch: Simplex
// -----------------------------------------------------
// TYPOGRAPHY
// -----------------------------------------------------
// Make headers black
h1, h2, h3, h4, h5, h6 {
color: @black;
}
// NAVBAR
// -----------------------------------------------------
// Gray text color
.navbar .brand, .subnav a {
color: @navbarText;
}
// Make active item white
.navbar .nav .active > a,
.navbar .nav .active > a:hover {
background-color: @grayDarker;
color: @white;
}
// Remove text-shadow and make white on hover
.navbar .nav > li > a {
text-shadow: none;
&:hover {
color: @white;
background-color: rgba(256, 256, 256, 0.2);
}
}
// Remove menu item dividers on subnav
.subnav .nav > li > a {
border-left: 0px solid white !important;
border-right: 0px solid white !important;
color: @grayDark;
}
// FORMS
// -----------------------------------------------------
// Style search input
.search-query {
border: 1px solid #CCC;
.border-radius(2px);
background-color: @white;
}
// BUTTONS
// -----------------------------------------------------
// Make buttons boxier and flatter
.btn {
.border-radius(2px);
#gradient > .vertical-three-colors(@white, @white, 25%, darken(@white, 10%));
}
.btn-primary {
.buttonBackground(lighten(@primaryButtonBackground, 5%), @primaryButtonBackground);
}
.btn-warning {
.buttonBackground(lighten(@orange, 5%), @orange);
}
.btn-danger {
.buttonBackground(lighten(@red, 5%), @red);
}
.btn-success {
.buttonBackground(lighten(@green, 5%), @green);
}
.btn-info {
.buttonBackground(lighten(#5bc0de, 5%), #5bc0de);
}
// ICONS
// -----------------------------------------------------
// Make icons gray
i[class^="icon-"]{
opacity: 0.6;
}
// Variables.less
// Variables to customize the look and feel of Bootstrap
// Swatch: Simplex
// -----------------------------------------------------
// GLOBAL VALUES
// --------------------------------------------------
// Links
@linkColor: #366DDC;
@linkColorHover: darken(@linkColor, 15%);
// Grays
@black: #000;
@grayDarker: #2C2C2C;
@grayDark: #333;
@gray: #555;
@grayLight: #999;
@grayLighter: #EEE;
@white: #fff;
// Accent colors
@blue: #15C;
@blueDark: #043755;
@green: #3D9400;
@red: #E32C3B;
@yellow: #FFCA27;
@orange: #FF6600;
@pink: #ED2590;
@purple: #9B479F;
// Typography
@baseFontSize: 13px;
@baseFontFamily: arial,sans-serif;
@baseLineHeight: 18px;
@textColor: @black;
// Buttons
@primaryButtonBackground: @linkColor;
// COMPONENT VARIABLES
// --------------------------------------------------
// Z-index master list
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
@zindexDropdown: 1000;
@zindexPopover: 1010;
@zindexTooltip: 1020;
@zindexFixedNavbar: 1030;
@zindexModalBackdrop: 1040;
@zindexModal: 1050;
// Input placeholder text color
@placeholderText: @grayLight;
// Navbar
@navbarHeight: 40px;
@navbarBackground: @grayDarker;
@navbarBackgroundHighlight: @grayDarker;
@navbarText: #AAA;
@navbarLinkColor: @navbarText;
@navbarLinkColorHover: @gray;
// Form states and alerts
@warningText: #c09853;
@warningBackground: #fcf8e3;
@warningBorder: darken(spin(@warningBackground, -10), 3%);
@errorText: #b94a48;
@errorBackground: #f2dede;
@errorBorder: darken(spin(@errorBackground, -10), 3%);
@successText: #468847;
@successBackground: #dff0d8;
@successBorder: darken(spin(@successBackground, -10), 5%);
@infoText: #3a87ad;
@infoBackground: #d9edf7;
@infoBorder: darken(spin(@infoBackground, -10), 7%);
// GRID
// --------------------------------------------------
// Default 940px grid
@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 20px;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
// Fluid grid
@fluidGridColumnWidth: 6.382978723%;
@fluidGridGutterWidth: 2.127659574%;
This diff is collapsed.
This diff is collapsed.
// Bootswatch.less
// Swatch: Spacelab
// -----------------------------------------------------
// NAVBAR
// -----------------------------------------------------
// navbar style
.navbar {
border-bottom: 1px solid #CACACA;
.brand {
font-size: 20px;
font-weight: bold;
color: @textColor;
&:hover {
color: @linkColor;
}
}
}
// navbar dropshadow
.navbar .navbar-inner {
.box-shadow(0 1px 0 rgba(255,255,255,0.4));
.box-shadow(0 0 10px rgba(0,0,0,0.1));
}
// nav item typography
.navbar .nav > li > a {
font-weight: bold;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.navbar .nav .active > a {
background-color: transparent;
color: @textColor;
&:hover {
background-color: transparent;
color: @linkColor;
}
}
.navbar .nav .dropdown-toggle .caret,
.navbar .nav .open.dropdown .caret {
border-top-color: @textColor;
opacity: 1;
}
.navbar .nav .dropdown-toggle:hover .caret {
border-top-color: @linkColor;
}
.subnav .nav > li > a {
font-weight: bold;
color: #777;
&:hover {
color: @linkColor;
}
}
.subnav .nav > li.active > a {
color: @textColor;
&:hover {
color: @grayDark;
}
}
.navbar-search .search-query {
border: none;
color: #999;
}
// BUTTON
// -----------------------------------------------------
.btn {
.buttonBackground(#F4F4F4, #ECECEC);
}
.btn-primary {
.buttonBackground(#909090, #3F3F3F);
}
.btn-warning {
.buttonBackground(lighten(@yellow, 15%), @yellow);
}
.btn-danger {
.buttonBackground(lighten(#DA2D2D, 15%), #DA2D2D);
}
.btn-success {
.buttonBackground(#8ADD6D, #60B044);
}
.btn-info {
.buttonBackground(lighten(#4488BB, 15%), #4488BB);
}
// FORMS
// -----------------------------------------------------
// Warning
.control-group.warning {
.formFieldState(#E29235, #E29235, @warningBackground);
}
// Error
.control-group.error {
.formFieldState(#C00, #C00, @errorBackground);
}
// Success
.control-group.success {
.formFieldState(#2BA949, #2BA949, @successBackground);
}
// LABELS
// -----------------------------------------------------
.label-important { background-color: #BD2C00; }
.label-warning { background-color: #E3E84D; }
.label-success { background-color: #6CC644; }
.label-info { background-color: #4183C4; }
// Variables.less
// Variables to customize the look and feel of Bootstrap
// Swatch: Spacelab
// -----------------------------------------------------
// GLOBAL VALUES
// --------------------------------------------------
// Links
@linkColor: #4183C4;
@linkColorHover: #4183C4;
// Grays
@black: #000;
@grayDarker: #222;
@grayDark: #333;
@gray: #555;
@grayLight: #999;
@grayLighter: #eee;
@white: #fff;
// Accent colors
@blue: #4183C4;
@blueDark: #405A6A;
@green: #84DE81;