updated flatly theme to 3.3.0 plus css cleanup

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

View File

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

View File

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

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=Raleway:400,300);
@import url("http://fonts.googleapis.com/css?family=Montserrat:400,700");
@import url("http://fonts.googleapis.com/css?family=Raleway:400,300");
// Colors
// -------------------------