basscss-rails 1.0.0 → 2.0.0

data/app/assets/stylesheets/basscss/_button-transparent.scss

@@ -68,12 +68,6 @@ $breakpoint-lg: '(min-width: 64em)' !default;
   background-color: transparent;
   border-radius: 0;
   border: $border-width solid transparent;
-  -webkit-transition-duration: .1s;
-          transition-duration: .1s;
-  -webkit-transition-timing-function: ease-out;
-          transition-timing-function: ease-out;
-  -webkit-transition-property: box-shadow;
-          transition-property: box-shadow;
 }
 
 .button-transparent:before {
@@ -87,12 +81,6 @@ $breakpoint-lg: '(min-width: 64em)' !default;
   left: -$border-width;
   border: $border-width solid transparent;
   background-color: currentcolor;
-  -webkit-transition-duration: .1s;
-          transition-duration: .1s;
-  -webkit-transition-timing-function: ease-out;
-          transition-timing-function: ease-out;
-  -webkit-transition-property: opacity;
-          transition-property: opacity;
   opacity: 0;
 }
 

data/app/assets/stylesheets/basscss/_color-base.scss

@@ -52,9 +52,16 @@ $darken-4: rgba(0,0,0,.5) !default;
 $border-width: 1px !default;
 $border-radius: 3px !default;
 $border-color: $darken-2 !default;
+$body-color: $black !default;
+$body-background-color: $white !default;
 $link-color: $blue !default;
-$button-background-color: $blue !default;
+$link-text-decoration: none !default;
+$link-hover-text-decoration: underline !default;
 $pre-background-color: transparent !default;
+$pre-border-radius: $border-radius !default;
+$rule-border-style: solid !default;
+$rule-border-width: $border-width !default;
+$rule-border-color: $border-color !default;
 
 // Custom Media Query Variables
 
@@ -65,63 +72,29 @@ $breakpoint-lg: '(min-width: 64em)' !default;
 /* Basscss Color Base */
 
 body {
-  color: $black;
-  background-color: white;
+  color: $body-color;
+  background-color: $body-background-color;
 }
 
 a {
   color: $link-color;
-  text-decoration: none;
+  text-decoration: $link-text-decoration;
 }
 
 a:hover {
-  text-decoration: underline;
+  text-decoration: $link-hover-text-decoration;
 }
 
 pre, code {
   background-color: $pre-background-color;
-  border-radius: $border-radius;
+  border-radius: $pre-border-radius;
 }
 
 hr {
   border: 0;
-  border-bottom-style: solid;
-  border-bottom-width: $border-width;
-  border-bottom-color: $border-color;
-}
-
-.button {
-  color: white;
-  background-color: $button-background-color;
-  border-radius: $border-radius;
-  -webkit-transition-duration: .05s;
-          transition-duration: .05s;
-  -webkit-transition-timing-function: ease-out;
-          transition-timing-function: ease-out;
-  -webkit-transition-property: box-shadow, background-color;
-          transition-property: box-shadow, background-color;
-}
-
-.button:hover {
-  box-shadow: inset 0 0 0 20rem $darken-1;
-}
-
-.button:focus {
-  outline: none;
-  border-color: $darken-2;
-  box-shadow: 0 0 0 3px $darken-3;
-}
-
-.button:active,
-.button.is-active {
-  box-shadow: inset 0 0 0 20rem $darken-2,
-    inset 0 3px 4px 0 $darken-3,
-    0 0 1px $darken-2;
-}
-
-.button:disabled,
-.button.is-disabled {
-  opacity: .5;
+  border-bottom-style: $rule-border-style;
+  border-bottom-width: $rule-border-width;
+  border-bottom-color: $rule-border-color;
 }
 
 /* Basscss Defaults */

data/app/assets/stylesheets/basscss/_color-forms-dark.scss

@@ -52,6 +52,9 @@ $darken-4: rgba(0,0,0,.5) !default;
 $border-width: 1px !default;
 $border-radius: 3px !default;
 $border-color: $darken-2 !default;
+$field-success-color: $green !default;
+$field-warning-color: $yellow !default;
+$field-error-color: $red !default;
 
 // Custom Media Query Variables
 
@@ -69,47 +72,63 @@ $breakpoint-lg: '(min-width: 64em)' !default;
 }
 
 .field-dark::-webkit-input-placeholder {
+  color: #FFFFFF;
   color: rgba(255,255,255,.75);
 }
 
 .field-dark::-moz-placeholder {
+  color: #FFFFFF;
   color: rgba(255,255,255,.75);
 }
 
 .field-dark:-ms-input-placeholder {
+  color: #FFFFFF;
   color: rgba(255,255,255,.75);
 }
 
 .field-dark::placeholder {
+  color: #FFFFFF;
   color: rgba(255,255,255,.75);
 }
 
 .field-dark:focus {
   outline: 0;
+  border: 1px solid #FFFFFF;
   border: 1px solid rgba(255,255,255,.5);
   box-shadow: 0 0 0 2px rgba(255,255,255,.25);
 }
 
 .field-dark:read-only:not(select) {
+  background-color: #FFFFFF;
   background-color: rgba(255,255,255,.25);
 }
 
-.field-dark:invalid {
-  border-color: $red;
+.field-dark.is-success {
+  border-color: $field-success-color;
 }
 
-.field-dark.is-success {
-  border-color: $green;
+.field-dark.is-success:focus {
+  box-shadow: 0 0 0 2px color($field-success-color a(.5));
 }
 
 .field-dark.is-warning {
-  border-color: $yellow;
+  border-color: $field-warning-color;
+}
+
+.field-dark.is-warning:focus {
+  box-shadow: 0 0 0 2px color($field-warning-color a(.5));
 }
 
+.field-dark:invalid,
 .field-dark.is-error {
-  border-color: $red;
+  border-color: $field-error-color;
 }
 
+.field-dark.is-error:focus {
+  box-shadow: 0 0 0 2px color($field-error-color a(.5));
+}
+
+
 /* Basscss Defaults */
 
 /*

data/app/assets/stylesheets/basscss/_color-forms.scss

@@ -52,6 +52,10 @@ $darken-4: rgba(0,0,0,.5) !default;
 $border-width: 1px !default;
 $border-radius: 3px !default;
 $border-color: $darken-2 !default;
+$field-focus-color: $blue !default;
+$field-success-color: $green !default;
+$field-warning-color: $yellow !default;
+$field-error-color: $red !default;
 
 // Custom Media Query Variables
 
@@ -61,47 +65,63 @@ $breakpoint-lg: '(min-width: 64em)' !default;
 
 /* Basscss Color Forms */
 
-.field-light {
-  background-color: white;
-  -webkit-transition: box-shadow .2s ease;
-          transition: box-shadow .2s ease;
+.field {
   border-style: solid;
   border-width: $border-width;
   border-color: $border-color;
   border-radius: $border-radius;
 }
 
-.field-light:focus {
+.field:focus,
+.field.is-focused {
   outline: none;
-  border-color: $blue;
-  box-shadow: 0 0 0 2px color($blue a(.5));
+  border-color: $field-focus-color;
+  box-shadow: 0 0 0 2px color($field-focus-color a(.5));
 }
 
-.field-light:disabled {
+.field:disabled,
+.field.is-disabled {
   background-color: $darken-2;
   opacity: .5;
 }
 
-.field-light:read-only:not(select) {
+.field:read-only:not(select),
+.field.is-read-only {
   background-color: $darken-2;
 }
 
-.field-light:invalid {
-  border-color: $red;
+
+.field.is-success {
+  border-color: $field-success-color;
+}
+
+.field.is-success:focus,
+.field.is-success.is-focused {
+  box-shadow: 0 0 0 2px color($field-success-color a(.5));
 }
 
-.field-light.is-success {
-  border-color: $green;
+.field.is-warning {
+  border-color: $field-warning-color;
 }
 
-.field-light.is-warning {
-  border-color: $yellow;
+.field.is-warning:focus,
+.field.is-warning.is-focused {
+  box-shadow: 0 0 0 2px color($field-warning-color a(.5));
 }
 
-.field-light.is-error {
-  border-color: $red;
+.field:invalid,
+.field.is-error {
+  border-color: $field-error-color;
 }
 
+.field:invalid:focus,
+.field:invalid.is-focused,
+.field.is-error:focus,
+.field.is-error.is-focused {
+  box-shadow: 0 0 0 2px color($field-error-color a(.5));
+}
+
+
 /* Basscss Defaults */
 
 /*

data/app/assets/stylesheets/basscss/_color-input-range.scss

@@ -0,0 +1,119 @@
+
+// Converted Variables
+
+$aqua: #7fdbff !default;
+$blue: #0074d9 !default;
+$navy: #001f3f !default;
+$teal: #39cccc !default;
+$green: #2ecc40 !default;
+$olive: #3d9970 !default;
+$lime: #01ff70 !default;
+$yellow: #ffdc00 !default;
+$orange: #ff851b !default;
+$red: #ff4136 !default;
+$fuchsia: #f012be !default;
+$purple: #b10dc9 !default;
+$maroon: #85144b !default;
+$white: #fff !default;
+$silver: #ddd !default;
+$gray: #aaa !default;
+$black: #111 !default;
+$font-family: 'Helvetica Neue', Helvetica, sans-serif !default;
+$line-height: 1.5 !default;
+$heading-font-family: $font-family !default;
+$heading-font-weight: bold !default;
+$heading-line-height: 1.25 !default;
+$monospace-font-family: 'Source Code Pro', Consolas, monospace !default;
+$h1: 2rem !default;
+$h2: 1.5rem !default;
+$h3: 1.25rem !default;
+$h4: 1rem !default;
+$h5: .875rem !default;
+$h6: .75rem !default;
+$bold-font-weight: bold !default;
+$space-1: .5rem !default;
+$space-2: 1rem !default;
+$space-3: 2rem !default;
+$space-4: 4rem !default;
+$form-field-font-size: 1rem !default;
+$form-field-height: 2.25rem !default;
+$form-field-padding-y: .5rem !default;
+$form-field-padding-x: .5rem !default;
+$button-font-size: inherit !default;
+$button-font-weight: bold !default;
+$button-line-height: 1.125rem !default;
+$button-padding-y: .5rem !default;
+$button-padding-x: 1rem !default;
+$container-width: 64em !default;
+$darken-1: rgba(0,0,0,.0625) !default;
+$darken-2: rgba(0,0,0,.125) !default;
+$darken-3: rgba(0,0,0,.25) !default;
+$darken-4: rgba(0,0,0,.5) !default;
+$border-width: 1px !default;
+$border-radius: 3px !default;
+$border-color: $darken-2 !default;
+
+// Custom Media Query Variables
+
+$breakpoint-sm: '(min-width: 40em)' !default;
+$breakpoint-md: '(min-width: 52em)' !default;
+$breakpoint-lg: '(min-width: 64em)' !default;
+
+/* Basscss Color Input Range */
+
+.range-light {
+  color: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+}
+
+.range-light::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  border-radius: $border-radius;
+  background-color: currentcolor;
+}
+
+.range-light::-moz-range-thumb {
+  border-radius: $border-radius;
+  border-color: transparent;
+  border-width: 0;
+  background-color: currentcolor;
+}
+
+.range-light::-webkit-slider-runnable-track {
+  border-radius: $border-radius;
+  background-color: $darken-3;
+}
+
+.range-light::-moz-range-track {
+  border-radius: $border-radius;
+  background-color: $darken-3;
+}
+
+.range-light:focus {
+  outline: none;
+}
+
+.range-light:focus::-webkit-slider-thumb {
+  outline: none;
+  border: 0;
+  box-shadow: 0 0 1px 2px currentcolor;
+}
+
+.range-light:focus::-moz-range-thumb {
+  outline: none;
+  border: 0;
+  box-shadow: 0 0 0 3px $darken-3;
+}
+
+/* Basscss Defaults */
+
+/*
+
+   COLOR VARIABLES
+
+   - Cool
+   - Warm
+   - Gray Scale
+
+*/

data/app/assets/stylesheets/basscss/_color-progress.scss

@@ -0,0 +1,95 @@
+
+// Converted Variables
+
+$aqua: #7fdbff !default;
+$blue: #0074d9 !default;
+$navy: #001f3f !default;
+$teal: #39cccc !default;
+$green: #2ecc40 !default;
+$olive: #3d9970 !default;
+$lime: #01ff70 !default;
+$yellow: #ffdc00 !default;
+$orange: #ff851b !default;
+$red: #ff4136 !default;
+$fuchsia: #f012be !default;
+$purple: #b10dc9 !default;
+$maroon: #85144b !default;
+$white: #fff !default;
+$silver: #ddd !default;
+$gray: #aaa !default;
+$black: #111 !default;
+$font-family: 'Helvetica Neue', Helvetica, sans-serif !default;
+$line-height: 1.5 !default;
+$heading-font-family: $font-family !default;
+$heading-font-weight: bold !default;
+$heading-line-height: 1.25 !default;
+$monospace-font-family: 'Source Code Pro', Consolas, monospace !default;
+$h1: 2rem !default;
+$h2: 1.5rem !default;
+$h3: 1.25rem !default;
+$h4: 1rem !default;
+$h5: .875rem !default;
+$h6: .75rem !default;
+$bold-font-weight: bold !default;
+$space-1: .5rem !default;
+$space-2: 1rem !default;
+$space-3: 2rem !default;
+$space-4: 4rem !default;
+$form-field-font-size: 1rem !default;
+$form-field-height: 2.25rem !default;
+$form-field-padding-y: .5rem !default;
+$form-field-padding-x: .5rem !default;
+$button-font-size: inherit !default;
+$button-font-weight: bold !default;
+$button-line-height: 1.125rem !default;
+$button-padding-y: .5rem !default;
+$button-padding-x: 1rem !default;
+$container-width: 64em !default;
+$darken-1: rgba(0,0,0,.0625) !default;
+$darken-2: rgba(0,0,0,.125) !default;
+$darken-3: rgba(0,0,0,.25) !default;
+$darken-4: rgba(0,0,0,.5) !default;
+$border-width: 1px !default;
+$border-radius: 3px !default;
+$border-color: $darken-2 !default;
+
+// Custom Media Query Variables
+
+$breakpoint-sm: '(min-width: 40em)' !default;
+$breakpoint-md: '(min-width: 52em)' !default;
+$breakpoint-lg: '(min-width: 64em)' !default;
+
+/* Basscss Color Progress */
+
+.progress {
+  background-color: $darken-2;
+  border: 0;
+  border-radius: 10000px;
+}
+
+.progress::-webkit-progress-bar {
+  -webkit-appearance: none;
+  background-color: $darken-2
+}
+
+.progress::-webkit-progress-value {
+  -webkit-appearance: none;
+  background-color: currentColor;
+}
+
+.progress::-moz-progress-bar {
+  background-color: currentColor;
+}
+
+
+/* Basscss Defaults */
+
+/*
+
+   COLOR VARIABLES
+
+   - Cool
+   - Warm
+   - Gray Scale
+
+*/