slate skin+style
Actions: add created | edit updated | delete deleted | build unsaved draft
Content changes: Additions | Subtractions
  • slate skin+style
    // Slate 3.3.4 // 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; } }
  • slate skin
    ...