diff options
author | Thomas Park <thomas@thomaspark.me> | 2013-08-06 15:15:37 -0400 |
---|---|---|
committer | Thomas Park <thomas@thomaspark.me> | 2013-08-06 15:15:37 -0400 |
commit | 55f9c2cec0e48dc5190a1f81f297e469c2d5015b (patch) | |
tree | c6c9730b102c7d1239cf143c0ffd9d9de6a8d088 /2/slate/bootswatch.less | |
parent | a25e04ec97d3d08fb722a167f07150d9af9f1229 (diff) |
moves v2.3.2 to /2/
Diffstat (limited to '2/slate/bootswatch.less')
-rwxr-xr-x | 2/slate/bootswatch.less | 593 |
1 files changed, 593 insertions, 0 deletions
diff --git a/2/slate/bootswatch.less b/2/slate/bootswatch.less new file mode 100755 index 00000000..d87440c3 --- /dev/null +++ b/2/slate/bootswatch.less @@ -0,0 +1,593 @@ +// Slate 2.3.2 +// Bootswatch +// ----------------------------------------------------- + + +// TYPOGRAPHY +// ----------------------------------------------------- + +h1, h2, h3, h4, h5, h6 { + text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3); +} + +code, pre { + background-color: #F7F7F7; + border: 1px solid darken(@grayDarker, 5%); + text-shadow: none; +} + +// SCAFFOLDING +// ----------------------------------------------------- + +legend, .page-header { + border-bottom: 1px solid @hrBorder; +} + +hr { + border-bottom: none; +} + +// NAVBAR +// ----------------------------------------------------- + +.navbar { + + .navbar-inner { + #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark); + } + + .brand { + font-weight: bold; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); + border-right: 1px solid darken(@gray, 15%); + } + + .navbar-text { + padding: 0 15px; + font-weight: bold; + } + + .nav > li > a { + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); + border-right: 1px solid rgba(0, 0, 0, 0.2); + border-left: 1px solid rgba(255, 255, 255, 0.1); + + &:hover { + #gradient > .directional(@grayDarker, @grayDark, 280deg); + border-left: 1px solid transparent; + border-right: 1px solid transparent; + } + } + + .nav > li.active > a, + .nav > li.active > a:hover { + color: @grayLighter; + background-color: @grayDark; + #gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg); + border-right: 1px solid darken(@gray, 15%); + } + + .navbar-search .search-query { + border: 1px solid darken(@gray, 15%); + } + + .btn, + .btn-group { + margin: 4px 0; + } + + .divider-vertical { + background-color: transparent; + border-right: none; + } + + .dropdown-menu::after { + border-bottom: 6px solid @grayDark; + } + + &-inverse { + + .navbar-inner { + #gradient > .vertical-three-colors(darken(@grayDarker, 3%), darken(@grayDarker, 8%), 70%, darken(@grayDarker, 8%)); + } + + .nav li > a { + background-image: none; + background-color: transparent; + } + + .nav li > a:hover, + .nav li.active > a, + .nav li.active > a:hover { + #gradient > .directional(darken(@grayDarker, 10%), darken(@grayDarker, 5%), 280deg); + } + } +} + +@media (max-width: @navbarCollapseWidth) { + + .navbar .nav-collapse { + + .nav li > a, + .nav li > a:hover, + .nav .active > a, + .nav .active > a:hover { + .box-shadow(none); + color: @grayLighter; + border: 1px solid transparent; + background-color: transparent; + background-image: none; + } + + .nav li > a:hover, + .nav .active > a:hover { + background-color: @grayDarker; + } + + .navbar-form, + .navbar-search { + border-color: transparent; + .box-shadow(none); + } + + .nav-header { + color: @grayLight; + } + } + + .navbar-inverse .nav-collapse { + + .nav li > a:hover, + .nav .active > a:hover { + background-color: @grayDarker !important; + } + } +} + +div.subnav { + + margin: 0 1px; + #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark); + border: 1px solid transparent; + .box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)'); + + .nav > li > a { + color: @grayLighter; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); + border-right: 1px solid darken(@gray, 15%); + border-left: 1px solid @gray; + + &:hover { + color: @grayLighter; + background-color: @grayDark; + #gradient > .directional(@grayDarker, @grayDark, 280deg); + border-left: 1px solid transparent; + border-right: 1px solid transparent; + } + } + + .nav > li.active > a, + .nav > li.active > a:hover { + color: @grayLighter; + background-color: @grayDark; + #gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg); + border-right: 1px solid darken(@gray, 15%); + } + + .nav > li:first-child > a, + .nav > li:first-child > a:hover { + border-left: 1px solid transparent; + } + + .nav > li.active:last-child > a, + .nav > li:last-child > a:hover { + border-right: 1px solid darken(@gray, 15%); + } + + .open .dropdown-toggle { + border-right: 1px solid darken(@gray, 15%); + border-left: 1px solid @gray; + } + + &.subnav-fixed { + top: @navbarHeight; + margin: 0; + .box-shadow(none); + + .nav > li.active:first-child > a, + .nav > li:first-child > a:hover { + border-left: 1px solid darken(@gray, 15%); + } + } +} + +// NAV +// ----------------------------------------------------- + +.nav { + + .nav-header { + text-shadow: -1px -1px 0 rgba(0,0,0,0.3); + } + + & > li > a { + #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark); + .box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)'); + border: none; + color: @grayLight; + font-weight: bold; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); + } + + li.active > a, + li.active > a:hover { + background-color: transparent; + border: none; + color: @white; + } + + & > li.disabled > a, + & > li.disabled > a:hover { + color: @gray; + } + + li > a:hover { + background-color: transparent; + color: @grayLighter; + } + +} + +.nav-list { + background-color: @grayDark; + .box-shadow(1px 1px 1px rgba(0, 0, 0, 0.4)); + + li > a { + background-image: none; + text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3); + } + + .nav-header { + color: @gray; + text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3); + } + + .divider { + border-bottom: 1px solid darken(@grayDarker, 5%); + background-color: transparent; + } +} + +.nav-tabs { + border-bottom: none; +} + +.tabs-below .nav-tabs { + border-top: none; +} + +.tabs-left .nav-tabs { + border-right: none; +} + +.tabs-right .nav-tabs { + border-left: none; +} + +.nav-tabs.nav-stacked { + + li > a, + li > a:hover { + border: 1px solid darken(@grayDarker, 5%); + background-image: none; + } + + li > a:hover, + .active > a, + .active > a:hover { + background-color: @wellBackground; + color: @white; + } +} + +.breadcrumb { + border: 1px solid transparent; + #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark); + .box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)'); + + a { + color: @grayLighter; + font-weight: bold; + } + + li { + color: @grayLight; + font-weight: bold; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); + } +} + +.pagination { + + ul { + .box-shadow(none); + } + + ul > li > a, + ul > li > span { + border-left: 1px solid @gray; + border-right: 1px solid darken(@gray, 15%); + border-top: none; + border-bottom: none; + #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark); + .box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)'); + color: @grayLighter; + font-weight: bold; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); + + &:hover { + #gradient > .directional(@grayDarker, @grayDark, 280deg); + border-left: 1px solid transparent; + } + } + + ul > .active > a, + ul > .active > a:hover, + ul > .active > span, + ul > .active > span:hover { + color: @grayLighter; + background-color: @grayDark; + #gradient > .directional(lighten(@grayDarker, 4%), lighten(@grayDark, 4%), 280deg); + border-left: 1px solid transparent; + } + + ul > .disabled > a, + ul > .disabled > a:hover, + ul > .disabled > span, + ul > .disabled > span:hover { + border-left: 1px solid @gray; + border-right: 1px solid darken(@gray, 15%); + border-top: none; + border-bottom: none; + #gradient > .vertical-three-colors(@grayLight, @gray, 70%, @gray); + } +} + +.pager { + + li > a, + li > span { + + border: 1px solid transparent; + .box-shadow('0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1)'); + #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark); + + &:hover { + #gradient > .directional(@grayDarker, @grayDark, 280deg); + border: 1px solid transparent; + } + } + + .disabled a, + .disabled a:hover { + background-color: transparent; + #gradient > .vertical-three-colors(@gray, @grayDark, 70%, @grayDark); + } +} + +// BUTTONS +// ----------------------------------------------------- + +.btn { + .buttonBackground(@gray, darken(@gray, 10%)); + .border-radius(3px); + border: 1px solid @grayDarker; +} + +.btn, .btn:hover { + color: @white; + font-weight: bold; + text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.3); +} + +.btn-primary { + .buttonBackground(@btnPrimaryBackground, spin(@btnPrimaryBackground, 20)); + color: @grayDark; + text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3); +} + +.btn-warning { + .buttonBackground(lighten(@orange, 15%), @orange); +} + +.btn-danger { + .buttonBackground(@red, #bd362f); +} + +.btn-success { + .buttonBackground(@green, #51a351); +} + +.btn-info { + .buttonBackground(@blue, #2f96b4); +} + +.btn-inverse { + .buttonBackground(@gray, @grayDarker); +} + +.caret { + border-top-color: @white; +} + +// TABLES +// ----------------------------------------------------- + +.table { + + tbody tr.success td { + background-color: @successText; + } + + tbody tr.error td { + background-color: @errorText; + } + + tbody tr.info td { + background-color: @infoText; + } + +} + + +// FORMS +// ----------------------------------------------------- + +label, input, button, select, textarea, legend { + color: @textColor; +} + +legend, label { + text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3); +} + +.input-prepend .add-on, +.input-append .add-on { + vertical-align: top; + background-color: @gray; + border-top: 1px solid @grayLight; + border-left: 1px solid @grayLight; + border-bottom: 1px solid @grayDark; + border-right: 1px solid @grayDark; + text-shadow: none; +} + +.input-append .btn, +.input-prepend .btn { + margin-top: -1px; + padding: 5px 14px; +} + +.uneditable-input, +input[disabled], +select[disabled], +textarea[disabled], +input[readonly], +select[readonly], +textarea[readonly] { + color: @grayLighter; +} + +.form-actions { + border-top: none; +} + +// DROPDOWNS +// ----------------------------------------------------- + +.dropdown-menu { + .box-shadow(0 5px 5px rgba(0, 0, 0, 0.2)); +} + +.dropdown.open .dropdown-toggle { + background-color: @grayDark; + color: @grayLighter; +} + +.dropdown-submenu > a::after { + border-left-color: @white; +} + +// ALERTS, LABELS, BADGES +// ----------------------------------------------------- + +.label, .alert { + color: rgba(255, 255, 255, 0.9); + text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3); + .box-shadow(1px 1px 1px rgba(0, 0, 0, 0.3)); +} + +.alert { + background-color: @orange; + border-color: @orange; + + .alert-heading { + color: rgba(255, 255, 255, 0.9); + text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.4); + } +} + +.alert-success { + background-color: @successText; + border-color: @successText; +} + +.alert-error { + background-color: @errorText; + border-color: @errorText; +} + +.alert-info { + background-color: @infoText; + border-color: @infoText; +} + +// MISC +// ----------------------------------------------------- + +.well, .hero-unit { + .box-shadow(inset 1px 1px 1px rgba(0, 0, 0, 0.5)); +} + +.thumbnail, +a.thumbnail:hover { + border: 1px solid darken(@grayDarker, 5%); +} + +.progress { + background-color: darken(@grayDarker, 3%); + #gradient > .vertical(darken(@grayDarker, 3%), darken(@grayDarker, 3%)); + .box-shadow(inset 1px 1px 1px rgba(0, 0, 0, 0.5)); +} + +.footer { + border-top: 1px solid darken(@grayDarker, 5%); + + p { + color: @textColor; + } +} + +.modal { + + background-color: darken(@grayDark, 5%); + + &-header { + border-bottom: none; + } + + &-body { + border-bottom: 1px solid #1C1E22; + } + + &-footer { + border-top: none; + background-color: @grayDarker; + .box-shadow(none); + } +} + +// MEDIA QUERIES +// ----------------------------------------------------- + +@media (max-width: 979px) { + .navbar .brand { + border-right: none; + } +} + +@media (max-width: 768px) { + div.subnav .nav > li + li > a { + border-top: 1px solid transparent; + } +}
\ No newline at end of file |