Created
December 12, 2014 15:34
-
-
Save gorand/0938942792641c481009 to your computer and use it in GitHub Desktop.
variables custom bootstrap
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Grays | |
@gray-darker: #222222; | |
@gray-dark: #333333; | |
@gray: #555555; | |
@gray-light: #999999; | |
@gray-lighter: #eeeeee; | |
// Brand Colors | |
@brand-primary: #68cef0; | |
@brand-success: #5cb85c; | |
@brand-warning: #f0ad4e; | |
@brand-danger: #d9534f; | |
@brand-info: #5bc0de; | |
// Scaffolding | |
@body-bg: #fff; | |
@text-color: #3b3b3b; | |
@link-color: #2a7dc4; | |
@link-hover-color: lighten(@link-color, 15%); | |
@padding-base-vertical: 8px; | |
@padding-base-horizontal: 13px; | |
@padding-large-vertical: 7px; | |
@padding-large-horizontal: 14px; | |
@padding-small-vertical: 3px; | |
@padding-small-horizontal: 11px; | |
@border-radius-base: 2px; | |
@border-radius-large: 2px; | |
@border-radius-small: 2px; | |
@line-height-large: 1.4; | |
@line-height-small: 1.45; | |
@component-active-bg: @brand-primary; | |
// Typography | |
@font-family-sans-serif: Noto Sans; | |
@font-family-serif: Noto Serif; | |
@font-family-monospace: PT Mono; | |
@font-family-base: @font-family-sans-serif; | |
@font-size-base: 15px; | |
@font-size-large: ceil(@font-size-base * 1.3); | |
@font-size-small: ceil(@font-size-base * 0.9); | |
@font-size-h1: floor((@font-size-base * 2.85)); | |
@font-size-h2: floor((@font-size-base * 2.35)); | |
@font-size-h3: floor((@font-size-base * 1.8)); | |
@font-size-h4: floor((@font-size-base * 1.4)); | |
@font-size-h5: @font-size-base; | |
@font-size-h6: floor((@font-size-base * 0.9)); | |
@line-height-base: 1.428571429; | |
@line-height-computed: floor(@font-size-base * @line-height-base); | |
@headings-font-family: @font-family-sans-serif; | |
@headings-font-weight: 500; | |
@headings-line-height: 1.1; | |
@headings-color: inherit; | |
// Buttons | |
@btn-font-weight: normal; | |
@btn-default-color: #545454; | |
@btn-default-bg: #f7f7f7; | |
@btn-default-border: #dbdbdb; | |
@btn-primary-color: #fff; | |
@btn-primary-bg: @brand-primary; | |
@btn-primary-border: darken(@btn-primary-bg, 5%); | |
@btn-success-color: #fff; | |
@btn-success-bg: @brand-success; | |
@btn-success-border: darken(@btn-success-bg, 5%); | |
@btn-warning-color: #fff; | |
@btn-warning-bg: @brand-warning; | |
@btn-warning-border: darken(@btn-warning-bg, 5%); | |
@btn-danger-color: #fff; | |
@btn-danger-bg: @brand-danger; | |
@btn-danger-border: darken(@btn-danger-bg, 5%); | |
@btn-info-color: #fff; | |
@btn-info-bg: @brand-info; | |
@btn-info-border: darken(@btn-info-bg, 5%); | |
@btn-link-disabled-color: @gray-light; | |
// Dropdowns | |
@dropdown-bg: #fff; | |
@dropdown-border: rgba(0,0,0,.15); | |
@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-disabled-color: @gray-light; | |
@dropdown-header-color: @gray-light; | |
@dropdown-caret-color: #000; | |
// Forms | |
@input-bg: #f7f7f7; | |
@input-bg-disabled: #f5f5f5; | |
@input-color: #383838; | |
@input-border: #b7c5d1; | |
@input-border-radius: @border-radius-base; | |
@input-color-placeholder: #74838f; | |
@input-height-base: (@line-height-computed + (@padding-base-vertical * 1.6) + 2); | |
@input-height-large: (floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2); | |
@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2); | |
@legend-color: #696969; | |
@legend-border-color: #7d7d7d; | |
@input-group-addon-bg: @gray-lighter; | |
@input-group-addon-border-color: @input-border; | |
// Table | |
@table-cell-padding: 10px; | |
@table-condensed-cell-padding: 8px; | |
@table-cell-padding: 10px; | |
@table-condensed-cell-padding: 7px; | |
@table-bg: transparent; | |
@table-bg-accent: #f9f9f9; | |
@table-bg-hover: #f5f5f5; | |
@table-bg-active: @table-bg-hover; | |
@table-border-color: #ddd; | |
// Navbar | |
@navbar-height: 50px; | |
@navbar-margin-bottom: @line-height-computed; | |
@navbar-default-color: #777; | |
@navbar-default-bg: #f8f8f8; | |
@navbar-default-border: darken(@navbar-default-bg, 6.5%); | |
@navbar-border-radius: @border-radius-base; | |
@navbar-padding-horizontal: floor(@grid-gutter-width / 2); | |
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); | |
@navbar-default-link-color: #777; | |
@navbar-default-link-hover-color: #333; | |
@navbar-default-link-hover-bg: transparent; | |
@navbar-default-link-active-color: #555; | |
@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%); | |
@navbar-default-link-disabled-color: #ccc; | |
@navbar-default-link-disabled-bg: transparent; | |
@navbar-default-brand-color: @navbar-default-link-color; | |
@navbar-default-brand-hover-color: darken(@navbar-default-link-color, 10%); | |
@navbar-default-brand-hover-bg: transparent; | |
@navbar-default-toggle-hover-bg: #ddd; | |
@navbar-default-toggle-icon-bar-bg: #888; | |
@navbar-default-toggle-border-color: #ddd; | |
// Navs Tabs | |
@nav-link-padding: 10px 15px; | |
@nav-link-hover-bg: @gray-lighter; | |
@nav-disabled-link-color: @gray-light; | |
@nav-disabled-link-hover-color: @gray-light; | |
@nav-tabs-border-color: #ddd; | |
@nav-tabs-link-hover-border-color: @gray-lighter; | |
@nav-tabs-active-link-hover-bg: @body-bg; | |
@nav-tabs-active-link-hover-color: @gray; | |
@nav-tabs-active-link-hover-border-color: #ddd; | |
@nav-tabs-justified-link-border-color: #ddd; | |
@nav-tabs-justified-active-link-border-color: @body-bg; | |
@nav-pills-border-radius: @border-radius-base; | |
@nav-pills-active-link-hover-bg: @component-active-bg; | |
@nav-pills-active-link-hover-color: #fff; | |
// Jumbotron | |
@jumbotron-padding: 24px; | |
@jumbotron-color: inherit; | |
@jumbotron-bg: #f4f4f4; | |
@jumbotron-font-size: ceil((@font-size-base * 1.7)); | |
// Pagination | |
@pagination-bg: #fff; | |
@pagination-border: #ddd; | |
@pagination-hover-bg: @gray-lighter; | |
@pagination-hover-color: @link-hover-color; | |
@pagination-hover-border: #ddd; | |
@pagination-active-bg: @brand-primary; | |
@pagination-active-color: #fff; | |
@pagination-active-border: @brand-primary; | |
@pagination-disabled-color: @gray-light; | |
@pagination-disabled-bg: #fff; | |
@pagination-disabled-border: #ddd; | |
@pager-bg: @pagination-bg; | |
@pager-border: @pagination-border; | |
@pager-border-radius: 15px; | |
@pager-hover-bg: @pagination-hover-bg; | |
@pager-active-bg: @pagination-active-bg; | |
@pager-active-color: @pagination-active-color; | |
@pager-bg: @pagination-bg; | |
@pager-disabled-color: @gray-light; | |
// Form States | |
@state-warning-text: #c09853; | |
@state-warning-bg: #fcf8e3; | |
@state-warning-border: darken(spin(@state-warning-bg, -10), 3%); | |
@state-danger-text: #b94a48; | |
@state-danger-bg: #f4d8de; | |
@state-danger-border: darken(spin(@state-danger-bg, -10), 3%); | |
@state-success-text: #468847; | |
@state-success-bg: #ceedc3; | |
@state-success-border: darken(spin(@state-success-bg, -10), 5%); | |
@state-info-text: #3a87ad; | |
@state-info-bg: #d2eaff; | |
@state-info-border: darken(spin(@state-info-bg, -10), 7%); | |
// ToolTip | |
@tooltip-max-width: 200px; | |
@tooltip-color: #fff; | |
@tooltip-bg: #000; | |
@tooltip-arrow-width: 5px; | |
@tooltip-arrow-color: @tooltip-bg; | |
@tooltip-opacity: .9; | |
// Popover | |
@popover-bg: #fff; | |
@popover-max-width: 276px; | |
@popover-border-color: rgba(0,0,0,.2); | |
@popover-fallback-border-color: #ccc; | |
@popover-title-bg: darken(@popover-bg, 3%); | |
@popover-arrow-width: 10px; | |
@popover-arrow-color: #fff; | |
@popover-arrow-outer-width: (@popover-arrow-width + 1); | |
@popover-arrow-outer-color: rgba(0,0,0,.25); | |
@popover-arrow-outer-fallback-color: #999; | |
// List Group | |
@list-group-bg: #fff; | |
@list-group-border: #ddd; | |
@list-group-border-radius: @border-radius-base; | |
@list-group-hover-bg: #f5f5f5; | |
@list-group-active-color: #fff; | |
@list-group-active-bg: @component-active-bg; | |
@list-group-active-border: @list-group-active-bg; | |
@list-group-active-text-color: lighten(@list-group-active-bg, 40%); | |
@list-group-link-color: #555; | |
@list-group-link-heading-color: #333; | |
// Sprites | |
@icon-font-path: '../app/fonts/'; | |
@icon-font-name: glyphicons-halflings-regular; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment