diff options
author | Corey Sewell <corey@gdmedia.tv> | 2014-11-14 20:40:27 +1300 |
---|---|---|
committer | Corey Sewell <corey@gdmedia.tv> | 2014-11-14 20:44:05 +1300 |
commit | 28bd7c0707e3a29f4f74fbdeab88beaa81cd06d4 (patch) | |
tree | 2d1f7e7bfaf049f0829f0896d3b0e7c3c16b7a63 /paper/_bootswatch.scss | |
parent | 3f867ba1163807a2d43f33ba8d38b5947c45b6fe (diff) |
Add support for SASS/SCSS
Refactored less files to be more scss friendly
* Ensured no variables are used before assignment
* Removed interpolated variable usage with similar substitute
Added SCSS Grunt tasks
* convert_less - Converts theme less files to scss
* swatch_scss - Same as original swatch task, but using sass
* compress_scss - Same as original compress task, but using sass
Added dependencies for SCSS
Updated _config.yml so jekyll includes theme _bootswatch.scss and _variables.scss files
Added .sass-cache dir to .gitignore
Diffstat (limited to 'paper/_bootswatch.scss')
-rw-r--r-- | paper/_bootswatch.scss | 408 |
1 files changed, 408 insertions, 0 deletions
diff --git a/paper/_bootswatch.scss b/paper/_bootswatch.scss new file mode 100644 index 00000000..3bfecc38 --- /dev/null +++ b/paper/_bootswatch.scss @@ -0,0 +1,408 @@ +// Paper 3.3.0 +// Bootswatch +// ----------------------------------------------------- + +@import url("//fonts.googleapis.com/css?family=Roboto:300,400,500"); + +// Navbar ===================================================================== + +.navbar { + border: none; + @include box-shadow(0 1px 2px rgba(0,0,0,.3)); + + &-brand { + font-size: 24px; + } + + &-inverse { + .form-control { + color: #fff; + @include placeholder($navbar-inverse-link-color); + + &[type=text] { + @include box-shadow(inset 0 -1px 0 $navbar-inverse-link-color); + + &:focus { + @include box-shadow(inset 0 -2px 0 #fff); + } + } + } + } + + &-nav > li > .dropdown-menu { + margin-top: 2px; + } +} + +// Buttons ==================================================================== + +@mixin btn($class,$bg){ + .btn-#{$class} { + @include gradient-radial($bg 80%, darken($bg, 6%) 81%); + background-size: 200%; + background-position: 50%; + transition: background-size 2s; + + &:hover { + background-size: 100%; + border-color: darken($bg, 6%); + } + + &:active { + background-color: darken($bg, 6%); + @include gradient-radial(darken($bg, 6%) 10%, $bg 11%); + background-size: 1000%; + @include box-shadow(2px 2px 2px rgba(0,0,0,.3)); + } + } +} + +@include btn(default,$btn-default-bg); +@include btn(primary,$btn-primary-bg); +@include btn(success,$btn-success-bg); +@include btn(info,$btn-info-bg); +@include btn(warning,$btn-warning-bg); +@include btn(danger,$btn-danger-bg); + +.btn { + text-transform: uppercase; + border-right: none; + border-bottom: none; + @include box-shadow(1px 1px 2px rgba(0,0,0,.3)); + @include transition(all 0.2s); + + &-link { + @include box-shadow(none); + + &:hover, + &:focus { + color: $brand-primary; + text-decoration: none; + } + } + + &-default.disabled { + border: 1px solid $btn-default-border; + } +} + +// Typography ================================================================= + +body { + -webkit-font-smoothing: antialiased; + letter-spacing: .1px; + text-rendering: optimizeLegibility; +} + +p { + margin: 0 0 1em; +} + +input, +button { + -webkit-font-smoothing: antialiased; + letter-spacing: .1px; + text-rendering: optimizeLegibility; +} + +a { + @include transition(all 0.2s); +} + +// Tables ===================================================================== + +// Forms ====================================================================== + +textarea, +textarea.form-control, +input.form-control, +input[type=text], +input[type=password], +input[type=email], +input[type=number], +[type=text].form-control, +[type=password].form-control, +[type=email].form-control, +[type=tel].form-control { + padding: 0; + border: none; + border-radius: 0; + @include box-shadow(inset 0 -1px 0 #ddd); + font-size: 16px; + + &:focus { + @include box-shadow(inset 0 -2px 0 $brand-primary); + } + + &[disabled], + &[readonly] { + @include box-shadow(none); + border-bottom: 1px dotted #ddd; + } +} + +select, +select.form-control { + border: 0; + border-radius: 0; + -webkit-appearance: none; + @include box-shadow(inset 0 -1px 0 #ddd); + font-size: 16px; + padding-left: 0px; + + &:focus { + @include box-shadow(inset 0 -2px 0 $brand-primary); + } +} + +.has-warning { + input, + .form-control, + input:focus, + .form-control:focus { + @include box-shadow(inset 0 -2px 0 $brand-warning); + } +} + +.has-error { + input, + .form-control, + input:focus, + .form-control:focus { + @include box-shadow(inset 0 -2px 0 $brand-danger); + } +} + +.has-success { + input, + .form-control, + input:focus, + .form-control:focus { + @include box-shadow(inset 0 -2px 0 $brand-success); + } +} + +// Navs ======================================================================= + +.nav-tabs { + & > li > a { + border: none; + margin-right: 0; + color: $navbar-default-link-color; + @include box-shadow(inset 0 -1px 0 #ddd); + @include transition(all 0.2s); + + &:hover { + background-color: transparent; + @include box-shadow(inset 0 -2px 0 $brand-primary); + color: $brand-primary; + } + } + + & > li.active > a { + border: none; + @include box-shadow(inset 0 -2px 0 $brand-primary); + color: $brand-primary; + + &:hover { + border: none; + color: $brand-primary; + } + } + + & > li.disabled > a { + @include box-shadow(inset 0 -1px 0 #ddd); + } + + &.nav-justified { + + & > li > a, + & > li > a:hover, + & > .active > a, + & > .active > a:hover { + border: none; + } + } + + .dropdown-menu { + margin-top: 0; + } +} + +.dropdown-menu { + border: none; + @include box-shadow(0 1px 4px rgba(0,0,0,.3)); +} + +// Indicators ================================================================= + +.alert { + border: none; + color: #fff; + + &-success { + background-color: $brand-success; + } + + &-info { + background-color: $brand-info; + } + + &-warning { + background-color: $brand-warning; + } + + &-danger { + background-color: $brand-danger; + } + + a:not(.close), + .alert-link { + color: #fff; + font-weight: bold; + } + + .close { + color: #fff; + } +} + +.badge { + padding: 3px 6px 5px; +} + +.progress { + position: relative; + z-index: 1; + height: 6px; + border-radius: 0; + + @include box-shadow(none); + + &-bar { + @include box-shadow(none); + + &:last-child { + border-radius: 0 3px 3px 0; + } + + &:last-child { + &:before { + display: block; + content: 'div::before'; + position: absolute; + width: 100%; + height: 100%; + left: 0; + right: 0; + z-index: -1; + background-color: lighten($progress-bar-bg, 35%); + } + } + + &-success:last-child.progress-bar:before { + background-color: lighten($brand-success, 35%); + } + + &-info:last-child.progress-bar:before { + background-color: lighten($brand-info, 45%); + } + &-warning:last-child.progress-bar:before { + background-color: lighten($brand-warning, 35%); + } + + &-danger:last-child.progress-bar:before { + background-color: lighten($brand-danger, 25%); + } + } +} + +// Progress bars ============================================================== + +// Containers ================================================================= + +.close { + font-size: 34px; + font-weight: 300; + line-height: 24px; + opacity: 0.6; + + &:hover { + opacity: 1; + } +} + +.list-group { + + &-item { + padding: 15px; + } + + &-item-text { + color: $gray-light; + } +} + +.well { + border-radius: 0; + @include box-shadow(none); +} + +.panel { + border: none; + border-radius: 2px; + @include box-shadow(0 1px 4px rgba(0,0,0,.3)); + + &-heading { + border-bottom: none; + } + + &-footer { + border-top: none; + } + + &-success { + .panel-heading { + background-color: $brand-success; + } + + .panel-title { + color: #fff; + } + } + + &-info { + .panel-heading { + background-color: $brand-info; + } + + .panel-title { + color: #fff; + } + } + + &-warning { + .panel-heading { + background-color: $brand-warning; + } + + .panel-title { + color: #fff; + } + } + + &-danger { + .panel-heading { + background-color: $brand-danger; + } + + .panel-title { + color: #fff; + } + } +} + +.popover { + border: none; + @include box-shadow(0 1px 4px rgba(0,0,0,.3)); +} |