@morozeckiy/dd-lib 0.2.22 → 0.2.26

package/assets/scss/common.scss

@@ -48,10 +48,81 @@ html {
   -webkit-backdrop-filter: blur(10px);
 }
 
+.g-table {
+  border: 1px solid var(--gray-color-200);
+  border-radius: 24px;
+  overflow: hidden;
+
+  @include below($tablet) {
+    border: none;
+    border-radius: 0;
+  }
+
+  &__body {
+    overflow: auto;
+  }
+
+  &__header,
+  &__item {
+    display: flex;
+    padding: 12px 20px;
+    font-size: 14px;
+    line-height: 24px;
+    color: var(--light-black-color);
+
+    &:not(:last-child) {
+      border-bottom: 1px solid var(--gray-color-200);
+
+      @include below($tablet) {
+        margin-bottom: 16px;
+      }
+    }
+
+    @include below($tablet) {
+      position: relative;
+      display: block;
+      padding: 16px;
+      border-radius: 24px;
+      border: 1px solid var(--disabled-bgc);
+      background-color: var(--gray-color-300);
+    }
+  }
+
+  &__header {
+    color: var(--second-gray-color);
+    background-color: var(--gray-bgc-2);
+  }
+
+  &__cell {
+    &.numb {
+      width: 5%;
+
+      @include below($tablet) {
+        display: inline-flex;
+        margin-bottom: 8px;
+        padding: 0 8px;
+        border-radius: 10px;
+        width: auto;
+        height: 32px;
+        line-height: 32px;
+        background-color: var(--disabled-color);
+        color: var(--white-color);
+      }
+    }
+  }
+}
+
 .no-wrap-text {
   white-space: nowrap;
 }
 
+.ellipsis-text {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
 .full-width {
   width: 100%;
 }
@@ -169,6 +240,18 @@ html {
   cursor: auto;
 }
 
+.bg-contain {
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.bg-cover {
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
 .empty-photo {
   background: url('../images/svg/user-empty.svg') no-repeat center;
   width: 100px;

package/assets/scss/theme.scss

@@ -12,6 +12,26 @@
     .user-empty-bg {
       background-image: url('../../assets/images/svg/user-empty.svg');
     }
+
+    .not-found-bg {
+      background-image: url('../../assets/images/png/not-found.png');
+    }
+
+    .page-404-bg {
+      background-image: url('../../assets/images/png/404.png');
+    }
+
+    .error-page-bg {
+      background-image: url('../../assets/images/png/error-page.png');
+    }
+
+    .tech-works-bg {
+      background-image: url('../../assets/images/png/tech-works.png');
+    }
+
+    .iphone-bg {
+      background-image: url('../../assets/images/png/iphone.png');
+    }
   }
 
   .theme-dark {
@@ -24,5 +44,25 @@
     .user-empty-bg {
       background-image: url('../../assets/images/svg/user-empty-d.svg');
     }
+
+    .not-found-bg {
+      background-image: url('../../assets/images/png/not-found-d.png');
+    }
+
+    .page-404-bg {
+      background-image: url('../../assets/images/png/404-d.png');
+    }
+
+    .error-page-bg {
+      background-image: url('../../assets/images/png/error-page-d.png');
+    }
+
+    .tech-works-bg {
+      background-image: url('../../assets/images/png/tech-works-d.png');
+    }
+
+    .iphone-bg {
+      background-image: url('../../assets/images/png/iphone.png');
+    }
   }
 }

package/assets/scss/titles.scss

@@ -6,6 +6,11 @@
   font-size: 40px;
   line-height: 60px;
   color: var(--light-black-color);
+
+  @include below($mobile) {
+    font-size: 24px;
+    line-height: 32px;
+  }
 }
 
 .g-h2-title {
@@ -46,12 +51,18 @@
   color: var(--light-black-color);
 }
 
-.g-text {
+.g-text,
+.g-text-sm {
+  font-weight: 400;
   font-size: 16px;
   line-height: 24px;
   color: var(--font-light-black-color);
 }
 
+.g-text-sm {
+  font-size: 14px;
+}
+
 .h1-title {
   font-size: 40px;
   font-weight: 700;
@@ -172,6 +183,10 @@
   letter-spacing: 0;
 }
 
+.font-regular {
+  font-weight: 400;
+}
+
 .font-medium {
   font-weight: 500;
 }
@@ -184,6 +199,10 @@
   color: var(--dark-color);
 }
 
+.black {
+  color: var(--light-black-color);
+}
+
 .light-black {
   color: var(--font-light-black-color);
 }

package/assets/scss/vars-dark.scss

@@ -130,5 +130,5 @@
   --blue-card: #1E2841;
   --blue-light-bgc: #e5f2ff;
   --blue-light-border-color: #cce5fe;
-  --gray-bgc-2: #fcfcfc;
+  --gray-bgc-2: #3E3E3E;
 }