dibk-design 0.4.39 → 0.4.43

package/dist/components/Accordion.module.scss

@@ -4,16 +4,22 @@
     0% {
         opacity: 0;
         margin-top: 0px;
-        padding: 0 30px 0;
+        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 30px 15px;
+        padding: 8px 15px 15px;
         line-height: inherit;
         max-height: 1000px;
+        @media only screen and (min-width: $screen-sm) {
+            padding: 8px 30px 15px;
+        }
     }
 }
 
@@ -21,16 +27,22 @@
     100% {
         opacity: 0;
         margin-top: 0px;
-        padding: 0 30px 0;
+        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 30px 15px;
+        padding: 8px 15px 15px;
         line-height: inherit;
         max-height: 1000px;
+        @media only screen and (min-width: $screen-sm) {
+            padding: 8px 30px 15px;
+        }
     }
 }
 
@@ -117,7 +129,7 @@
     }
 
     :local(.panel) {
-        padding: 15px 30px;
+        padding: 15px 15px;
         display: flex;
         align-items: center;
         position: relative;
@@ -125,6 +137,9 @@
         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;
@@ -138,7 +153,10 @@
             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;
@@ -164,7 +182,10 @@
         line-height: 0;
         max-height: 0;
         overflow: hidden;
-        padding: 0 30px 0;
+        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;
         }
@@ -173,9 +194,12 @@
             animation: show 0.3s ease-in-out;
             opacity: 1;
             margin-top: 0px;
-            padding: 8px 30px 15px;
+            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.module.scss

@@ -66,9 +66,9 @@
   }
 
   &:local(.small) {
-    padding: 1px 32px;
-    height: 35px;
+    padding: 6px 32px;
     min-width: 80px;
+    line-height: 21px;;
   }
 
   &:local(.default) {

package/dist/components/Dialog.module.scss

@@ -21,7 +21,7 @@
     padding: 8px 28px;
     z-index: 2;
     justify-content: center;
-    @media (min-width: $screen-sm) {
+    @media (min-width: $screen-md) {
         padding: 36px;
     }
 
@@ -40,7 +40,7 @@
         &:not(:local(.noPadding)){
             padding: 60px 40px;
         }
-        @media (min-width: $screen-sm) {
+        @media (min-width: $screen-md) {
             @include calc("width", "100% - 128px");
             max-height: 100%;
         }

package/dist/components/Header.md

@@ -4,6 +4,7 @@ Title examples:
 <Header content="Title with size 1"/>
 <Header content="Title with size 2" size={2}/>
 <Header content="Title with size 3" size={3}/>
+<Header content="Title with size 4" size={4}/>
 <Header content="Big title with size 1" big/>
 <Header content="Title with size 2 and htmlTag h1" size={2} htmlTag="h1"/>
 

package/dist/components/Header.module.scss

@@ -1,44 +1,64 @@
 @import "../style/global.scss";
 
 :local(.headerContainer) {
-	font-size: 22px;
-	padding: 10px 0;
+	padding: 5px 0;
 	:local(.header) {
 		margin: 0;
 		font-weight: normal;
 		line-height: 1.4;
 		font-style: normal;
-		font-size: 18px;
 		&:not(:local(.hasTheme)) {
 			color: $color-primary;
 		}
 		&:local(.size-1) {
 			font-family: "Altis", sans-serif;
-			font-size: 38px;
+			font-size: 32px;
 			font-style: normal;
 			font-weight: 500;
 			line-height: 1.43;
+			@media only screen and (min-width: $screen-sm) {
+				font-size: 38px;
+			}
 			&:local(.bigHeader) {
 				font-family: "Altis-Light", "Open Sans", arial, sans-serif;
-				font-size: 50px;
+				font-size: 40px;
 				line-height: 1.2;
 				overflow: hidden;
 				text-overflow: ellipsis;
+				@media only screen and (min-width: $screen-sm) {
+					font-size: 50px;
+				}
 			}
 		}
 		&:local(.size-2) {
 			font-family: "Altis", sans-serif;
-			font-size: 30px;
+			font-size: 25px;
 			font-style: normal;
 			font-weight: 500;
 			line-height: 1.42;
+			@media only screen and (min-width: $screen-sm) {
+				font-size: 30px;
+			}
 		}
 		&:local(.size-3) {
 			font-family: "Open Sans", arial, sans-serif;
-			font-size: 22px;
+			font-size: 19px;
 			font-style: normal;
 			font-weight: bold;
 			line-height: 1;
+			@media only screen and (min-width: $screen-sm) {
+				font-size: 22px;
+			}
+		}
+		&:local(.size-4) {
+			font-family: "Open Sans", arial, sans-serif;
+			font-size: 17px;
+			font-style: italic;
+			font-weight: normal;
+			line-height: 1;
+			@media only screen and (min-width: $screen-sm) {
+				font-size: 21px;
+			}
 		}
 	}
 }

package/dist/components/NavigationBar.module.scss

@@ -10,7 +10,7 @@
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		@media only screen and (min-width: $screen-xs) {
+		@media only screen and (min-width: $screen-sm) {
 			height: 73px;
 		}
 	}
@@ -23,7 +23,7 @@
 			height: 54px;
 			max-width: none;
 		}
-		@media only screen and (min-width: $screen-xs) {
+		@media only screen and (min-width: $screen-sm) {
 			width: 270px;
 			height: 73px;
 			img {
@@ -39,7 +39,7 @@
 	}
 
 	:local(.dropdownOverlay) {
-		@media only screen and (max-width: $screen-md) and (min-width: $screen-xs) {
+		@media only screen and (max-width: $screen-lg) and (min-width: $screen-sm) {
 			@include transition(all 0.1s ease-out);
 			content: "";
 			position: absolute;
@@ -78,7 +78,7 @@
 				display: block;
 			}
 		}
-		@media only screen and (min-width: $screen-xs) {
+		@media only screen and (min-width: $screen-sm) {
 			margin: 0 21px;
 		}
 	}
@@ -154,7 +154,7 @@
 		}
 	}
 
-	@media only screen and (min-width: $screen-xs) {
+	@media only screen and (min-width: $screen-sm) {
 		:local(.dropdownContainer) {
 			position: relative;
 			overflow: visible;

package/dist/components/Paper.module.scss

@@ -1,17 +1,18 @@
+@import "../style/global.scss";
+
 :local(.paper) {
   line-height: 1.6;
   position: relative;
-  padding: 24px 28px;
-  margin: 20px 0;
   width: 100%;
   background: white;
-  box-shadow: 0 2px 3px rgba(0,0,0,0.18);
-
-  &:local(.noMargin) {
-    margin: 0;
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.18);
+  &:not(:local(.noMargin)) {
+    margin: 20px 0;
   }
-
-  &:local(.noPadding) {
-    padding: 0;
+  &:not(:local(.noPadding)) {
+    padding: 12px 12px;
+    @media only screen and (min-width: $screen-sm) {
+      padding: 24px 28px;
+    }
   }
 }