forked from shadcn/radix-bootswatch
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
26 changed files
with
6,590 additions
and
7,008 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,179 +1,159 @@ | ||
| // Cerulean 2.2.2 | ||
| // Cerulean 3.0.0 | ||
| // Bootswatch | ||
| // ----------------------------------------------------- | ||
|
|
||
| @mixin btn-shadow($color) { | ||
|
|
||
| // TYPOGRAPHY | ||
| // ----------------------------------------------------- | ||
| @include gradient-vertical-three-colors(lighten($color, 8%), $color, 60%, darken($color, 4%)); | ||
| border-bottom: 1px solid darken($color, 10%); | ||
| } | ||
|
|
||
| @import url("//fonts.googleapis.com/css?family=Telex"); | ||
| // Navbar ===================================================================== | ||
|
|
||
| // SCAFFOLDING | ||
| // ----------------------------------------------------- | ||
| .navbar { | ||
| @include btn-shadow($navbar-default-bg); | ||
| filter: none; | ||
| @include box-shadow(0 1px 10px rgba(0, 0, 0, 0.1)); | ||
|
|
||
| // NAVBAR | ||
| // ----------------------------------------------------- | ||
| .navbar-nav > li > a { | ||
| text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); | ||
| } | ||
| } | ||
| .navbar-brand { | ||
| text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); | ||
| } | ||
|
|
||
| .navbar { | ||
| .navbar-inverse { | ||
| @include gradient-vertical-three-colors(lighten($navbar-inverse-bg, 8%), lighten($navbar-inverse-bg, 4%), 60%, darken($navbar-inverse-bg, 2%)); | ||
| filter: none; | ||
| border-bottom: 1px solid darken($navbar-inverse-bg, 10%); | ||
| } | ||
|
|
||
| // Buttons ==================================================================== | ||
|
|
||
| .brand { | ||
| padding: 14px 20px 16px; | ||
| font-family: $headingsFontFamily; | ||
| text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); | ||
| } | ||
| .btn { | ||
|
|
||
| li { | ||
| line-height: 20px; | ||
| } | ||
| text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); | ||
|
|
||
| .nav > li > a { | ||
| padding: 16px 10px 14px; | ||
| font-family: $headingsFontFamily; | ||
| text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); | ||
| .caret { | ||
| border-top-color: #fff; | ||
| } | ||
| } | ||
|
|
||
| .search-query { | ||
| border: 1px solid darken($linkColor, 10%); | ||
| line-height: normal; | ||
| } | ||
| .btn-default { | ||
|
|
||
| @include btn-shadow($btn-default-bg); | ||
|
|
||
| .navbar-text { | ||
| padding: 19px 10px 18px; | ||
| line-height: 13px; | ||
| color: rgba(0, 0, 0, 0.5); | ||
| text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); | ||
| &:hover { | ||
| color: $btn-default-color; | ||
| } | ||
| } | ||
|
|
||
| .navbar-inverse { | ||
| .navbar-search .search-query { | ||
| color: $textColor; | ||
| .caret { | ||
| border-top-color: $text-color; | ||
| } | ||
| } | ||
|
|
||
| @media (max-width: $navbarCollapseWidth) { | ||
| .btn-default { | ||
| @include btn-shadow($btn-default-bg); | ||
| } | ||
|
|
||
| .navbar .nav-collapse { | ||
| .btn-primary { | ||
| @include btn-shadow($btn-primary-bg); | ||
| } | ||
|
|
||
| .nav li > a { | ||
| .btn-success { | ||
| @include btn-shadow($btn-success-bg); | ||
| } | ||
|
|
||
| font-family: $headingsFontFamily; | ||
| font-weight: normal; | ||
| color: $white; | ||
| text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); | ||
| .btn-info { | ||
| @include btn-shadow($btn-info-bg); | ||
| } | ||
|
|
||
| &:hover { | ||
| background-color: #2B7CAC; | ||
| } | ||
| } | ||
| .btn-warning { | ||
| @include btn-shadow($btn-warning-bg); | ||
| } | ||
|
|
||
| .nav .active > a { | ||
| @include box-shadow(none); | ||
| background-color: #2B7CAC; | ||
| } | ||
| .btn-danger { | ||
| @include btn-shadow($btn-danger-bg); | ||
| } | ||
|
|
||
| .dropdown-menu li > a:hover, | ||
| .dropdown-menu li > a:focus, | ||
| .dropdown-submenu:hover > a { | ||
| background-image: none; | ||
| } | ||
| // Typography ================================================================= | ||
|
|
||
| .navbar-form, | ||
| .navbar-search { | ||
| border: none; | ||
| } | ||
| h1, h2, h3, h4, h5, h6 { | ||
| color: #317EAC; | ||
| } | ||
|
|
||
| .nav-header { | ||
| color: #2B7CAC; | ||
| } | ||
| } | ||
| // Tables ===================================================================== | ||
|
|
||
| .navbar-inverse .nav-collapse { | ||
| // Forms ====================================================================== | ||
|
|
||
| .nav li > a { | ||
| color: $navbarInverseLinkColor; | ||
| // Navs ======================================================================= | ||
|
|
||
| &:hover { | ||
| background-color: rgba(0, 0, 0, 0.1); | ||
| } | ||
| } | ||
| .pagination { | ||
|
|
||
| .nav .active > a, | ||
| .nav > li > a:hover, | ||
| .dropdown-menu a:hover { | ||
| background-color: rgba(0, 0, 0, 0.1) !important; | ||
| } | ||
| .active > a, | ||
| .active > a:hover { | ||
| border-color: #ddd; | ||
| } | ||
| } | ||
|
|
||
| div.subnav { | ||
| font-family: $headingsFontFamily; | ||
| text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2); | ||
| } | ||
|
|
||
| div.subnav-fixed { | ||
| top: $navbarHeight; | ||
| } | ||
|
|
||
| // NAV | ||
| // ----------------------------------------------------- | ||
| // Indicators ================================================================= | ||
|
|
||
| // BUTTONS | ||
| // ----------------------------------------------------- | ||
| // Progress bars ============================================================== | ||
|
|
||
| .btn { | ||
| @include ctb-gradient-vertical-three-colors($white, $white, 5, darken($white, 0%)); | ||
| $shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); | ||
| @include box-shadow($shadow); | ||
| // Containers ================================================================= | ||
|
|
||
| &:hover { | ||
| background-position: 0 0; | ||
| } | ||
| } | ||
| .panel-primary { | ||
|
|
||
| .btn-primary { | ||
| @include ctb-buttonBackground(lighten($btnPrimaryBackground, 5%), $btnPrimaryBackground); | ||
| .panel-title { | ||
| color: #fff; | ||
| } | ||
| } | ||
|
|
||
| .btn-info { | ||
| @include ctb-buttonBackground(lighten($btnInfoBackground, 5%), $btnInfoBackground); | ||
| } | ||
| .panel-success { | ||
|
|
||
| .btn-success { | ||
| @include ctb-buttonBackground(lighten($btnSuccessBackground, 5%), $btnSuccessBackground); | ||
| .panel-heading { | ||
| background-color: $brand-success; | ||
| color: #fff; | ||
| } | ||
|
|
||
| .panel-title { | ||
| color: #fff; | ||
| } | ||
| } | ||
|
|
||
| .btn-warning { | ||
| @include ctb-buttonBackground(lighten($btnWarningBackground, 5%), $btnWarningBackground); | ||
| } | ||
| .panel-warning { | ||
|
|
||
| .btn-danger { | ||
| @include ctb-buttonBackground(lighten($btnDangerBackground, 5%), $btnDangerBackground); | ||
| } | ||
| .panel-heading { | ||
| background-color: $brand-warning; | ||
| color: #fff; | ||
| } | ||
|
|
||
| .btn-inverse { | ||
| @include ctb-buttonBackground(lighten($btnInverseBackground, 5%), $btnInverseBackground); | ||
| .panel-title { | ||
| color: #fff; | ||
| } | ||
| } | ||
|
|
||
| // TABLES | ||
| // ----------------------------------------------------- | ||
|
|
||
| // FORMS | ||
| // ----------------------------------------------------- | ||
| .panel-danger { | ||
|
|
||
| // DROPDOWNS | ||
| // ----------------------------------------------------- | ||
| .panel-heading { | ||
| background-color: $brand-danger; | ||
| color: #fff; | ||
| } | ||
|
|
||
| .panel-title { | ||
| color: #fff; | ||
| } | ||
| } | ||
|
|
||
| // ALERTS, LABELS, BADGES | ||
| // ----------------------------------------------------- | ||
| .panel-info { | ||
|
|
||
| // MISC | ||
| // ----------------------------------------------------- | ||
| .panel-heading { | ||
| background-color: $brand-info; | ||
| color: #fff; | ||
| } | ||
|
|
||
| i[class^="icon-"]{ | ||
| opacity: 0.8; | ||
| .panel-title { | ||
| color: #fff; | ||
| } | ||
| } | ||
|
|
||
| // MEDIA QUERIES | ||
| // ----------------------------------------------------- |
Oops, something went wrong.