buttons v7

changelog.md

@@ -1,6 +1,7 @@
 # changelog v7.0.0beta (31 juillet 2017)
 - architecture globale revisitée (vendor, config, library, components)
 - normalize.css v7.0.0
+- refonte complète des boutons, avec possibilités de variantes (primary, success, warning, etc.)
 - autogrid object en Grid Layout
 - regroupement des styles des tableaux
 - suppression du namespace "kna-", ne devrait pas être problématique dès lors que Grillade sera devenu inutile dans KNACSS

sass/_config/_variables.scss

@@ -26,20 +26,29 @@ $font-stack-headings  : sans-serif !default; // headings font
 $font-stack-monospace : consolas, courier, monospace !default; // monospace font
 
 // color scheme
-$color1    : #000 !default;
-$color2    : #fff !default;
-$color3    : #333 !default;
-$color4    : #000 !default;
-$color5    : #6FA939 !default;
+$color1    : #000;
+$color2    : #fff;
+$color3    : #333;
+$color4    : #000;
+$color5    : #6FA939;
+$color6    : #ddd;
+$color-light    : #fff;
+$color-dark    : #000;
+$color-primary  : #0275D8;
+$color-success  : #5CB85C;
+$color-info     : #5BC0DE;
+$color-warning  : #F0AD4E;
+$color-danger   : #292B2C;
+$color-inverse  : #292B2C;
+$color-muted    : #F7F7F7;
 
 // colors used in project
 $color-base      : $color1;
-$color-link      : $color3;
 $background-base : $color2;
 
-// If you don't want any effect on focused/hovered links,
-// comment variable below or make it equal to either $color-link or false or null
+$color-link      : $color3;
 $color-link-hover: $color4;
+
 $brand-primary: $color5;
 
 
@@ -59,6 +68,3 @@ $ultra-large-plus-value : 20rem !default; // ultra large value for margins / pad
 
 // grid gutters (for .has-gutter-* classes)
 $grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem );
-
-//kna-namespace (default : null)
-$kna-namespace: null !default;

sass/components/alerts.scss

@@ -0,0 +1,3 @@
+/* ----------------------------- */
+/* ==Alerts                      */
+/* ----------------------------- */

sass/components/badges.scss

@@ -0,0 +1,3 @@
+/* ----------------------------- */
+/* ==Badges                      */
+/* ----------------------------- */

sass/components/buttons.scss

@@ -0,0 +1,117 @@
+/* ----------------------------- */
+/* ==Buttons                     */
+/* ----------------------------- */
+/* preferably use <button> for buttons !*/
+/* use .btn-- or .button-- classes for variants */
+
+%btn {
+  display: inline-block;
+  padding: $tiny-value $small-value;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1;
+  vertical-align: middle;
+  white-space: nowrap;
+  color: $color-base;
+  background-color: $color-muted;
+  text-align: center;
+  text-decoration: none;
+  border: none;
+  cursor: pointer;
+  transition: 0.25s;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  transition-property: box-shadow, background-color, color, border;
+}
+
+.btn,
+.button,
+[type="button"],
+button {
+  @extend %btn;
+
+  &:focus {
+    -webkit-tap-highlight-color: transparent;
+  }
+}
+// button color variants
+$buttons: (
+        primary: $color-primary,
+        success: $color-success,
+        info: $color-info,
+        warning: $color-warning,
+        danger: $color-danger,
+        inverse: $color-inverse
+        );
+
+.btn,
+.button {
+  @each $variant, $color in $buttons {
+    &--#{$variant} {
+      @extend %btn;
+      background-color: $color;
+      color: $color-light;
+
+      &:active,
+      &:focus,
+      &:hover {
+        background-color: darken( $color, 10% );
+      }
+    }
+  }
+}
+// button state variants
+.btn,
+.button {
+  &--small {
+    font-size: $base-font-size - 0.4rem;
+  }
+
+  &--big {
+    font-size: $base-font-size + 0.4rem;
+  }
+
+  &--block {
+    width: 100% !important;
+    display: block;
+  }
+}
+/* disabled buttons */
+.btn,
+.button,
+[type="button"],
+[type="reset"],
+[type="submit"],
+button {
+  &.disabled,
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+/* unstyled buttons */
+.btn,
+.button,
+[type="button"],
+[type="reset"],
+[type="submit"],
+button {
+  &.unstyled {
+    padding: 0;
+    border: none;
+    text-align: left;
+    background: none;
+    border-radius: 0;
+    box-shadow: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+
+    &:focus {
+      box-shadow: none;
+      outline: none;
+    }
+  }
+}

sass/components/forms.scss

@@ -6,10 +6,6 @@
 * github.com/nathansmith/formalize and www.sitepen.com
 */
 
-/* buttons */
-.btn {
-  display: inline-block;
-}
 
 /* forms items */
 form,
@@ -18,15 +14,12 @@ fieldset {
 }
 
 input,
-button,
 select,
-label,
-.btn {
+label {
   font-family: inherit;
   font-size: inherit;
 }
 
-button,
 input,
 optgroup,
 select,
@@ -77,40 +70,3 @@ input:-moz-placeholder,
 textarea:-moz-placeholder {
   color: #777;
 }
-
-.btn,
-input[type="button"],
-button {
-  &:focus {
-    -webkit-tap-highlight-color: transparent;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
-  }
-}
-
-/* unstyled forms */
-
-button,
-input[type="button"],
-input[type="submit"],
-input[type="reset"] {
-  &.unstyled {
-    padding: 0;
-    border: none;
-    line-height: 1;
-    text-align: left;
-    background: none;
-    border-radius: 0;
-    box-shadow: none;
-    -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none;
-
-    &:focus {
-      box-shadow: none;
-      outline: none;
-    }
-  }
-}