gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

updated flatly theme to 3.3.0 plus css cleanup

Browse Source
This commit is contained in:
Sahat Yalkabov
2014-11-08 20:27:32 -08:00
parent 001484ab45
commit 266c9ed3ee
3 changed files with 351 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
public/css/styles.less
View File

@ -1,8 +1,8 @@
@import "lib/bootstrap/bootstrap"; @import "lib/bootstrap/bootstrap";
@import "lib/bootstrap-social/bootstrap-social";
@import "lib/font-awesome/font-awesome"; @import "lib/font-awesome/font-awesome";
@import "lib/ionicons/ionicons"; @import "lib/ionicons/ionicons";
@import "lib/bootstrap-social"; @import "themes/default";
@import "themes/modern";
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
@ -23,11 +23,6 @@ footer {
width: 100%; width: 100%;
height: 45px; height: 45px;
line-height: 45px; line-height: 45px;
p,
ul {
margin-bottom: 0;
}
} }
// Navbar // Navbar
@ -59,6 +54,6 @@ footer {
// ------------------------- // -------------------------
.fa, .fa,
[class^='ion-'] { [class^="ion-"] {
margin-right: 6px; margin-right: 5px;
} }

358
public/css/themes/flatly.less
View File

@ -1,22 +1,17 @@
// Flatly 3.1.1 // Flatly 3.3.0
// Variables // Variables
// -------------------------------------------------- // --------------------------------------------------
@import url("//fonts.googleapis.com/css?family=Lato:400,700,400italic");
//== Colors //== Colors
// //
//## Gray and brand colors for use across Bootstrap. //## Gray and brand colors for use across Bootstrap.
@gray-darker: lighten(#000, 13.5%); // #222 @gray-base: #000;
@gray-dark: #7b8a8b; @gray-darker: lighten(@gray-base, 13.5%); // #222
// #333 @gray-dark: #7b8a8b; // #333
@gray: #95a5a6; @gray: #95a5a6; // #555
// #555 @gray-light: #b4bcc2; // #999
@gray-light: #b4bcc2; @gray-lighter: #ecf0f1; // #eee
// #999
@gray-lighter: #ecf0f1;
// #eee
@brand-primary: #2C3E50; @brand-primary: #2C3E50;
@brand-success: #18BC9C; @brand-success: #18BC9C;
@ -24,9 +19,10 @@
@brand-warning: #F39C12; @brand-warning: #F39C12;
@brand-danger: #E74C3C; @brand-danger: #E74C3C;
//== Scaffolding //== Scaffolding
// //
// ## Settings for some of the most global styles. //## Settings for some of the most global styles.
//** Background color for `<body>`. //** Background color for `<body>`.
@body-bg: #fff; @body-bg: #fff;
@ -37,6 +33,9 @@
@link-color: @brand-success; @link-color: @brand-success;
//** Link hover color set via `darken()` function. //** Link hover color set via `darken()` function.
@link-hover-color: @link-color; @link-hover-color: @link-color;
//** Link hover decoration.
@link-hover-decoration: underline;
//== Typography //== Typography
// //
@ -49,28 +48,20 @@
@font-family-base: @font-family-sans-serif; @font-family-base: @font-family-sans-serif;
@font-size-base: 15px; @font-size-base: 15px;
@font-size-large: ceil((@font-size-base * 1.25)); @font-size-large: ceil((@font-size-base * 1.25)); // ~18px
// ~18px @font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-small: ceil((@font-size-base * 0.85));
// ~12px
@font-size-h1: floor((@font-size-base * 2.6)); @font-size-h1: floor((@font-size-base * 2.6)); // ~36px
// ~36px @font-size-h2: floor((@font-size-base * 2.15)); // ~30px
@font-size-h2: floor((@font-size-base * 2.15)); @font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
// ~30px @font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h3: ceil((@font-size-base * 1.7));
// ~24px
@font-size-h4: ceil((@font-size-base * 1.25));
// ~18px
@font-size-h5: @font-size-base; @font-size-h5: @font-size-base;
@font-size-h6: ceil((@font-size-base * 0.85)); @font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
// ~12px
//** Unit-less `line-height` for use in components like buttons. //** Unit-less `line-height` for use in components like buttons.
@line-height-base: 1.428571429; // 20/14 @line-height-base: 1.428571429; // 20/14
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc. //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
@line-height-computed: floor((@font-size-base * @line-height-base)); @line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
// ~20px
//** By default, this inherits from the `<body>`. //** By default, this inherits from the `<body>`.
@headings-font-family: @font-family-base; @headings-font-family: @font-family-base;
@ -78,14 +69,19 @@
@headings-line-height: 1.1; @headings-line-height: 1.1;
@headings-color: inherit; @headings-color: inherit;
//-- Iconography
//
//## Specify custom locations of the include Glyphicons icon font. Useful for those including Bootstrap via Bower.
//== Iconography
//
//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
//** Load fonts from this directory.
@icon-font-path: "../fonts/"; @icon-font-path: "../fonts/";
//** File name for all font files.
@icon-font-name: "glyphicons-halflings-regular"; @icon-font-name: "glyphicons-halflings-regular";
//** Element ID within SVG icon file.
@icon-font-svg-id: "glyphicons_halflingsregular"; @icon-font-svg-id: "glyphicons_halflingsregular";
//== Components //== Components
// //
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
@ -119,6 +115,7 @@
//** Carets increase slightly in size for larger components. //** Carets increase slightly in size for larger components.
@caret-width-large: 5px; @caret-width-large: 5px;
//== Tables //== Tables
// //
//## Customizes the `.table` component with basic values, each used across all table variations. //## Customizes the `.table` component with basic values, each used across all table variations.
@ -139,6 +136,7 @@
//** Border color for table and cell borders. //** Border color for table and cell borders.
@table-border-color: @gray-lighter; @table-border-color: @gray-lighter;
//== Buttons //== Buttons
// //
//## For each of Bootstrap's buttons, define text, background and border color. //## For each of Bootstrap's buttons, define text, background and border color.
@ -171,6 +169,7 @@
@btn-link-disabled-color: @gray-light; @btn-link-disabled-color: @gray-light;
//== Forms //== Forms
// //
//## //##
@ -184,10 +183,17 @@
@input-color: @text-color; @input-color: @text-color;
//** `<input>` border color //** `<input>` border color
@input-border: #dce4ec; @input-border: #dce4ec;
//** `<input>` border radius
// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
//** Default `.form-control` border radius
@input-border-radius: @border-radius-base; @input-border-radius: @border-radius-base;
//** Large `.form-control` border radius
@input-border-radius-large: @border-radius-large;
//** Small `.form-control` border radius
@input-border-radius-small: @border-radius-small;
//** Border color for inputs on focus //** Border color for inputs on focus
@input-border-focus: #1abc9c; @input-border-focus: @brand-primary;
//** Placeholder text color //** Placeholder text color
@input-color-placeholder: #acb6c0; @input-color-placeholder: #acb6c0;
@ -200,13 +206,17 @@
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2); @input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
@legend-color: @text-color; @legend-color: @text-color;
@legend-border-color: #e5e5e5; @legend-border-color: transparent;
//** Background color for textual input addons //** Background color for textual input addons
@input-group-addon-bg: @gray-lighter; @input-group-addon-bg: @gray-lighter;
//** Border color for textual input addons //** Border color for textual input addons
@input-group-addon-border-color: @input-border; @input-group-addon-border-color: @input-border;
//** Disabled cursor for form controls and buttons.
@cursor-disabled: not-allowed;
//== Dropdowns //== Dropdowns
// //
//## Dropdown menu container and contents. //## Dropdown menu container and contents.
@ -238,9 +248,10 @@
//** Text color for headers within dropdown menus. //** Text color for headers within dropdown menus.
@dropdown-header-color: @text-muted; @dropdown-header-color: @text-muted;
// Note: Deprecated @dropdown-caret-color as of v3.1.0 //** Deprecated `@dropdown-caret-color` as of v3.1.0
@dropdown-caret-color: #000; @dropdown-caret-color: #000;
//-- Z-index master list //-- Z-index master list
// //
// Warning: Avoid customizing these values. They're used for a bird's eye view // Warning: Avoid customizing these values. They're used for a bird's eye view
@ -250,38 +261,43 @@
@zindex-navbar: 1000; @zindex-navbar: 1000;
@zindex-dropdown: 1000; @zindex-dropdown: 1000;
@zindex-popover: 1010; @zindex-popover: 1060;
@zindex-tooltip: 1030; @zindex-tooltip: 1070;
@zindex-navbar-fixed: 1030; @zindex-navbar-fixed: 1030;
@zindex-modal-background: 1040; @zindex-modal: 1040;
@zindex-modal: 1050;
//== Media queries breakpoints //== Media queries breakpoints
// //
//## Define the breakpoints at which your layout will change, adapting to different screen sizes. //## Define the breakpoints at which your layout will change, adapting to different screen sizes.
// Extra small screen / phone // Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1 //** Deprecated `@screen-xs` as of v3.0.1
@screen-xs: 480px; @screen-xs: 480px;
//** Deprecated `@screen-xs-min` as of v3.2.0
@screen-xs-min: @screen-xs; @screen-xs-min: @screen-xs;
//** Deprecated `@screen-phone` as of v3.0.1
@screen-phone: @screen-xs-min; @screen-phone: @screen-xs-min;
// Small screen / tablet // Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1 //** Deprecated `@screen-sm` as of v3.0.1
@screen-sm: 768px; @screen-sm: 768px;
@screen-sm-min: @screen-sm; @screen-sm-min: @screen-sm;
//** Deprecated `@screen-tablet` as of v3.0.1
@screen-tablet: @screen-sm-min; @screen-tablet: @screen-sm-min;
// Medium screen / desktop // Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1 //** Deprecated `@screen-md` as of v3.0.1
@screen-md: 992px; @screen-md: 992px;
@screen-md-min: @screen-md; @screen-md-min: @screen-md;
//** Deprecated `@screen-desktop` as of v3.0.1
@screen-desktop: @screen-md-min; @screen-desktop: @screen-md-min;
// Large screen / wide desktop // Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1 //** Deprecated `@screen-lg` as of v3.0.1
@screen-lg: 1200px; @screen-lg: 1200px;
@screen-lg-min: @screen-lg; @screen-lg-min: @screen-lg;
//** Deprecated `@screen-lg-desktop` as of v3.0.1
@screen-lg-desktop: @screen-lg-min; @screen-lg-desktop: @screen-lg-min;
// So media queries don't overlap when required, provide a maximum // So media queries don't overlap when required, provide a maximum
@ -289,6 +305,7 @@
@screen-sm-max: (@screen-md-min - 1); @screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1); @screen-md-max: (@screen-lg-min - 1);
//== Grid system //== Grid system
// //
//## Define your custom responsive grid. //## Define your custom responsive grid.
@ -303,25 +320,27 @@
//** Point at which the navbar begins collapsing. //** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1); @grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
//== Container sizes //== Container sizes
// //
//## Define the maximum width of `.container` for different screen sizes. //## Define the maximum width of `.container` for different screen sizes.
// Small screen / tablet // Small screen / tablet
@container-tablet: ((720px + @grid-gutter-width)); @container-tablet: (720px + @grid-gutter-width);
//** For `@screen-sm-min` and up. //** For `@screen-sm-min` and up.
@container-sm: @container-tablet; @container-sm: @container-tablet;
// Medium screen / desktop // Medium screen / desktop
@container-desktop: ((940px + @grid-gutter-width)); @container-desktop: (940px + @grid-gutter-width);
//** For `@screen-md-min` and up. //** For `@screen-md-min` and up.
@container-md: @container-desktop; @container-md: @container-desktop;
// Large screen / wide desktop // Large screen / wide desktop
@container-large-desktop: ((1140px + @grid-gutter-width)); @container-large-desktop: (1140px + @grid-gutter-width);
//** For `@screen-lg-min` and up. //** For `@screen-lg-min` and up.
@container-lg: @container-large-desktop; @container-lg: @container-large-desktop;
//== Navbar //== Navbar
// //
//## //##
@ -336,7 +355,7 @@
@navbar-default-color: #777; @navbar-default-color: #777;
@navbar-default-bg: @brand-primary; @navbar-default-bg: @brand-primary;
@navbar-default-border: darken(@navbar-default-bg, 6.5%); @navbar-default-border: transparent;
// Navbar links // Navbar links
@navbar-default-link-color: #fff; @navbar-default-link-color: #fff;
@ -362,7 +381,7 @@
// Reset inverted navbar basics // Reset inverted navbar basics
@navbar-inverse-color: #fff; @navbar-inverse-color: #fff;
@navbar-inverse-bg: @brand-success; @navbar-inverse-bg: @brand-success;
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%); @navbar-inverse-border: transparent;
// Inverted navbar links // Inverted navbar links
@navbar-inverse-link-color: #fff; @navbar-inverse-link-color: #fff;
@ -383,6 +402,7 @@
@navbar-inverse-toggle-icon-bar-bg: #fff; @navbar-inverse-toggle-icon-bar-bg: #fff;
@navbar-inverse-toggle-border-color: darken(@navbar-inverse-bg, 10%); @navbar-inverse-toggle-border-color: darken(@navbar-inverse-bg, 10%);
//== Navs //== Navs
// //
//## //##
@ -394,8 +414,6 @@
@nav-disabled-link-color: @gray-light; @nav-disabled-link-color: @gray-light;
@nav-disabled-link-hover-color: @gray-light; @nav-disabled-link-hover-color: @gray-light;
@nav-open-link-hover-color: #fff;
//== Tabs //== Tabs
@nav-tabs-border-color: @gray-lighter; @nav-tabs-border-color: @gray-lighter;
@ -413,6 +431,7 @@
@nav-pills-active-link-hover-bg: @component-active-bg; @nav-pills-active-link-hover-bg: @component-active-bg;
@nav-pills-active-link-hover-color: @component-active-color; @nav-pills-active-link-hover-color: @component-active-color;
//== Pagination //== Pagination
// //
//## //##
@ -430,10 +449,10 @@
@pagination-active-border: transparent; @pagination-active-border: transparent;
@pagination-disabled-color: @gray-lighter; @pagination-disabled-color: @gray-lighter;
@pagination-disabled-bg: lighten(@brand-success, 15%); @pagination-disabled-bg: lighten(@brand-success, 15%);;
;
@pagination-disabled-border: transparent; @pagination-disabled-border: transparent;
//== Pager //== Pager
// //
//## //##
@ -449,6 +468,7 @@
@pager-disabled-color: #fff; @pager-disabled-color: #fff;
//== Jumbotron //== Jumbotron
// //
//## //##
@ -459,6 +479,7 @@
@jumbotron-heading-color: inherit; @jumbotron-heading-color: inherit;
@jumbotron-font-size: ceil((@font-size-base * 1.5)); @jumbotron-font-size: ceil((@font-size-base * 1.5));
//== Form states and alerts //== Form states and alerts
// //
//## Define colors for form feedback states and, by default, alerts. //## Define colors for form feedback states and, by default, alerts.
@ -479,6 +500,7 @@
@state-danger-bg: @brand-danger; @state-danger-bg: @brand-danger;
@state-danger-border: @brand-danger; @state-danger-border: @brand-danger;
//== Tooltips //== Tooltips
// //
//## //##
@ -496,6 +518,7 @@
//** Tooltip arrow color //** Tooltip arrow color
@tooltip-arrow-color: @tooltip-bg; @tooltip-arrow-color: @tooltip-bg;
//== Popovers //== Popovers
// //
//## //##
@ -515,7 +538,7 @@
//** Popover arrow width //** Popover arrow width
@popover-arrow-width: 10px; @popover-arrow-width: 10px;
//** Popover arrow color //** Popover arrow color
@popover-arrow-color: #fff; @popover-arrow-color: @popover-bg;
//** Popover outer arrow width //** Popover outer arrow width
@popover-arrow-outer-width: (@popover-arrow-width + 1); @popover-arrow-outer-width: (@popover-arrow-width + 1);
@ -524,6 +547,7 @@
//** Popover outer arrow fallback color //** Popover outer arrow fallback color
@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%); @popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);
//== Labels //== Labels
// //
//## //##
@ -546,6 +570,7 @@
//** Default text color of a linked label //** Default text color of a linked label
@label-link-hover-color: #fff; @label-link-hover-color: #fff;
//== Modals //== Modals
// //
//## //##
@ -578,6 +603,7 @@
@modal-md: 600px; @modal-md: 600px;
@modal-sm: 300px; @modal-sm: 300px;
//== Alerts //== Alerts
// //
//## Define alert colors, border radius, and padding. //## Define alert colors, border radius, and padding.
@ -602,6 +628,7 @@
@alert-danger-text: @state-danger-text; @alert-danger-text: @state-danger-text;
@alert-danger-border: @state-danger-border; @alert-danger-border: @state-danger-border;
//== Progress bars //== Progress bars
// //
//## //##
@ -610,6 +637,8 @@
@progress-bg: @gray-lighter; @progress-bg: @gray-lighter;
//** Progress bar text color //** Progress bar text color
@progress-bar-color: #fff; @progress-bar-color: #fff;
//** Variable for setting rounded corners on progress bar.
@progress-border-radius: @border-radius-base;
//** Default progress bar color //** Default progress bar color
@progress-bar-bg: @brand-primary; @progress-bar-bg: @brand-primary;
@ -622,6 +651,7 @@
//** Info progress bar color //** Info progress bar color
@progress-bar-info-bg: @brand-info; @progress-bar-info-bg: @brand-info;
//== List group //== List group
// //
//## //##
@ -633,25 +663,37 @@
//** List group border radius //** List group border radius
@list-group-border-radius: @border-radius-base; @list-group-border-radius: @border-radius-base;
//** Background color of single list elements on hover //** Background color of single list items on hover
@list-group-hover-bg: @gray-lighter; @list-group-hover-bg: @gray-lighter;
//** Text color of active list elements //** Text color of active list items
@list-group-active-color: @component-active-color; @list-group-active-color: @component-active-color;
//** Background color of active list elements //** Background color of active list items
@list-group-active-bg: @component-active-bg; @list-group-active-bg: @component-active-bg;
//** Border color of active list elements //** Border color of active list elements
@list-group-active-border: @list-group-active-bg; @list-group-active-border: @list-group-active-bg;
//** Text color for content within active list items
@list-group-active-text-color: lighten(@list-group-active-bg, 40%); @list-group-active-text-color: lighten(@list-group-active-bg, 40%);
//** Text color of disabled list items
@list-group-disabled-color: @gray-light;
//** Background color of disabled list items
@list-group-disabled-bg: @gray-lighter;
//** Text color for content within disabled list items
@list-group-disabled-text-color: @list-group-disabled-color;
@list-group-link-color: #555; @list-group-link-color: #555;
@list-group-link-hover-color: @list-group-link-color;
@list-group-link-heading-color: #333; @list-group-link-heading-color: #333;
//== Panels //== Panels
// //
//## //##
@panel-bg: #fff; @panel-bg: #fff;
@panel-body-padding: 15px; @panel-body-padding: 15px;
@panel-heading-padding: 10px 15px;
@panel-footer-padding: @panel-heading-padding;
@panel-border-radius: @border-radius-base; @panel-border-radius: @border-radius-base;
//** Border color for elements within panels //** Border color for elements within panels
@ -682,6 +724,7 @@
@panel-danger-border: @state-danger-border; @panel-danger-border: @state-danger-border;
@panel-danger-heading-bg: @state-danger-bg; @panel-danger-heading-bg: @state-danger-bg;
//== Thumbnails //== Thumbnails
// //
//## //##
@ -700,6 +743,7 @@
//** Padding around the thumbnail caption //** Padding around the thumbnail caption
@thumbnail-caption-padding: 9px; @thumbnail-caption-padding: 9px;
//== Wells //== Wells
// //
//## //##
@ -707,6 +751,7 @@
@well-bg: @gray-lighter; @well-bg: @gray-lighter;
@well-border: transparent; @well-border: transparent;
//== Badges //== Badges
// //
//## //##
@ -714,10 +759,10 @@
@badge-color: #fff; @badge-color: #fff;
//** Linked badge text color on hover //** Linked badge text color on hover
@badge-link-hover-color: #fff; @badge-link-hover-color: #fff;
@badge-bg: @gray; @badge-bg: @brand-primary;
//** Badge text color in active nav link //** Badge text color in active nav link
@badge-active-color: @link-color; @badge-active-color: @brand-primary;
//** Badge background color in active nav link //** Badge background color in active nav link
@badge-active-bg: #fff; @badge-active-bg: #fff;
@ -725,6 +770,7 @@
@badge-line-height: 1; @badge-line-height: 1;
@badge-border-radius: 10px; @badge-border-radius: 10px;
//== Breadcrumbs //== Breadcrumbs
// //
//## //##
@ -740,6 +786,7 @@
//** Textual separator for between breadcrumb elements //** Textual separator for between breadcrumb elements
@breadcrumb-separator: "/"; @breadcrumb-separator: "/";
//== Carousel //== Carousel
// //
//## //##
@ -756,13 +803,15 @@
@carousel-caption-color: #fff; @carousel-caption-color: #fff;
//== Close //== Close
// //
//## //##
@close-font-weight: bold; @close-font-weight: bold;
@close-color: #000; @close-color: #000;
@close-text-shadow: 0 1px 0 #fff; @close-text-shadow: none;
//== Code //== Code
// //
@ -779,10 +828,13 @@
@pre-border-color: #ccc; @pre-border-color: #ccc;
@pre-scrollable-max-height: 340px; @pre-scrollable-max-height: 340px;
//== Type //== Type
// //
//## //##
//** Horizontal offset for forms and lists.
@component-offset-horizontal: 180px;
//** Text muted color //** Text muted color
@text-muted: @gray-light; @text-muted: @gray-light;
//** Abbreviations and acronyms border color //** Abbreviations and acronyms border color
@ -796,22 +848,44 @@
//** Blockquote border color //** Blockquote border color
@blockquote-border-color: @gray-lighter; @blockquote-border-color: @gray-lighter;
//** Page header border color //** Page header border color
@page-header-border-color: @gray-lighter; @page-header-border-color: transparent;
//** Width of horizontal description list titles
//== Miscellaneous @dl-horizontal-offset: @component-offset-horizontal;
//
//##
//** Horizontal line color. //** Horizontal line color.
@hr-border: @gray-lighter; @hr-border: @gray-lighter;
//** Horizontal offset for forms and lists. // Flatly 3.3.0
@component-offset-horizontal: 180px; // Bootswatch
// -----------------------------------------------------
@import url("//fonts.googleapis.com/css?family=Lato:400,700,400italic"); @import url("//fonts.googleapis.com/css?family=Lato:400,700,400italic");
// Navbar ===================================================================== // Navbar =====================================================================
.navbar {
border-width: 0;
&-default {
.badge {
background-color: #fff;
color: @navbar-default-bg;
}
}
&-inverse {
.badge {
background-color: #fff;
color: @navbar-inverse-bg;
}
}
&-brand {
padding: 18.5px 15px 20.5px;
}
}
// Buttons ==================================================================== // Buttons ====================================================================
.btn:active { .btn:active {
@ -851,12 +925,26 @@
// Tables ===================================================================== // Tables =====================================================================
table,
.table { .table {
tr.success, a:not(.btn) {
tr.warning, text-decoration: underline;
tr.danger { }
.dropdown-menu a {
text-decoration: none;
}
.success,
.warning,
.danger,
.info {
color: #fff; color: #fff;
a {
color: #fff;
}
} }
> thead > tr > th, > thead > tr > th,
@ -880,22 +968,8 @@
// Forms ====================================================================== // Forms ======================================================================
.form-control,textarea.form-control, .form-control,
input[type="text"], input, {
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
border-width: 2px; border-width: 2px;
.box-shadow(none); .box-shadow(none);
@ -906,7 +980,12 @@ input[type="color"],
.has-warning { .has-warning {
.help-block, .help-block,
.control-label { .control-label,
.radio,
.checkbox,
.radio-inline,
.checkbox-inline,
.form-control-feedback {
color: @brand-warning; color: @brand-warning;
} }
@ -914,11 +993,20 @@ input[type="color"],
.form-control:focus { .form-control:focus {
border: 2px solid @brand-warning; border: 2px solid @brand-warning;
} }
.input-group-addon {
border-color: @brand-warning;
}
} }
.has-error { .has-error {
.help-block, .help-block,
.control-label { .control-label,
.radio,
.checkbox,
.radio-inline,
.checkbox-inline,
.form-control-feedback {
color: @brand-danger; color: @brand-danger;
} }
@ -926,11 +1014,20 @@ input[type="color"],
.form-control:focus { .form-control:focus {
border: 2px solid @brand-danger; border: 2px solid @brand-danger;
} }
.input-group-addon {
border-color: @brand-danger;
}
} }
.has-success { .has-success {
.help-block, .help-block,
.control-label { .control-label,
.radio,
.checkbox,
.radio-inline,
.checkbox-inline,
.form-control-feedback {
color: @brand-success; color: @brand-success;
} }
@ -938,6 +1035,10 @@ input[type="color"],
.form-control:focus { .form-control:focus {
border: 2px solid @brand-success; border: 2px solid @brand-success;
} }
.input-group-addon {
border-color: @brand-success;
}
} }
// Navs ======================================================================= // Navs =======================================================================
@ -968,9 +1069,20 @@ input[type="color"],
// Indicators ================================================================= // Indicators =================================================================
.close {
color: #fff;
text-decoration: none;
opacity: 0.4;
&:hover,
&:focus {
color: #fff;
opacity: 1;
}
}
.alert { .alert {
a,
.alert-link { .alert-link {
color: #fff; color: #fff;
text-decoration: underline; text-decoration: underline;
@ -982,6 +1094,10 @@ input[type="color"],
.progress { .progress {
height: 10px; height: 10px;
.box-shadow(none); .box-shadow(none);
.progress-bar {
font-size: 10px;
line-height: 10px;
}
} }
// Containers ================================================================= // Containers =================================================================
@ -989,3 +1105,63 @@ input[type="color"],
.well { .well {
.box-shadow(none); .box-shadow(none);
} }
a.list-group-item {
&.active,
&.active:hover,
&.active:focus {
border-color: @list-group-border;
}
&-success {
&.active {
background-color: @state-success-bg;
}
&.active:hover,
&.active:focus {
background-color: darken(@state-success-bg, 5%);
}
}
&-warning {
&.active {
background-color: @state-warning-bg;
}
&.active:hover,
&.active:focus {
background-color: darken(@state-warning-bg, 5%);
}
}
&-danger {
&.active {
background-color: @state-danger-bg;
}
&.active:hover,
&.active:focus {
background-color: darken(@state-danger-bg, 5%);
}
}
}
.panel {
&-default {
.close {
color: @text-color;
}
}
}
.modal {
.close {
color: @text-color;
}
}
.popover {
color: @text-color;
}

4
public/css/themes/modern.less
View File

@ -1,5 +1,5 @@
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700); @import url("http://fonts.googleapis.com/css?family=Montserrat:400,700");
@import url(http://fonts.googleapis.com/css?family=Raleway:400,300); @import url("http://fonts.googleapis.com/css?family=Raleway:400,300");
// Colors // Colors
// ------------------------- // -------------------------