Merge pull request #17 from adidas/bugfix/buttons-style

Fix buttons style and breadcrumb items

CHANGELOG.md

@@ -1,3 +1,24 @@
+## 1.5.4
+
+- Fixed breadcrumb margin between items.
+- Fixed buttons style.
+
+### [ breadcrumbs ]
+
+- Removed margin left of list items.
+
+### [ buttons ]
+
+- Changed background color of active primary button to default one.
+- Fixed `btn-link` disabled style when hover.
+- Fixed `btn-tertiary` hover effect.
+- Fixed `btn-tertiary--dark` active color.
+- Renamed `btn-tertiary-dark` to `btn-tertiary--dark`.
+
+### [ example ]
+
+- Updated buttons page adding the three button states: _active_, _default_, _disabled_.
+
 ## 1.5.3
 
 - Fixed list group classes.

example/components/buttons/button-group.vue

@@ -1,12 +1,15 @@
 <template>
   <div class="button-group" :class="{ 'button-group--dark': dark }">
-    <h5 :class=" { 'color--primary-white': dark }">
+    <h6 :class=" { 'color--primary-white': dark }">
       {{ $tc('common.button') }}
       {{ $t(`common.colors.${ name }`) }}
-    </h5>
-    <button :class="`btn ${ _classes }`">
+    </h6>
+    <button :class="`btn ${ _classes } active`">
       {{ $t('common.state.active') }}
     </button>
+    <button :class="`btn ${ _classes }`">
+      {{ $t('common.state.default') }}
+    </button>
     <button :class="`btn ${ _classes } disabled`">
       {{ $t('common.state.inactive') }}
     </button>

example/pages/components/buttons.vue

@@ -52,30 +52,56 @@
             <h4 class="col-xs-12">
               {{ $t('views.components-buttons.sections.icons.name') }}
             </h4>
-            <div class="col-xs-6 col-sm-3">
+            <div class="col-xs-12 col-sm-6">
               <p>{{ $t('views.components-buttons.sections.icons.primary') }}</p>
+              <button class="btn btn-primary active">
+                <span class="yarn-icon yarn-icon--apparel"></span>
+              </button>
               <button class="btn btn-primary">
                 <span class="yarn-icon yarn-icon--apparel"></span>
               </button>
+              <button class="btn btn-primary disabled">
+                <span class="yarn-icon yarn-icon--apparel"></span>
+              </button>
             </div>
-            <div class="col-xs-6 col-sm-3">
+            <div class="col-xs-12 col-sm-6">
               <p>{{ $t('views.components-buttons.sections.icons.primary-text-icon') }}</p>
+              <button class="btn btn-primary active">
+                <span class="yarn-icon yarn-icon--products"></span>
+                <span>{{ $t('meta.brand') }}</span>
+              </button>
               <button class="btn btn-primary">
                 <span class="yarn-icon yarn-icon--products"></span>
                 <span>{{ $t('meta.brand') }}</span>
               </button>
+              <button class="btn btn-primary disabled">
+                <span class="yarn-icon yarn-icon--products"></span>
+                <span>{{ $t('meta.brand') }}</span>
+              </button>
             </div>
-            <div class="col-xs-6 col-sm-3">
+            <div class="col-xs-12 col-sm-6">
               <p>{{ $t('views.components-buttons.sections.icons.link') }}</p>
+              <button class="btn btn-link active">
+                <span class="yarn-icon yarn-icon--mirror-model"></span>
+              </button>
               <button class="btn btn-link">
                 <span class="yarn-icon yarn-icon--mirror-model"></span>
               </button>
+              <button class="btn btn-link disabled">
+                <span class="yarn-icon yarn-icon--mirror-model"></span>
+              </button>
             </div>
-            <div class="col-xs-6 col-sm-3">
+            <div class="col-xs-12 col-sm-6">
               <p>{{ $t('views.components-buttons.sections.icons.secondary') }}</p>
+              <button class="btn btn-secondary active">
+                <span class="yarn-icon yarn-icon--edit"></span>
+              </button>
               <button class="btn btn-secondary">
                 <span class="yarn-icon yarn-icon--edit"></span>
               </button>
+              <button class="btn btn-secondary disabled">
+                <span class="yarn-icon yarn-icon--edit"></span>
+              </button>
             </div>
           </div>
         </section>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adidas/yarn-design-system",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "description": "adidas YARN Design System: toolkit for developing with HTML and CSS",
   "repository": {
     "type": "git",

src/less/components/breadcrumbs.less

@@ -14,6 +14,7 @@
   .list-group--horizontal {
     .list-group-item {
       padding: 0;
+      margin-left: 0;
       .pull-left();
 
       &--short {

src/less/components/buttons.less

@@ -65,14 +65,17 @@
     .button-generator(@primary-darkgray; transparent; @primary-gray; @blue-100);
 
     &-dark {
-      .button-generator(@primary-gray; transparent; @primary-darkgray; @blue-100);
+      .button-generator(@primary-gray; transparent; @primary-darkgray; @primary-white);
     }
   }
 
   // Link buttons
   // -------------------------
   // Make a button look and behave like a link
   &-link {
+    .button-generator(@primary-darkgray; transparent; @primary-gray; @blue-100);
+    .disable-button-box-shadow();
+
     &:focus {
       text-decoration: @link-hover-decoration;
     }

src/less/mixins/buttons.less

@@ -26,26 +26,16 @@
 
   &:active,
   &.active {
+    background-color: @background-color;
     color: @active-color;
+    box-shadow: @shadow-outset;
     cursor: default;
   }
 
   &:hover {
     @media @pointer-query {
+      background-color: @background-color;
       color: @active-color;
-    }
-  }
-}
-
-.button-generator(@color; @background-color; @disable-color: @color; @active-color: @color;)
-when not (@background-color = transparent) {
-  &:active,
-  &.active {
-    box-shadow: @shadow-outset;
-  }
-
-  &:hover {
-    @media @pointer-query {
       box-shadow: @shadow-outset;
     }
   }
@@ -64,3 +54,16 @@ when (@background-color = transparent) {
     }
   }
 }
+
+.disable-button-box-shadow() {
+  &:active,
+  &.active {
+    box-shadow: none;
+  }
+
+  &:hover {
+    @media @pointer-query {
+      box-shadow: none;
+    }
+  }
+}