dibk-design 0.4.45 → 0.4.48

package/dist/components/Button.module.scss

@@ -1,232 +1,232 @@
-@import "../style/global.scss";
-@include keyframes(pushnext) {
-  0% {
-    @include transform(rotate(45deg) translate3d(0, 0, 0));
-  }
-
-  50% {
-    @include transform(rotate(45deg) translate3d(2px, -2px, 0));
-  }
-
-  100% {
-    @include transform(rotate(45deg) translate3d(0, 0, 0));
-  }
-}
-@include keyframes(pushprev) {
-  0% {
-    @include transform(rotate(-135deg) translate3d(0, 0, 0));
-  }
-
-  50% {
-    @include transform(rotate(-135deg) translate3d(-2px, 2px, 0));
-  }
-
-  100% {
-    @include transform(rotate(-135deg) translate3d(0, 0, 0));
-  }
-}
-
-:local(.button) {
-  @include appearance(none);
-  @include border-radius(0);
-  @include transition(
-    filter 300ms ease-out,
-    background-color 300ms ease-out,
-    color 300ms ease-out,
-    border-color 300ms ease-out
-  );
-  font-family: "Altis", sans-serif;
-  border-style: solid;
-  border-width: 1px;
-  $border-color: $color-primary;
-  cursor: pointer;
-  line-height: 1;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  margin-right: 5px;
-  margin-bottom: 5px;
-  font-size: 17px;
-  font-weight: 500;
-  @media only screen and (min-width: $screen-sm) {
-    font-size: 20px;
-  }
-
-  &:local(.hasTheme) {
-    &:hover,
-    &:focus {
-      filter: brightness(90%);
-    }
-
-    &:active {
-      filter: brightness(85%);
-    }
-  }
-
-  &:local(.regular) {
-    padding: 14px 24px;
-    @media only screen and (min-width: $screen-sm) {
-      padding: 17px 32px;
-    }
-  }
-
-  &:local(.small) {
-    padding: 6px 24px;
-    min-width: 80px;
-    line-height: 18px;
-    @media only screen and (min-width: $screen-sm) {
-      line-height: 21px;
-      padding: 6px 32px;
-    }
-  }
-
-  &:local(.default) {
-    background-color: #fff;
-    color: $color-primary;
-    &:not(:local(.hasTheme)) {
-      &:hover:not(:local(.noHover)),
-      &:active {
-        background-color: $color-primary;
-        color: #fff;
-        &:after,
-        &:before {
-          border-color: #fff;
-        }
-      }
-    }
-  }
-
-  &:local(.primary) {
-    background-color: $color-primary;
-    color: #fff;
-    &:not(:local(.hasTheme)) {
-      &:hover:not(:local(.noHover)),
-      &:active {
-        background-color: #fff;
-        color: $color-primary;
-        &:after,
-        &:before {
-          border-color: $color-primary;
-        }
-      }
-    }
-  }
-
-  &:disabled {
-    &:local(.hasTheme),
-    &:not(:local(.hasTheme)) {
-      &:local(.default) {
-        background-color: #fff;
-        cursor: default;
-        opacity: 0.6;
-        color: #afaba8;
-        border: 1px solid #e5e3e1;
-        &:hover,
-        &:focus,
-        &:active {
-          background-color: #fff;
-          cursor: default;
-          opacity: 0.6;
-          color: #afaba8;
-          border: 1px solid #e5e3e1;
-          &:before,
-          &:after {
-            border-color: #afaba8;
-          }
-        }
-        &:before,
-        &:after {
-          border-color: #afaba8;
-        }
-      }
-      &:local(.primary) {
-        background-color: $color-primary;
-        cursor: default;
-        opacity: 0.6;
-        color: #fff;
-        border: 1px solid $color-primary;
-        &:hover,
-        &:focus,
-        &:active {
-          background-color: $color-primary;
-          cursor: default;
-          opacity: 0.6;
-          color: #fff;
-          border: 1px solid $color-primary;
-          &:before,
-          &:after {
-            border-color: $color-primary;
-          }
-        }
-        &:before,
-        &:after {
-          border-color: $color-primary;
-        }
-      }
-    }
-  }
-
-  &:local(.rounded) {
-    border-radius: 20px;
-  }
-
-  &:local(.hasArrowLeft) {
-    &:before {
-      @include transform(rotate(-135deg));
-      @include calc("top", "50% - 0.4rem");
-      content: " ";
-      display: inline-block;
-      position: absolute;
-      right: auto;
-      left: 0.55em;
-      width: 0.5rem;
-      height: 0.5rem;
-      vertical-align: middle;
-      border: 2px solid white;
-      border-width: 2px 2px 0 0;
-      margin-right: 1em;
-      @media only screen and (min-width: $screen-sm) {
-        left: 1em;
-      }
-    }
-
-    &:hover {
-      &:before {
-        @include animation(pushprev 0.8s linear infinite);
-      }
-    }
-    &:local(.default) {
-      &:before {
-        border-color: $color-primary;
-      }
-    }
-  }
-
-  &:local(.hasArrowRight) {
-    &:after {
-      @include transform(rotate(45deg));
-      @include calc("top", "50% - 0.4rem");
-      content: " ";
-      display: inline-block;
-      position: absolute;
-      left: auto;
-      right: 0.55em;
-      width: 0.5rem;
-      height: 0.5rem;
-      vertical-align: middle;
-      border: 2px solid white;
-      border-width: 2px 2px 0 0;
-      margin-left: 1em;
-      @media only screen and (min-width: $screen-sm) {
-        right: 1em;
-      }
-    }
-
-    &:hover {
-      &:after {
-        @include animation(pushnext 0.8s linear infinite);
-      }
-    }
-  }
-}
+@import "../style/global.scss";
+@include keyframes(pushnext) {
+  0% {
+    @include transform(rotate(45deg) translate3d(0, 0, 0));
+  }
+
+  50% {
+    @include transform(rotate(45deg) translate3d(2px, -2px, 0));
+  }
+
+  100% {
+    @include transform(rotate(45deg) translate3d(0, 0, 0));
+  }
+}
+@include keyframes(pushprev) {
+  0% {
+    @include transform(rotate(-135deg) translate3d(0, 0, 0));
+  }
+
+  50% {
+    @include transform(rotate(-135deg) translate3d(-2px, 2px, 0));
+  }
+
+  100% {
+    @include transform(rotate(-135deg) translate3d(0, 0, 0));
+  }
+}
+
+:local(.button) {
+  @include appearance(none);
+  @include border-radius(0);
+  @include transition(
+    filter 300ms ease-out,
+    background-color 300ms ease-out,
+    color 300ms ease-out,
+    border-color 300ms ease-out
+  );
+  font-family: "Altis", sans-serif;
+  border-style: solid;
+  border-width: 1px;
+  $border-color: $color-primary;
+  cursor: pointer;
+  line-height: 1;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  margin-right: 5px;
+  margin-bottom: 5px;
+  font-size: 17px;
+  font-weight: 500;
+  @media only screen and (min-width: $screen-sm) {
+    font-size: 20px;
+  }
+
+  &:local(.hasTheme) {
+    &:hover,
+    &:focus {
+      filter: brightness(90%);
+    }
+
+    &:active {
+      filter: brightness(85%);
+    }
+  }
+
+  &:local(.regular) {
+    padding: 14px 24px;
+    @media only screen and (min-width: $screen-sm) {
+      padding: 17px 32px;
+    }
+  }
+
+  &:local(.small) {
+    padding: 6px 24px;
+    min-width: 80px;
+    line-height: 18px;
+    @media only screen and (min-width: $screen-sm) {
+      line-height: 21px;
+      padding: 6px 32px;
+    }
+  }
+
+  &:local(.default) {
+    background-color: #fff;
+    color: $color-primary;
+    &:not(:local(.hasTheme)) {
+      &:hover:not(:local(.noHover)),
+      &:active {
+        background-color: $color-primary;
+        color: #fff;
+        &:after,
+        &:before {
+          border-color: #fff;
+        }
+      }
+    }
+  }
+
+  &:local(.primary) {
+    background-color: $color-primary;
+    color: #fff;
+    &:not(:local(.hasTheme)) {
+      &:hover:not(:local(.noHover)),
+      &:active {
+        background-color: #fff;
+        color: $color-primary;
+        &:after,
+        &:before {
+          border-color: $color-primary;
+        }
+      }
+    }
+  }
+
+  &:disabled {
+    &:local(.hasTheme),
+    &:not(:local(.hasTheme)) {
+      &:local(.default) {
+        background-color: #fff;
+        cursor: default;
+        opacity: 0.6;
+        color: #afaba8;
+        border: 1px solid #e5e3e1;
+        &:hover,
+        &:focus,
+        &:active {
+          background-color: #fff;
+          cursor: default;
+          opacity: 0.6;
+          color: #afaba8;
+          border: 1px solid #e5e3e1;
+          &:before,
+          &:after {
+            border-color: #afaba8;
+          }
+        }
+        &:before,
+        &:after {
+          border-color: #afaba8;
+        }
+      }
+      &:local(.primary) {
+        background-color: $color-primary;
+        cursor: default;
+        opacity: 0.6;
+        color: #fff;
+        border: 1px solid $color-primary;
+        &:hover,
+        &:focus,
+        &:active {
+          background-color: $color-primary;
+          cursor: default;
+          opacity: 0.6;
+          color: #fff;
+          border: 1px solid $color-primary;
+          &:before,
+          &:after {
+            border-color: $color-primary;
+          }
+        }
+        &:before,
+        &:after {
+          border-color: $color-primary;
+        }
+      }
+    }
+  }
+
+  &:local(.rounded) {
+    border-radius: 20px;
+  }
+
+  &:local(.hasArrowLeft) {
+    &:before {
+      @include transform(rotate(-135deg));
+      @include calc("top", "50% - 0.4rem");
+      content: " ";
+      display: inline-block;
+      position: absolute;
+      right: auto;
+      left: 0.55em;
+      width: 0.5rem;
+      height: 0.5rem;
+      vertical-align: middle;
+      border: 2px solid white;
+      border-width: 2px 2px 0 0;
+      margin-right: 1em;
+      @media only screen and (min-width: $screen-sm) {
+        left: 1em;
+      }
+    }
+
+    &:hover {
+      &:before {
+        @include animation(pushprev 0.8s linear infinite);
+      }
+    }
+    &:local(.default) {
+      &:before {
+        border-color: $color-primary;
+      }
+    }
+  }
+
+  &:local(.hasArrowRight) {
+    &:after {
+      @include transform(rotate(45deg));
+      @include calc("top", "50% - 0.4rem");
+      content: " ";
+      display: inline-block;
+      position: absolute;
+      left: auto;
+      right: 0.55em;
+      width: 0.5rem;
+      height: 0.5rem;
+      vertical-align: middle;
+      border: 2px solid white;
+      border-width: 2px 2px 0 0;
+      margin-left: 1em;
+      @media only screen and (min-width: $screen-sm) {
+        right: 1em;
+      }
+    }
+
+    &:hover {
+      &:after {
+        @include animation(pushnext 0.8s linear infinite);
+      }
+    }
+  }
+}

package/dist/components/CheckBoxIcon.md

@@ -1,38 +1,38 @@
-Regular check box icons example:
-
-```js
-<CheckBoxIcon  />
-<CheckBoxIcon checked={true} />
-<CheckBoxIcon checked={true} checkmarkCharacter="✕" />
-<CheckBoxIcon disabled={true} />
-<CheckBoxIcon checked={true} disabled={true} />
-<CheckBoxIcon checked={true} checkmarkCharacter="✕" disabled={true} />
-```
-
-Themed Regular check box icons example:
-
-```js
-import customTheme from 'data/customTheme';
-<React.Fragment>
-<CheckBoxIcon size='43px' />
-<CheckBoxIcon size='43px' checked={true} />
-<CheckBoxIcon size='43px' checked={true} checkmarkCharacter="✕" />
-<CheckBoxIcon size='43px' disabled={true} />
-<CheckBoxIcon size='43px' checked={true} disabled={true} />
-<CheckBoxIcon size='43px' checked={true} checkmarkCharacter="✕" disabled={true} />
-</React.Fragment>
-```
-
-Check box icons with custom size example:
-
-```js
-<CheckBoxIcon size='43px' />
-<CheckBoxIcon size='43px' checked={true} />
-<CheckBoxIcon size='43px' checked={true} checkmarkCharacter="✕" />
-<CheckBoxIcon size='43px' disabled={true} />
-<CheckBoxIcon size='43px' checked={true} disabled={true} />
-<CheckBoxIcon size='43px' checked={true} checkmarkCharacter="✕" disabled={true} />
-```
-
-
-
+Regular check box icons example:
+
+```js
+<CheckBoxIcon  />
+<CheckBoxIcon checked={true} />
+<CheckBoxIcon checked={true} checkmarkCharacter="✕" />
+<CheckBoxIcon disabled={true} />
+<CheckBoxIcon checked={true} disabled={true} />
+<CheckBoxIcon checked={true} checkmarkCharacter="✕" disabled={true} />
+```
+
+Themed Regular check box icons example:
+
+```js
+import customTheme from 'data/customTheme';
+<React.Fragment>
+<CheckBoxIcon size='43px' />
+<CheckBoxIcon size='43px' checked={true} />
+<CheckBoxIcon size='43px' checked={true} checkmarkCharacter="✕" />
+<CheckBoxIcon size='43px' disabled={true} />
+<CheckBoxIcon size='43px' checked={true} disabled={true} />
+<CheckBoxIcon size='43px' checked={true} checkmarkCharacter="✕" disabled={true} />
+</React.Fragment>
+```
+
+Check box icons with custom size example:
+
+```js
+<CheckBoxIcon size='43px' />
+<CheckBoxIcon size='43px' checked={true} />
+<CheckBoxIcon size='43px' checked={true} checkmarkCharacter="✕" />
+<CheckBoxIcon size='43px' disabled={true} />
+<CheckBoxIcon size='43px' checked={true} disabled={true} />
+<CheckBoxIcon size='43px' checked={true} checkmarkCharacter="✕" disabled={true} />
+```
+
+
+

package/dist/components/CheckBoxIcon.module.scss

@@ -1,62 +1,62 @@
-@import "../style/global.scss";
-
-:local(.checkBoxIcon) {
-  @include border-radius(0);
-  @include transition(all 0.1s ease-in-out);
-  @include box-sizing(content-box);
-  display: inline-block;
-  vertical-align: middle;
-  min-width: 10px;
-  width: 10px;
-  height: 10px;
-  min-width: 20px;
-  margin-right: 0.2em;
-  line-height: 1;
-  text-align: center;
-  cursor: pointer;
-
-  &:local(.showBox) {
-    margin-right: 0.4em;
-    margin-top: 2px;
-    background: white;
-    &:not(:local(.hasErrors)) {
-      @include box-shadow(0 0 0 1px #afaba8);
-    }
-    &:local(.hasErrors) {
-      @include box-shadow(0 0 2px 1px #9d2024);
-    }
-  }
-
-  &:local(.checked) {
-    color: $color-primary;
-    &:local(.hasErrors) {
-      span {
-        color: #9d2024;
-      }
-    }
-    &:local(.showBox) {
-      &:not(:local(.hasErrors)) {
-        @include box-shadow(0 0 0 1px #afaba8);
-      }
-      &:local(.hasErrors) {
-        @include box-shadow(0 0 2px 1px #9d2024);
-      }
-    }
-  }
-
-  &:local(.disabled) {
-    opacity: 0.5;
-    background: rgba(0, 0, 0, 0.25);
-    cursor: default;
-  }
-
-  :local(.checkmark) {
-    font-size: 1em;
-    line-height: 0.75em;
-  }
-  :not(:local(.showBox)) {
-    &:local(.checkmark) {
-      line-height: 1.05em;
-    }
-  }
-}
+@import "../style/global.scss";
+
+:local(.checkBoxIcon) {
+  @include border-radius(0);
+  @include transition(all 0.1s ease-in-out);
+  @include box-sizing(content-box);
+  display: inline-block;
+  vertical-align: middle;
+  min-width: 10px;
+  width: 10px;
+  height: 10px;
+  min-width: 20px;
+  margin-right: 0.2em;
+  line-height: 1;
+  text-align: center;
+  cursor: pointer;
+
+  &:local(.showBox) {
+    margin-right: 0.4em;
+    margin-top: 2px;
+    background: white;
+    &:not(:local(.hasErrors)) {
+      @include box-shadow(0 0 0 1px #afaba8);
+    }
+    &:local(.hasErrors) {
+      @include box-shadow(0 0 2px 1px #9d2024);
+    }
+  }
+
+  &:local(.checked) {
+    color: $color-primary;
+    &:local(.hasErrors) {
+      span {
+        color: #9d2024;
+      }
+    }
+    &:local(.showBox) {
+      &:not(:local(.hasErrors)) {
+        @include box-shadow(0 0 0 1px #afaba8);
+      }
+      &:local(.hasErrors) {
+        @include box-shadow(0 0 2px 1px #9d2024);
+      }
+    }
+  }
+
+  &:local(.disabled) {
+    opacity: 0.5;
+    background: rgba(0, 0, 0, 0.25);
+    cursor: default;
+  }
+
+  :local(.checkmark) {
+    font-size: 1em;
+    line-height: 0.75em;
+  }
+  :not(:local(.showBox)) {
+    &:local(.checkmark) {
+      line-height: 1.05em;
+    }
+  }
+}