diff options
Diffstat (limited to 'slate/_bootswatch.scss')
| -rw-r--r-- | slate/_bootswatch.scss | 417 |
1 files changed, 417 insertions, 0 deletions
diff --git a/slate/_bootswatch.scss b/slate/_bootswatch.scss new file mode 100644 index 00000000..27e05156 --- /dev/null +++ b/slate/_bootswatch.scss @@ -0,0 +1,417 @@ +// Slate 3.3.0 +// Bootswatch +// ----------------------------------------------------- + +@mixin btn-shadow($color){ + @include gradient-vertical-three-colors(lighten($color, 6%), $color, 60%, darken($color, 4%)); + filter: none; +} + +@mixin btn-shadow-inverse($color){ + @include gradient-vertical-three-colors(darken($color, 24%), darken($color, 18%), 40%, darken($color, 14%)); + filter: none; +} + +// Navbar ===================================================================== + +.navbar { + + @include btn-shadow($navbar-default-bg); + border: 1px solid rgba(0, 0, 0, 0.6); + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); + + &-inverse { + @include btn-shadow($navbar-inverse-bg); + + .badge { + background-color: $navbar-inverse-link-active-bg; + } + } + + &-nav > li > a { + border-right: 1px solid rgba(0, 0, 0, 0.2); + border-left: 1px solid rgba(255, 255, 255, 0.1); + + &:hover { + @include btn-shadow-inverse($navbar-default-bg); + border-left-color: transparent; + } + } + + .nav .open > a { + border-color: transparent; + } + + &-nav > li.active > a { + border-left-color: transparent; + } + + &-form { + margin-left: 5px; + margin-right: 5px; + } +} + +// Buttons ==================================================================== + +.btn, +.btn:hover { + border-color: rgba(0, 0, 0, 0.6); + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); +} + +.btn-default { + @include btn-shadow($btn-default-bg); + + &:hover { + @include btn-shadow-inverse($btn-default-bg); + } +} + +.btn-primary { + @include btn-shadow($btn-primary-bg); + + &:hover { + @include btn-shadow-inverse($btn-primary-bg); + } +} + +.btn-success { + @include btn-shadow($btn-success-bg); + + &:hover { + @include btn-shadow-inverse($btn-success-bg); + } +} + +.btn-info { + @include btn-shadow($btn-info-bg); + + &:hover { + @include btn-shadow-inverse($btn-info-bg); + } +} + +.btn-warning { + @include btn-shadow($btn-warning-bg); + + &:hover { + @include btn-shadow-inverse($btn-warning-bg); + } +} + +.btn-danger { + @include btn-shadow($btn-danger-bg); + + &:hover { + @include btn-shadow-inverse($btn-danger-bg); + } +} + +.btn-link, +.btn-link:hover { + border-color: transparent; +} + +// Typography ================================================================= + +h1, h2, h3, h4, h5, h6 { + text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3); +} + +.text-primary, +.text-primary:hover { + color: $brand-primary; +} + +.text-success, +.text-success:hover { + color: $brand-success; +} + +.text-danger, +.text-danger:hover { + color: $brand-danger; +} + +.text-warning, +.text-warning:hover { + color: $brand-warning; +} + +.text-info, +.text-info:hover { + color: $brand-info; +} + +// Tables ===================================================================== + +.table { + + .success, + .warning, + .danger, + .info { + color: #fff; + } + + &-bordered tbody { + + tr.success, + tr.warning, + tr.danger { + + td, + &:hover td { + border-color: $table-border-color; + } + } + } +} + +.table-responsive > .table { + background-color: $table-bg; +} + +// Forms ====================================================================== + +input, +textarea { + color: $input-color; +} + +.has-warning { + .help-block, + .control-label, + .form-control-feedback { + color: $brand-warning; + } + + .form-control, + .form-control:focus { + border-color: $brand-warning; + } + + .input-group-addon { + background-color: $body-bg; + border: none; + } +} + +.has-error { + .help-block, + .control-label, + .form-control-feedback { + color: $brand-danger; + } + + .form-control, + .form-control:focus { + border-color: $brand-danger; + } + + .input-group-addon { + background-color: $body-bg; + border: none; + } +} + +.has-success { + .help-block, + .control-label, + .form-control-feedback { + color: $brand-success; + } + + .form-control, + .form-control:focus { + border-color: $brand-success; + } + + .input-group-addon { + background-color: $body-bg; + border: none; + } +} + +legend { + color: #fff; +} + +.input-group-addon { + border-color: rgba(0, 0, 0, 0.6); + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); + @include btn-shadow($btn-default-bg); + color: $btn-default-color; +} + +// Navs ======================================================================= + +.nav { + + .open > a, + .open > a:hover, + .open > a:focus { + border-color: rgba(0, 0, 0, 0.6); + } + +} + +.nav-pills { + + & > li > a { + @include btn-shadow($btn-default-bg); + border: 1px solid rgba(0, 0, 0, 0.6); + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); + + &:hover { + @include btn-shadow-inverse($btn-default-bg); + border: 1px solid rgba(0, 0, 0, 0.6); + } + } + + & > li.active > a, + & > li.active > a:hover { + background-color: none; + @include btn-shadow-inverse($btn-default-bg); + border: 1px solid rgba(0, 0, 0, 0.6); + } + + & > li.disabled > a, + & > li.disabled > a:hover { + @include btn-shadow($btn-default-bg); + } +} + +.pagination { + + & > li > a, + & > li > span { + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); + @include btn-shadow($btn-default-bg); + + &:hover { + @include btn-shadow-inverse($btn-default-bg); + } + } + + & > li.active > a, + & > li.active > span { + @include btn-shadow-inverse($btn-default-bg); + } + + & > li.disabled > a, + & > li.disabled > a:hover, + & > li.disabled > span, + & > li.disabled > span:hover { + background-color: transparent; + @include btn-shadow($btn-default-bg); + } +} + +.pager { + + & > li > a { + @include btn-shadow($btn-default-bg); + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); + + &:hover { + @include btn-shadow-inverse($btn-default-bg); + } + } + + & > li.disabled > a, + & > li.disabled > a:hover { + background-color: transparent; + @include btn-shadow($btn-default-bg); + } +} + +.breadcrumb { + border: 1px solid rgba(0, 0, 0, 0.6); + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); + @include btn-shadow($btn-default-bg); +} + +// Indicators ================================================================= + +.alert { + + .alert-link, + a { + color: #fff; + text-decoration: underline; + } + + .close { + color: $close-color; + text-decoration: none; + } +} + +// Progress bars ============================================================== + +// Containers ================================================================= + +a.thumbnail:hover, +a.thumbnail:focus, +a.thumbnail.active { + border-color: $thumbnail-border; +} + +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%); + } + } +} + +.jumbotron { + border: 1px solid rgba(0, 0, 0, 0.6); +} + +.panel-primary, +.panel-success, +.panel-danger, +.panel-warning, +.panel-info { + + .panel-heading { + border-color: #000; + } +}
\ No newline at end of file |