@meduza/ui-kit-2 0.1.16 → 0.1.18

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.16",
+  "version": "0.1.18",
   "license": "MIT",
   "description": "UIKit for Meduza",
   "repository": "https://github.com/meduza-corp/ui-kit-2.git",

package/src/Button/Button.module.css

@@ -5,21 +5,19 @@
 
   padding: 0;
 
-  color: #fff;
-
-  font-family: $secondaryFont;
-  line-height: 1;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.15s ease-out;
   text-align: center;
 
+  color: #fff;
   border-width: 0;
   outline: none;
 
-  cursor: pointer;
-
-  transition: background-color 0.15s ease-out;
+  font-family: $secondaryFont;
+  line-height: 1;
 
   appearance: none;
-  user-select: none;
 }
 
 .root::-moz-focus-inner {
@@ -28,10 +26,9 @@
 
 .root[disabled] {
   cursor: default;
+  pointer-events: none;
 
   opacity: 0.5;
-
-  pointer-events: none;
 }
 
 .root > span:first-child {
@@ -64,7 +61,6 @@
 
 .gray {
   color: #000;
-
   background-color: #f0f0f0;
 }
 
@@ -106,7 +102,6 @@
 
 .dark {
   color: #adadad;
-
   background-color: #3a3a3a;
   box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.4);
 }
@@ -129,7 +124,6 @@
 
 .light {
   color: #000;
-
   background-color: #fff;
 }
 
@@ -151,7 +145,6 @@
 
 .black {
   color: #7e7d7b;
-
   background-color: #000;
 }
 
@@ -194,18 +187,17 @@
 .default {
   width: 100%;
   height: 42px;
-  padding: 7px 18px 6px;
-
-  font-weight: 600;
-
-  font-size: 12px;
-  line-height: 22px;
+  padding: 6px 18px;
 
   letter-spacing: 1px;
   text-transform: uppercase;
 
   border-radius: 8px;
 
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 22px;
+
   @media $landscapeTablet {
     font-size: 14px;
     line-height: 16px;
@@ -218,16 +210,15 @@
 }
 
 .ghost {
-
-  color: inherit;
-  font-weight: inherit;
-  font-size: inherit;
-
-  font-family: inherit;
   letter-spacing: inherit;
   text-transform: none;
 
+  color: inherit;
   background-color: transparent;
+
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
 }
 
 .isInDropdown {
@@ -242,12 +233,11 @@
 /* LOADING */
 
 .root.isLoading {
+  cursor: default;
+  pointer-events: none;
 
   background-color: transparent;
   box-shadow: none;
-  cursor: default;
-
-  pointer-events: none;
 }
 
 .loader {

package/src/DotsOnImage/index.tsx

@@ -126,7 +126,9 @@ export const DotsOnImage: React.FC<DotsOnImageProps> = ({
             style={{
               top: `${dot.position.y}%`,
               left: `${dot.position.x}%`,
-              transform: `scale(${ratio}) translate(-50%, -50%)`
+              transform: `scale(${ratio}) translate(-${50 / ratio}%, -${
+                50 / ratio
+              }%)`
             }}
           >
             <button
@@ -136,7 +138,7 @@ export const DotsOnImage: React.FC<DotsOnImageProps> = ({
               ])}
               type="button"
               style={{
-                backgroundColor: dot.icon.color,
+                backgroundColor: dot.icon.color
               }}
               onClick={(): void => handleDotClick(dot)}
             >

package/src/MaterialNote/MaterialNote.module.css

@@ -78,7 +78,7 @@
   margin-top: 25px;
 
   @media $mobile {
-    margin-top: 35px;
+    margin-top: 45px;
   }
 }
 

package/src/SourceBlock/SourceBlock.module.css

@@ -4,12 +4,12 @@
   display: block;
 
   margin: 18px 0 15px;
-  padding: 12px 11px 13px;
+  padding: 12px 11px 17px;
 
   color: #000;
-  border-left: 4px solid $gold;
   border-radius: 2px 8px 8px 2px;
   background-color: $platinum;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), inset 4px 0 0 0 #b78b5c;
 
   font-size: 16px;
   line-height: 20px;
@@ -17,7 +17,7 @@
   @media $portraitTablet {
     margin-top: 25px;
     margin-bottom: 25px;
-    padding: 18px 16px 12px;
+    padding: 18px 16px 16px;
   }
 }
 

package/src/Spoiler/Spoiler.module.css

@@ -35,9 +35,10 @@
   margin-top: 0;
   margin-bottom: 18px;
 
-  font-family: $secondaryFont;
-  font-size: 21px;
   font-weight: 700;
+  font-size: 21px;
+
+  font-family: $secondaryFont;
   line-height: 26px;
 
   @media $mobile {
@@ -66,6 +67,10 @@
 
 .spoiled {
   min-height: auto;
+
+  @media $mobileMax {
+    padding-bottom: 0;
+  }
 }
 
 .spoiled .body {
@@ -78,16 +83,16 @@
 
 .spoiled .footer {
   position: sticky;
-  z-index: 10;
   bottom: 0;
+  z-index: 10;
 
   margin-right: -20px;
   margin-left: -20px;
   padding: 12px 20px 20px;
 
-  animation: spoilerSticky 500ms ease both;
+  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 64%);
 
-  background-image: linear-gradient( 180deg, rgba(255, 255, 255, 0) 0%, #fff 64% );
+  animation: spoilerSticky 500ms ease both;
 
   @media $mobile {
     position: static;
@@ -96,25 +101,27 @@
     margin-left: 0;
     padding: 0;
 
-    animation: none;
-
     background-image: none;
+
+    animation: none;
   }
 }
 
 .spoiled .footer::after {
   position: absolute;
-  z-index: -1;
   top: 100%;
   right: 0;
   left: 0;
+  z-index: -1;
 
   height: 16px;
 
-  content: '';
-
   background-color: #fff;
 
+  animation: spoilerStickyBg 1ms ease both 500ms;
+
+  content: '';
+
   @media $mobile {
     content: none;
   }
@@ -144,14 +151,26 @@
   0% {
     transform: translateY(62px);
   }
+
   50% {
     transform: translateY(-16px);
   }
+
   100% {
     transform: translateY(0);
   }
 }
 
+@keyframes spoilerStickyBg {
+  0% {
+    background-color: #fff;
+  }
+
+  100% {
+    background-color: transparent;
+  }
+}
+
 [data-gdpr-panel='true'] .spoiled .footer {
   bottom: 45px;