fix(core-components-skeleton): fix styles

core-ds · Sep 23, 2020 · 0aac24f · 0aac24f
1 parent 11e6ce9
commit 0aac24f
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 17 deletions.
diff --git a/packages/skeleton/src/Component.stories.mdx b/packages/skeleton/src/Component.stories.mdx
@@ -44,7 +44,7 @@ import { Skeleton } from '@alfalab/core-components-skeleton';
 
 ## Использование
 <br/>
-- с контентом (border-radius: 60px)
+- с контентом
 
 <Preview>
     <Container>

diff --git a/packages/skeleton/src/index.module.css b/packages/skeleton/src/index.module.css
@@ -1,14 +1,14 @@
 @import '../../vars/src/colors-indigo.css';
 
 :root {
-    --skeleton-wrapper-background-filter: none;
-    --skeleton-wrapper-default-color: var(--color-light-graphic-tertiary);
+    --skeleton-background-filter: none;
+    --skeleton-default-color: var(--color-light-graphic-tertiary);
 }
 
 .component {
     position: relative;
     display: inline-block;
-    border-radius: 8px;
+    border-radius: 32px;
     overflow: hidden;
 }
 
@@ -23,8 +23,8 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background: var(--skeleton-wrapper-default-color);
-    backdrop-filter: var(--skeleton-wrapper-background-filter);
+    background: var(--skeleton-default-color);
+    backdrop-filter: var(--skeleton-background-filter);
 }
 
 .animate:after {

diff --git a/packages/skeleton/src/stories.module.css b/packages/skeleton/src/stories.module.css
@@ -1,5 +1,4 @@
 .example-1 {
-    border-radius: 60px;
     margin-top: 16px;
 }
 
@@ -12,45 +11,40 @@
     width: 440px;
 }
 
-@define-mixin common {
-    position: absolute;
-    border-radius: 60px;
-}
-
 .example-2 {
-    @mixin common;
+    position: absolute;
     width: 48px;
     height: 48px;
     left: 10px;
     top: 10px;
 }
 
 .example-3 {
-    @mixin common;
+    position: absolute;
     width: 200px;
     height: 24px;
     left: 82px;
     top: 10px;
 }
 
 .example-4 {
-    @mixin common;
+    position: absolute;
     width: 124px;
     height: 16px;
     left: 82px;
     top: 54px;
 }
 
 .example-5 {
-    @mixin common;
+    position: absolute;
     width: 228px;
     height: 16px;
     left: 222px;
     top: 54px;
 }
 
 .example-6 {
-    @mixin common;
+    position: absolute;
     width: 260px;
     height: 16px;
     left: 82px;