initial public commit

2022-07-07 00:19:05 +03:00
commit 3d07f0211d
484 changed files with 92412 additions and 0 deletions
@@ -0,0 +1,129 @@
+$tabHeaderAnimationSpeed: 0.25s;
+$tabContentAnimationSpeed: 0.3s;
+
+@keyframes tabChange {
+    0% {
+        opacity: 0.5;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+.tabs-header {
+    display: flex;
+    align-items: stretch;
+    justify-content: flex-start;
+    column-gap: 10px;
+    width: 100%;
+    min-height: 50px;
+    user-select: none;
+    margin: 0 0 var(--baseSpacing);
+    border-bottom: 1px solid var(--baseAlt2Color);
+    .tab-item {
+        position: relative;
+        outline: 0;
+        border: 0;
+        background: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 50px;
+        gap: 5px;
+        padding: 10px 10px;
+        margin: 0;
+        font-size: var(--lgFontSize);
+        line-height: var(--baseLineHeight);
+        font-family: var(--baseFontFamily);
+        color: var(--txtHintColor);
+        text-align: center;
+        text-decoration: none;
+        cursor: pointer;
+        border-top-left-radius: var(--baseRadius);
+        border-top-right-radius: var(--baseRadius);
+        transition: color var(--baseAnimationSpeed),
+                    background var(--baseAnimationSpeed);
+        &:after { // active border
+            content: "";
+            position: absolute;
+            display: block;
+            left: 0;
+            bottom: -1px;
+            width: 100%;
+            height: 2px;
+            border-top-left-radius: var(--baseRadius);
+            border-top-right-radius: var(--baseRadius);
+            background: var(--primaryColor);
+            transform: rotateY(90deg);
+            transition: transform $tabHeaderAnimationSpeed;
+        }
+        .txt, i {
+            display: inline-block;
+            vertical-align: top;
+        }
+        &:hover,
+        &:focus-visible,
+        &:active {
+            color: var(--txtPrimaryColor);
+        }
+        &:focus-visible,
+        &:active {
+            transition-duration: var(--activeAnimationSpeed);
+            background: var(--baseAlt2Color);
+        }
+        &.active {
+            color: var(--txtPrimaryColor);
+            &:after {
+                transform: rotateY(0deg);
+            }
+        }
+        &.disabled {
+            pointer-events: none;
+            color: var(--txtDisabledColor);
+            &:after {
+                display: none;
+            }
+        }
+    }
+    &.right {
+        justify-content: flex-end;
+    }
+    &.center {
+        justify-content: center;
+    }
+    &.stretched {
+        .tab-item {
+            flex-grow: 1;
+            flex-basis: 0;
+        }
+    }
+    &.compact {
+        min-height: 30px;
+        margin-bottom: var(--smSpacing);
+    }
+}
+
+.tabs-content {
+    @extend %block;
+    position: relative;
+    > .tab-item {
+        width: 100%;
+        display: none;
+        &.active {
+            display: block;
+            opacity: 0;
+            animation: tabChange $tabContentAnimationSpeed forwards;
+        }
+        & > :first-child {
+            margin-top: 0;
+        }
+        & > :last-child {
+            margin-bottom: 0;
+        }
+    }
+}
+
+.tabs {
+    @extend %block;
+    position: relative;
+}