dibk-design 0.4.41 → 0.4.44

package/README.md

@@ -1,3 +1,3 @@
-# DIBK design
-
-Shared components for DIBK applications
+# DIBK design
+
+Shared components for DIBK applications

package/dist/components/Accordion.md

@@ -1,15 +1,15 @@
-Accordions example:
-
-
-```js
-<Accordion color="default" title="Accordion title">Accordion with default color</Accordion>
-<Accordion color="primary" title="Accordion title">Accordion with primary color</Accordion>
-<Accordion color="success" title="Accordion title">Accordion with success color</Accordion>
-<Accordion color="warning" title="Accordion title">Accordion with warning color</Accordion>
-<Accordion color="info" title="Accordion title">Accordion with info color</Accordion>
-<Accordion color="lightCyan" title="Accordion title">Accordion with light cyan color</Accordion>
-<Accordion color="orange" title="Accordion title">Accordion with orange color</Accordion>
-<Accordion color="lightOrange" title="Accordion title">Accordion with light orange color</Accordion>
-<Accordion color="lime" title="Accordion title" titleSize="large">Accordion with lime color</Accordion>
-<Accordion color="lightLime" title="Accordion title">Accordion with light lime color</Accordion>
-```
+Accordions example:
+
+
+```js
+<Accordion color="default" title="Accordion title">Accordion with default color</Accordion>
+<Accordion color="primary" title="Accordion title">Accordion with primary color</Accordion>
+<Accordion color="success" title="Accordion title">Accordion with success color</Accordion>
+<Accordion color="warning" title="Accordion title">Accordion with warning color</Accordion>
+<Accordion color="info" title="Accordion title">Accordion with info color</Accordion>
+<Accordion color="lightCyan" title="Accordion title">Accordion with light cyan color</Accordion>
+<Accordion color="orange" title="Accordion title">Accordion with orange color</Accordion>
+<Accordion color="lightOrange" title="Accordion title">Accordion with light orange color</Accordion>
+<Accordion color="lime" title="Accordion title" titleSize="large">Accordion with lime color</Accordion>
+<Accordion color="lightLime" title="Accordion title">Accordion with light lime color</Accordion>
+```

package/dist/components/Accordion.module.scss

@@ -1,181 +1,205 @@
-@import "../style/global.scss";
-
-@keyframes show {
-    0% {
-        opacity: 0;
-        margin-top: 0px;
-        padding: 0 30px 0;
-        line-height: 0;
-        max-height: 0;
-    }
-    100% {
-        opacity: 1;
-        margin-top: 0px;
-        padding: 8px 30px 15px;
-        line-height: inherit;
-        max-height: 1000px;
-    }
-}
-
-@keyframes hide {
-    100% {
-        opacity: 0;
-        margin-top: 0px;
-        padding: 0 30px 0;
-        line-height: 0;
-        max-height: 0;
-    }
-    0% {
-        opacity: 1;
-        margin-top: 0px;
-        padding: 8px 30px 15px;
-        line-height: inherit;
-        max-height: 1000px;
-    }
-}
-
-:local(.accordion) {
-    font-family: $default-font;
-    text-decoration: none;
-    width: 100%;
-    display: block;
-    &:local(.default) {
-        background-color: $color-default;
-        :local(.panel) span,
-        :local(.content) {
-            color: #000;
-        }
-    }
-    &:local(.primary) {
-        background-color: $color-primary;
-        color: #fff;
-        :local(.panel) span,
-        :local(.content) {
-            color: #fff;
-        }
-    }
-    &:local(.success) {
-        background-color: $color-success;
-        color: #fff;
-        :local(.panel) span,
-        :local(.content) {
-            color: #fff;
-        }
-    }
-    &:local(.warning) {
-        background-color: $color-warning;
-        color: #fff;
-        :local(.panel) span,
-        :local(.content) {
-            color: #fff;
-        }
-    }
-
-    &:local(.info) {
-        background-color: $color-info;
-        :local(.panel) span,
-        :local(.content) {
-            color: #000;
-        }
-    }
-    &:local(.lightCyan) {
-        background-color: $color-light-cyan;
-        :local(.panel) span,
-        :local(.content) {
-            color: #000;
-        }
-    }
-    &:local(.orange) {
-        background-color: $color-orange;
-        color: #fff;
-        :local(.panel) span,
-        :local(.content) {
-            color: #fff;
-        }
-    }
-    &:local(.lightOrange) {
-        background-color: $color-light-orange;
-        :local(.panel) span,
-        :local(.content) {
-            color: #000;
-        }
-    }
-    &:local(.lime) {
-        background-color: $color-lime;
-        color: #fff;
-        :local(.panel) span,
-        :local(.content) {
-            color: #fff;
-        }
-    }
-    &:local(.lightLime) {
-        background-color: $color-light-lime;
-        :local(.panel) span,
-        :local(.content) {
-            color: #000;
-        }
-    }
-
-    :local(.panel) {
-        padding: 15px 30px;
-        display: flex;
-        align-items: center;
-        position: relative;
-        text-decoration: none;
-        overflow-wrap: break-word;
-        line-height: 1.7;
-        cursor: pointer;
-        :local(.panelText) {
-            font-family: $heading-font;
-            font-weight: bold;
-            font-size: 18px;
-            flex: 1;
-        }
-        :local(.panelChevron) {
-            box-sizing: border-box;
-            position: relative;
-            display: block;
-            width: 18px;
-            height: 18px;
-            border-radius: 100px;
-
-            &::after {
-                content: "";
-                display: block;
-                box-sizing: border-box;
-                position: absolute;
-                width: 18px;
-                height: 18px;
-                border-bottom: 2px solid;
-                border-right: 2px solid;
-                transform: translateY(-30%) rotate(45deg);
-                transition: transform 0.3s ease-in-out;
-            }
-            &:local(.expanded) {
-                &::after {
-                    transform: translateY(30%) rotate(225deg);
-                }
-            }
-        }
-    }
-    :local(.content) {
-        opacity: 0;
-        margin-top: 0px;
-        line-height: 0;
-        max-height: 0;
-        overflow: hidden;
-        padding: 0 30px 0;
-        &:local(.initialized) {
-            animation: hide 0.3s ease-in-out;
-        }
-
-        &:local(.expanded) {
-            animation: show 0.3s ease-in-out;
-            opacity: 1;
-            margin-top: 0px;
-            padding: 8px 30px 15px;
-            line-height: inherit;
-            max-height: 10000px;
-        }
-    }
-}
+@import "../style/global.scss";
+
+@keyframes show {
+    0% {
+        opacity: 0;
+        margin-top: 0px;
+        padding: 0 15px 0;
+        line-height: 0;
+        max-height: 0;
+        @media only screen and (min-width: $screen-sm) {
+            padding: 0 30px 0;
+        }
+    }
+    100% {
+        opacity: 1;
+        margin-top: 0px;
+        padding: 8px 15px 15px;
+        line-height: inherit;
+        max-height: 1000px;
+        @media only screen and (min-width: $screen-sm) {
+            padding: 8px 30px 15px;
+        }
+    }
+}
+
+@keyframes hide {
+    100% {
+        opacity: 0;
+        margin-top: 0px;
+        padding: 0 15px 0;
+        line-height: 0;
+        max-height: 0;
+        @media only screen and (min-width: $screen-sm) {
+            padding: 0 30px 0;
+        }
+    }
+    0% {
+        opacity: 1;
+        margin-top: 0px;
+        padding: 8px 15px 15px;
+        line-height: inherit;
+        max-height: 1000px;
+        @media only screen and (min-width: $screen-sm) {
+            padding: 8px 30px 15px;
+        }
+    }
+}
+
+:local(.accordion) {
+    font-family: $default-font;
+    text-decoration: none;
+    width: 100%;
+    display: block;
+    &:local(.default) {
+        background-color: $color-default;
+        :local(.panel) span,
+        :local(.content) {
+            color: #000;
+        }
+    }
+    &:local(.primary) {
+        background-color: $color-primary;
+        color: #fff;
+        :local(.panel) span,
+        :local(.content) {
+            color: #fff;
+        }
+    }
+    &:local(.success) {
+        background-color: $color-success;
+        color: #fff;
+        :local(.panel) span,
+        :local(.content) {
+            color: #fff;
+        }
+    }
+    &:local(.warning) {
+        background-color: $color-warning;
+        color: #fff;
+        :local(.panel) span,
+        :local(.content) {
+            color: #fff;
+        }
+    }
+
+    &:local(.info) {
+        background-color: $color-info;
+        :local(.panel) span,
+        :local(.content) {
+            color: #000;
+        }
+    }
+    &:local(.lightCyan) {
+        background-color: $color-light-cyan;
+        :local(.panel) span,
+        :local(.content) {
+            color: #000;
+        }
+    }
+    &:local(.orange) {
+        background-color: $color-orange;
+        color: #fff;
+        :local(.panel) span,
+        :local(.content) {
+            color: #fff;
+        }
+    }
+    &:local(.lightOrange) {
+        background-color: $color-light-orange;
+        :local(.panel) span,
+        :local(.content) {
+            color: #000;
+        }
+    }
+    &:local(.lime) {
+        background-color: $color-lime;
+        color: #fff;
+        :local(.panel) span,
+        :local(.content) {
+            color: #fff;
+        }
+    }
+    &:local(.lightLime) {
+        background-color: $color-light-lime;
+        :local(.panel) span,
+        :local(.content) {
+            color: #000;
+        }
+    }
+
+    :local(.panel) {
+        padding: 15px 15px;
+        display: flex;
+        align-items: center;
+        position: relative;
+        text-decoration: none;
+        overflow-wrap: break-word;
+        line-height: 1.7;
+        cursor: pointer;
+        @media only screen and (min-width: $screen-sm) {
+            padding: 15px 30px;
+        }
+        :local(.panelText) {
+            font-family: $heading-font;
+            font-weight: bold;
+            font-size: 18px;
+            flex: 1;
+        }
+        :local(.panelChevron) {
+            box-sizing: border-box;
+            position: relative;
+            display: block;
+            width: 18px;
+            height: 18px;
+            border-radius: 100px;
+            margin-right: 6px;
+            @media only screen and (min-width: $screen-sm) {
+                margin-right: 0;
+            }
+            &::after {
+                content: "";
+                display: block;
+                box-sizing: border-box;
+                position: absolute;
+                width: 18px;
+                height: 18px;
+                border-bottom: 2px solid;
+                border-right: 2px solid;
+                transform: translateY(-30%) rotate(45deg);
+                transition: transform 0.3s ease-in-out;
+            }
+            &:local(.expanded) {
+                &::after {
+                    transform: translateY(30%) rotate(225deg);
+                }
+            }
+        }
+    }
+    :local(.content) {
+        opacity: 0;
+        margin-top: 0px;
+        line-height: 0;
+        max-height: 0;
+        overflow: hidden;
+        padding: 0 15px 0;
+        @media only screen and (min-width: $screen-sm) {
+            padding: 0 30px 0;
+        }
+        &:local(.initialized) {
+            animation: hide 0.3s ease-in-out;
+        }
+
+        &:local(.expanded) {
+            animation: show 0.3s ease-in-out;
+            opacity: 1;
+            margin-top: 0px;
+            padding: 8px 15px 15px;
+            line-height: inherit;
+            max-height: 10000px;
+            @media only screen and (min-width: $screen-sm) {
+                padding: 8px 30px 15px;
+            }
+        }
+    }
+}

package/dist/components/Button.md

@@ -1,75 +1,75 @@
-Regular buttons example:
-
-```js
-<Button content="Click me" color="default" />
-<Button content="Click me" color="primary" />
-<Button content="Click me" color="default" disabled />
-<Button content="Click me" color="primary" disabled />
-```
-
-Rounded buttons example:
-
-```js
-<Button rounded content="Click me" color="default" />
-<Button rounded content="Click me" color="primary" />
-<Button rounded content="Click me" color="default" disabled />
-<Button rounded content="Click me" color="primary" disabled />
-```
-
-Regular buttons with arrow example:
-
-```js
-<Button rounded content="Click me" color="default" arrow="left" />
-<Button content="Click me" color="primary" arrow="right" />
-<Button content="Click me" color="default" arrow="left" disabled />
-<Button content="Click me" color="primary" arrow="right" disabled />
-```
-
-Regular buttons without hover effect example:
-
-```js
-<Button content="Click me" color="default" noHover />
-<Button content="Click me" color="primary" noHover />
-<Button content="Click me" color="default" noHover disabled />
-<Button content="Click me" color="primary" noHover disabled />
-```
-
-Small buttons example:
-
-```js
-<Button content="Click me" color="default" size="small" />
-<Button content="Click me" color="primary" size="small" />
-<Button content="Click me" color="default" size="small" disabled />
-<Button content="Click me" color="primary" size="small" disabled />
-```
-
-Small rounded buttons example:
-
-```js
-<Button rounded content="Click me" color="default" size="small" />
-<Button rounded content="Click me" color="primary" size="small" />
-<Button rounded content="Click me" color="default" size="small" disabled />
-<Button rounded content="Click me" color="primary" size="small" disabled />
-```
-
-
-Small buttons with arrow example:
-
-```js
-<Button content="Click me" color="default" size="small" arrow="left" />
-<Button content="Click me" color="primary" size="small" arrow="right" />
-<Button content="Click me" color="default" size="small" arrow="left" disabled />
-<Button content="Click me" color="primary" size="small" arrow="right" disabled />
-```
-
-Themed buttons:
-
-```js
-import customTheme from 'data/customTheme';
-<React.Fragment>
-<Button content="Click me" color="default" size="small" theme={customTheme} />
-<Button content="Click me" color="primary" size="small" theme={customTheme} />
-<Button content="Click me" color="default" size="small" theme={customTheme} disabled />
-<Button content="Click me" color="primary" size="small" theme={customTheme} disabled />
-</React.Fragment>
-```
+Regular buttons example:
+
+```js
+<Button content="Click me" color="default" />
+<Button content="Click me" color="primary" />
+<Button content="Click me" color="default" disabled />
+<Button content="Click me" color="primary" disabled />
+```
+
+Rounded buttons example:
+
+```js
+<Button rounded content="Click me" color="default" />
+<Button rounded content="Click me" color="primary" />
+<Button rounded content="Click me" color="default" disabled />
+<Button rounded content="Click me" color="primary" disabled />
+```
+
+Regular buttons with arrow example:
+
+```js
+<Button rounded content="Click me" color="default" arrow="left" />
+<Button content="Click me" color="primary" arrow="right" />
+<Button content="Click me" color="default" arrow="left" disabled />
+<Button content="Click me" color="primary" arrow="right" disabled />
+```
+
+Regular buttons without hover effect example:
+
+```js
+<Button content="Click me" color="default" noHover />
+<Button content="Click me" color="primary" noHover />
+<Button content="Click me" color="default" noHover disabled />
+<Button content="Click me" color="primary" noHover disabled />
+```
+
+Small buttons example:
+
+```js
+<Button content="Click me" color="default" size="small" />
+<Button content="Click me" color="primary" size="small" />
+<Button content="Click me" color="default" size="small" disabled />
+<Button content="Click me" color="primary" size="small" disabled />
+```
+
+Small rounded buttons example:
+
+```js
+<Button rounded content="Click me" color="default" size="small" />
+<Button rounded content="Click me" color="primary" size="small" />
+<Button rounded content="Click me" color="default" size="small" disabled />
+<Button rounded content="Click me" color="primary" size="small" disabled />
+```
+
+
+Small buttons with arrow example:
+
+```js
+<Button content="Click me" color="default" size="small" arrow="left" />
+<Button content="Click me" color="primary" size="small" arrow="right" />
+<Button content="Click me" color="default" size="small" arrow="left" disabled />
+<Button content="Click me" color="primary" size="small" arrow="right" disabled />
+```
+
+Themed buttons:
+
+```js
+import customTheme from 'data/customTheme';
+<React.Fragment>
+<Button content="Click me" color="default" size="small" theme={customTheme} />
+<Button content="Click me" color="primary" size="small" theme={customTheme} />
+<Button content="Click me" color="default" size="small" theme={customTheme} disabled />
+<Button content="Click me" color="primary" size="small" theme={customTheme} disabled />
+</React.Fragment>
+```