bootswatch-sass 3.3.1.3 → 3.3.1.4

data/assets/stylesheets/lumen/_variables.scss

@@ -76,7 +76,7 @@ $headings-color:          $gray-dark;
 //## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
 
 //** Load fonts from this directory.
-$icon-font-path:          "bootstrap/";
+$icon-font-path:          "bootstrap/" !default;
 //** File name for all font files.
 $icon-font-name:          "glyphicons-halflings-regular";
 //** Element ID within SVG icon file.

data/assets/stylesheets/paper/_bootswatch.scss

@@ -1,203 +1,118 @@
+// Paper 3.3.1
+// Bootswatch
+// -----------------------------------------------------
+
 @import url("//fonts.googleapis.com/css?family=Roboto:300,400,500");
+
+// Navbar =====================================================================
+
 .navbar {
   border: none;
-  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-}
-.navbar-brand {
-  font-size: 24px;
-}
-.navbar-inverse .form-control {
-  color: #fff;
-}
-.navbar-inverse .form-control::-moz-placeholder {
-  color: #b2dbfb;
-  opacity: 1;
-}
-.navbar-inverse .form-control:-ms-input-placeholder {
-  color: #b2dbfb;
-}
-.navbar-inverse .form-control::-webkit-input-placeholder {
-  color: #b2dbfb;
-}
-.navbar-inverse .form-control[type=text] {
-  -webkit-box-shadow: inset 0 -1px 0 #b2dbfb;
-  box-shadow: inset 0 -1px 0 #b2dbfb;
-}
-.navbar-inverse .form-control[type=text]:focus {
-  -webkit-box-shadow: inset 0 -2px 0 #ffffff;
-  box-shadow: inset 0 -2px 0 #ffffff;
-}
-.navbar-nav > li > .dropdown-menu {
-  margin-top: 2px;
-}
-.btn-default {
-  background-image: -webkit-radial-gradient(circle, #ffffff 80%, #f0f0f0 81%);
-  background-image: radial-gradient(circle, #ffffff 80%, #f0f0f0 81%);
-  background-repeat: no-repeat;
-  background-size: 200%;
-  background-position: 50%;
-  transition: background-size 2s;
-}
-.btn-default:hover {
-  background-size: 100%;
-  border-color: #f0f0f0;
-}
-.btn-default:active {
-  background-color: #f0f0f0;
-  background-image: -webkit-radial-gradient(circle, #f0f0f0 10%, #ffffff 11%);
-  background-image: radial-gradient(circle, #f0f0f0 10%, #ffffff 11%);
-  background-repeat: no-repeat;
-  background-size: 1000%;
-  -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
-  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
-}
-.btn-primary {
-  background-image: -webkit-radial-gradient(circle, #2196f3 80%, #0d87e9 81%);
-  background-image: radial-gradient(circle, #2196f3 80%, #0d87e9 81%);
-  background-repeat: no-repeat;
-  background-size: 200%;
-  background-position: 50%;
-  transition: background-size 2s;
-}
-.btn-primary:hover {
-  background-size: 100%;
-  border-color: #0d87e9;
-}
-.btn-primary:active {
-  background-color: #0d87e9;
-  background-image: -webkit-radial-gradient(circle, #0d87e9 10%, #2196f3 11%);
-  background-image: radial-gradient(circle, #0d87e9 10%, #2196f3 11%);
-  background-repeat: no-repeat;
-  background-size: 1000%;
-  -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
-  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
-}
-.btn-success {
-  background-image: -webkit-radial-gradient(circle, #4caf50 80%, #439a46 81%);
-  background-image: radial-gradient(circle, #4caf50 80%, #439a46 81%);
-  background-repeat: no-repeat;
-  background-size: 200%;
-  background-position: 50%;
-  transition: background-size 2s;
-}
-.btn-success:hover {
-  background-size: 100%;
-  border-color: #439a46;
-}
-.btn-success:active {
-  background-color: #439a46;
-  background-image: -webkit-radial-gradient(circle, #439a46 10%, #4caf50 11%);
-  background-image: radial-gradient(circle, #439a46 10%, #4caf50 11%);
-  background-repeat: no-repeat;
-  background-size: 1000%;
-  -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
-  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
-}
-.btn-info {
-  background-image: -webkit-radial-gradient(circle, #9c27b0 80%, #862197 81%);
-  background-image: radial-gradient(circle, #9c27b0 80%, #862197 81%);
-  background-repeat: no-repeat;
-  background-size: 200%;
-  background-position: 50%;
-  transition: background-size 2s;
-}
-.btn-info:hover {
-  background-size: 100%;
-  border-color: #862197;
-}
-.btn-info:active {
-  background-color: #862197;
-  background-image: -webkit-radial-gradient(circle, #862197 10%, #9c27b0 11%);
-  background-image: radial-gradient(circle, #862197 10%, #9c27b0 11%);
-  background-repeat: no-repeat;
-  background-size: 1000%;
-  -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
-  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
-}
-.btn-warning {
-  background-image: -webkit-radial-gradient(circle, #ff9800 80%, #e08600 81%);
-  background-image: radial-gradient(circle, #ff9800 80%, #e08600 81%);
-  background-repeat: no-repeat;
-  background-size: 200%;
-  background-position: 50%;
-  transition: background-size 2s;
-}
-.btn-warning:hover {
-  background-size: 100%;
-  border-color: #e08600;
-}
-.btn-warning:active {
-  background-color: #e08600;
-  background-image: -webkit-radial-gradient(circle, #e08600 10%, #ff9800 11%);
-  background-image: radial-gradient(circle, #e08600 10%, #ff9800 11%);
-  background-repeat: no-repeat;
-  background-size: 1000%;
-  -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
-  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
-}
-.btn-danger {
-  background-image: -webkit-radial-gradient(circle, #e51c23 80%, #cb171e 81%);
-  background-image: radial-gradient(circle, #e51c23 80%, #cb171e 81%);
-  background-repeat: no-repeat;
-  background-size: 200%;
-  background-position: 50%;
-  transition: background-size 2s;
-}
-.btn-danger:hover {
-  background-size: 100%;
-  border-color: #cb171e;
-}
-.btn-danger:active {
-  background-color: #cb171e;
-  background-image: -webkit-radial-gradient(circle, #cb171e 10%, #e51c23 11%);
-  background-image: radial-gradient(circle, #cb171e 10%, #e51c23 11%);
-  background-repeat: no-repeat;
-  background-size: 1000%;
-  -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
-  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
-}
+  @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;
-  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
-  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
-  -webkit-transition: all 0.2s;
-  -o-transition: all 0.2s;
-  transition: all 0.2s;
-}
-.btn-link {
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
-.btn-link:hover,
-.btn-link:focus {
-  color: #2196f3;
-  text-decoration: none;
-}
-.btn-default.disabled {
-  border: 1px solid #eeeeee;
-}
+  @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 {
-  -webkit-transition: all 0.2s;
-  -o-transition: all 0.2s;
-  transition: all 0.2s;
+  @include transition(all 0.2s);
 }
+
+// Tables =====================================================================
+
+// Forms ======================================================================
+
 textarea,
 textarea.form-control,
 input.form-control,
@@ -212,253 +127,282 @@ input[type=number],
   padding: 0;
   border: none;
   border-radius: 0;
-  -webkit-box-shadow: inset 0 -1px 0 #dddddd;
-  box-shadow: inset 0 -1px 0 #dddddd;
+  @include box-shadow(inset 0 -1px 0 #ddd);
   font-size: 16px;
-}
-textarea:focus,
-textarea.form-control:focus,
-input.form-control:focus,
-input[type=text]:focus,
-input[type=password]:focus,
-input[type=email]:focus,
-input[type=number]:focus,
-[type=text].form-control:focus,
-[type=password].form-control:focus,
-[type=email].form-control:focus,
-[type=tel].form-control:focus {
-  -webkit-box-shadow: inset 0 -2px 0 #2196f3;
-  box-shadow: inset 0 -2px 0 #2196f3;
-}
-textarea[disabled],
-textarea.form-control[disabled],
-input.form-control[disabled],
-input[type=text][disabled],
-input[type=password][disabled],
-input[type=email][disabled],
-input[type=number][disabled],
-[type=text].form-control[disabled],
-[type=password].form-control[disabled],
-[type=email].form-control[disabled],
-[type=tel].form-control[disabled],
-textarea[readonly],
-textarea.form-control[readonly],
-input.form-control[readonly],
-input[type=text][readonly],
-input[type=password][readonly],
-input[type=email][readonly],
-input[type=number][readonly],
-[type=text].form-control[readonly],
-[type=password].form-control[readonly],
-[type=email].form-control[readonly],
-[type=tel].form-control[readonly] {
-  -webkit-box-shadow: none;
-  box-shadow: none;
-  border-bottom: 1px dotted #ddd;
-}
+
+  &: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;
-  -webkit-box-shadow: inset 0 -1px 0 #dddddd;
-  box-shadow: inset 0 -1px 0 #dddddd;
+  @include box-shadow(inset 0 -1px 0 #ddd);
   font-size: 16px;
   padding-left: 0px;
-}
-select:focus,
-select.form-control:focus {
-  -webkit-box-shadow: inset 0 -2px 0 #2196f3;
-  box-shadow: inset 0 -2px 0 #2196f3;
-}
-.has-warning input,
-.has-warning .form-control,
-.has-warning input:focus,
-.has-warning .form-control:focus {
-  -webkit-box-shadow: inset 0 -2px 0 #ff9800;
-  box-shadow: inset 0 -2px 0 #ff9800;
-}
-.has-error input,
-.has-error .form-control,
-.has-error input:focus,
-.has-error .form-control:focus {
-  -webkit-box-shadow: inset 0 -2px 0 #e51c23;
-  box-shadow: inset 0 -2px 0 #e51c23;
-}
-.has-success input,
-.has-success .form-control,
-.has-success input:focus,
-.has-success .form-control:focus {
-  -webkit-box-shadow: inset 0 -2px 0 #4caf50;
-  box-shadow: inset 0 -2px 0 #4caf50;
-}
-.nav-tabs > li > a {
-  border: none;
-  margin-right: 0;
-  color: #666666;
-  -webkit-box-shadow: inset 0 -1px 0 #dddddd;
-  box-shadow: inset 0 -1px 0 #dddddd;
-  -webkit-transition: all 0.2s;
-  -o-transition: all 0.2s;
-  transition: all 0.2s;
-}
-.nav-tabs > li > a:hover {
-  background-color: transparent;
-  -webkit-box-shadow: inset 0 -2px 0 #2196f3;
-  box-shadow: inset 0 -2px 0 #2196f3;
-  color: #2196f3;
-}
-.nav-tabs > li.active > a {
-  border: none;
-  -webkit-box-shadow: inset 0 -2px 0 #2196f3;
-  box-shadow: inset 0 -2px 0 #2196f3;
-  color: #2196f3;
-}
-.nav-tabs > li.active > a:hover {
-  border: none;
-  color: #2196f3;
-}
-.nav-tabs > li.disabled > a {
-  -webkit-box-shadow: inset 0 -1px 0 #dddddd;
-  box-shadow: inset 0 -1px 0 #dddddd;
-}
-.nav-tabs.nav-justified > li > a,
-.nav-tabs.nav-justified > li > a:hover,
-.nav-tabs.nav-justified > .active > a,
-.nav-tabs.nav-justified > .active > a:hover {
-  border: none;
-}
-.nav-tabs .dropdown-menu {
-  margin-top: 0;
-}
+
+  &: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;
-  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  @include box-shadow(0 1px 4px rgba(0,0,0,.3));
 }
+
+// Indicators =================================================================
+
 .alert {
   border: none;
   color: #fff;
-}
-.alert-success {
-  background-color: #4caf50;
-}
-.alert-info {
-  background-color: #9c27b0;
-}
-.alert-warning {
-  background-color: #ff9800;
-}
-.alert-danger {
-  background-color: #e51c23;
-}
-.alert a:not(.close),
-.alert .alert-link {
-  color: #fff;
-  font-weight: bold;
-}
-.alert .close {
-  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;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
-.progress-bar {
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
-.progress-bar:last-child {
-  border-radius: 0 3px 3px 0;
-}
-.progress-bar:last-child:before {
-  display: block;
-  content: 'div::before';
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  right: 0;
-  z-index: -1;
-  background-color: #cae6fc;
-}
-.progress-bar-success:last-child.progress-bar:before {
-  background-color: #c7e7c8;
-}
-.progress-bar-info:last-child.progress-bar:before {
-  background-color: #edc9f3;
-}
-.progress-bar-warning:last-child.progress-bar:before {
-  background-color: #ffe0b3;
-}
-.progress-bar-danger:last-child.progress-bar:before {
-  background-color: #f28e92;
-}
+
+  @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;
-}
-.close:hover {
-  opacity: 1;
-}
-.list-group-item {
-  padding: 15px;
-}
-.list-group-item-text {
-  color: #bbbbbb;
-}
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.list-group {
+
+  &-item {
+    padding: 15px;
+  }
+
+  &-item-text {
+    color: $gray-light;
+  }
+}
+
 .well {
   border-radius: 0;
-  -webkit-box-shadow: none;
-  box-shadow: none;
+  @include box-shadow(none);
 }
+
 .panel {
   border: none;
   border-radius: 2px;
-  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-}
-.panel-heading {
-  border-bottom: none;
-}
-.panel-footer {
-  border-top: none;
-}
-.panel-success .panel-heading {
-  background-color: #4caf50;
-}
-.panel-success .panel-title {
-  color: #fff;
-}
-.panel-info .panel-heading {
-  background-color: #9c27b0;
-}
-.panel-info .panel-title {
-  color: #fff;
-}
-.panel-warning .panel-heading {
-  background-color: #ff9800;
-}
-.panel-warning .panel-title {
-  color: #fff;
-}
-.panel-danger .panel-heading {
-  background-color: #e51c23;
-}
-.panel-danger .panel-title {
-  color: #fff;
-}
+  @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;
-  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  @include box-shadow(0 1px 4px rgba(0,0,0,.3));
 }