add sass modules

2020-11-14 19:45:07 +03:30
parent 56b295b75d
commit 95149f0e72
17 changed files with 4140 additions and 2923 deletions
@@ -0,0 +1,97 @@
+%defaultTransition {
+  @include transition(0.3s);
+}
+
+%userSelect {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+%appearance {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+
+%titleShape {
+  &::after {
+    content: '';
+    display: block;
+    background: #000;
+    width: 40px;
+    height: 4px;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    @extend %defaultTransition;
+  }
+
+  &:lang(en) {
+    &::after {
+      right: auto;
+      left: 0;
+    }
+  }
+
+  &.active {
+    &::after {
+      width: 100%;
+    }
+  }
+}
+
+%titleShapeCenter {
+  &::after {
+    content: '';
+    display: block;
+    background: #000;
+    width: 50px;
+    height: 4px;
+    position: absolute;
+    left: calc(50% - 25px);
+    bottom: 0;
+    @extend %defaultTransition;
+  }
+
+  &.active {
+    &::after {
+      width: 100%;
+      left: 0;
+    }
+  }
+}
+
+%imgBoxShape {
+  &::before {
+    content: '';
+    display: block;
+    width: 80%;
+    height: 40px;
+    background: $theme;
+    position: absolute;
+    top: -30px;
+    right: 10%;
+    z-index: -1;
+  }
+}
+
+%imgBoxShape-reverse {
+  &::before {
+    content: '';
+    display: block;
+    width: 80%;
+    height: 40px;
+    background: $theme;
+    position: absolute;
+    bottom: -30px;
+    left: 10%;
+    z-index: -1;
+  }
+}
+
+%defaultBoxShadow {
+  @include boxShadow(0 0px 20px rgba(0, 0, 0, 0.2))
+}