X-Git-Url: http://git.roojs.org/?p=bootswatch;a=blobdiff_plain;f=flatly%2Fvariables.less;h=d4b1b34504185c0f0fcac6729ec6fd583bc3ded6;hp=54f05cfbe80b8a4f30b33e13de33339f25f6b1e2;hb=48c64127b37be4a692a70cb7b38ed9744163582b;hpb=620e501c3d804b1dc2c7d796d7ae378db5e1a040 diff --git a/flatly/variables.less b/flatly/variables.less index 54f05cf..d4b1b34 100644 --- a/flatly/variables.less +++ b/flatly/variables.less @@ -1,4 +1,4 @@ -// Flatly 3.0.0 +// Flatly 3.0.1 // Variables // -------------------------------------------------- @@ -48,12 +48,21 @@ @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-h5: @font-size-base; +@font-size-h6: ceil(@font-size-base * 0.85); // ~12px + @line-height-base: 1.428571429; // 20/14 @line-height-computed: floor(@font-size-base * @line-height-base); // ~20px @headings-font-family: @font-family-base; @headings-font-weight: 500; @headings-line-height: 1.1; +@headings-color: inherit; + // Iconography // ------------------------- @@ -82,6 +91,7 @@ @border-radius-large: 6px; @border-radius-small: 3px; +@component-active-color: #fff; @component-active-bg: @brand-primary; @caret-width-base: 4px; @@ -165,13 +175,13 @@ @dropdown-fallback-border: #ccc; @dropdown-divider-bg: #e5e5e5; -@dropdown-link-active-color: #fff; -@dropdown-link-active-bg: @component-active-bg; - @dropdown-link-color: @gray-dark; @dropdown-link-hover-color: #fff; @dropdown-link-hover-bg: @dropdown-link-active-bg; +@dropdown-link-active-color: #fff; +@dropdown-link-active-bg: @component-active-bg; + @dropdown-link-disabled-color: @text-muted; @dropdown-header-color: @text-muted; @@ -200,25 +210,33 @@ // -------------------------------------------------- // Extra small screen / phone +// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1 @screen-xs: 480px; -@screen-phone: @screen-xs; +@screen-xs-min: @screen-xs; +@screen-phone: @screen-xs-min; // Small screen / tablet +// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1 @screen-sm: 768px; -@screen-tablet: @screen-sm; +@screen-sm-min: @screen-sm; +@screen-tablet: @screen-sm-min; // Medium screen / desktop +// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1 @screen-md: 992px; -@screen-desktop: @screen-md; +@screen-md-min: @screen-md; +@screen-desktop: @screen-md-min; // Large screen / wide desktop +// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1 @screen-lg: 1200px; -@screen-lg-desktop: @screen-lg; +@screen-lg-min: @screen-lg; +@screen-lg-desktop: @screen-lg-min; // So media queries don't overlap when required, provide a maximum -@screen-xs-max: (@screen-sm - 1); -@screen-sm-max: (@screen-md - 1); -@screen-md-max: (@screen-lg - 1); +@screen-xs-max: (@screen-sm-min - 1); +@screen-sm-max: (@screen-md-min - 1); +@screen-md-max: (@screen-lg-min - 1); // Grid system @@ -229,7 +247,7 @@ // Padding, to be divided by two and applied to the left and right of all columns @grid-gutter-width: 30px; // Point at which the navbar stops collapsing -@grid-float-breakpoint: @screen-tablet; +@grid-float-breakpoint: @screen-sm-min; // Navbar @@ -238,13 +256,14 @@ // Basics of a navbar @navbar-height: 60px; @navbar-margin-bottom: @line-height-computed; -@navbar-default-color: #777; -@navbar-default-bg: @brand-primary; -@navbar-default-border: darken(@navbar-default-bg, 6.5%); @navbar-border-radius: @border-radius-base; @navbar-padding-horizontal: floor(@grid-gutter-width / 2); // ~15px @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); +@navbar-default-color: #777; +@navbar-default-bg: @brand-primary; +@navbar-default-border: darken(@navbar-default-bg, 6.5%); + // Navbar links @navbar-default-link-color: #fff; @navbar-default-link-hover-color: @brand-success; @@ -286,13 +305,6 @@ @navbar-inverse-brand-hover-color: @navbar-inverse-link-hover-color; @navbar-inverse-brand-hover-bg: transparent; -// Inverted navbar search -// Normal navbar needs no special styles or vars -@navbar-inverse-search-bg: lighten(@navbar-inverse-bg, 25%); -@navbar-inverse-search-bg-focus: #fff; -@navbar-inverse-search-border: @navbar-inverse-bg; -@navbar-inverse-search-placeholder-color: #ccc; - // Inverted navbar toggle @navbar-inverse-toggle-hover-bg: darken(@navbar-inverse-bg, 10%); @navbar-inverse-toggle-icon-bar-bg: #fff; @@ -324,8 +336,9 @@ @nav-tabs-justified-active-link-border-color: @body-bg; // Pills +@nav-pills-border-radius: @border-radius-base; @nav-pills-active-link-hover-bg: @component-active-bg; -@nav-pills-active-link-hover-color: #fff; +@nav-pills-active-link-hover-color: @component-active-color; // Pagination @@ -334,7 +347,7 @@ @pagination-bg: @brand-success; @pagination-border: transparent; -@pagination-hover-bg: @gray-lighter; +@pagination-hover-bg: darken(@brand-success, 15%); @pagination-active-bg: darken(@brand-success, 15%); @pagination-active-color: #fff; @@ -355,21 +368,13 @@ @jumbotron-padding: 30px; @jumbotron-color: inherit; @jumbotron-bg: @gray-lighter; - @jumbotron-heading-color: inherit; +@jumbotron-font-size: ceil(@font-size-base * 1.5); // Form states and alerts // ------------------------- -@state-warning-text: #fff; -@state-warning-bg: @brand-warning; -@state-warning-border: @brand-warning; - -@state-danger-text: #fff; -@state-danger-bg: @brand-danger; -@state-danger-border: @brand-danger; - @state-success-text: #fff; @state-success-bg: @brand-success; @state-success-border: @brand-success; @@ -378,6 +383,14 @@ @state-info-bg: @brand-info; @state-info-border: @brand-info; +@state-warning-text: #fff; +@state-warning-bg: @brand-warning; +@state-warning-border: @brand-warning; + +@state-danger-text: #fff; +@state-danger-bg: @brand-danger; +@state-danger-border: @brand-danger; + // Tooltips // ------------------------- @@ -478,7 +491,7 @@ @list-group-border-radius: @border-radius-base; @list-group-hover-bg: @gray-lighter; -@list-group-active-color: #fff; +@list-group-active-color: @component-active-color; @list-group-active-bg: @component-active-bg; @list-group-active-border: @list-group-active-bg; @@ -493,7 +506,7 @@ @panel-border-radius: @border-radius-base; @panel-footer-bg: @gray-lighter; -@panel-default-text: @gray-dark; +@panel-default-text: @text-color; @panel-default-border: @gray-lighter; @panel-default-heading-bg: @gray-lighter; @@ -553,6 +566,7 @@ @breadcrumb-bg: @gray-lighter; @breadcrumb-color: #ccc; @breadcrumb-active-color: @gray; +@breadcrumb-separator: "/"; // Carousel @@ -573,8 +587,8 @@ // Close // ------------------------ -@close-color: #000; @close-font-weight: bold; +@close-color: #000; @close-text-shadow: 0 1px 0 #fff; @@ -611,10 +625,13 @@ // -------------------------------------------------- // Small screen / tablet -@container-tablet: ((720px + @grid-gutter-width)); +@container-tablet: ((720px + @grid-gutter-width)); +@container-sm: @container-tablet; // Medium screen / desktop -@container-desktop: ((940px + @grid-gutter-width)); +@container-desktop: ((940px + @grid-gutter-width)); +@container-md: @container-desktop; // Large screen / wide desktop -@container-lg-desktop: ((1140px + @grid-gutter-width)); +@container-large-desktop: ((1140px + @grid-gutter-width)); +@container-lg: @container-large-desktop;