@gravity-ui/page-constructor 1.20.5 → 1.21.0

package/styles/mixins.scss

@@ -481,12 +481,69 @@ unpredictable css rules order in build */
     }
 }
 
-@mixin monochromeButton() {
-    --yc-button-background-color: var(--pc-monochrome-button-background-color);
-    --yc-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
-    color: var(--pc-monochrome-button-color);
+@mixin button($color, $backgroundColor, $hoverColor: $color, $hoverBackgroundColor) {
+    --yc-button-background-color: #{$backgroundColor};
+    --yc-button-background-color-hover: #{$hoverBackgroundColor};
+
+    &,
+    &:link,
+    &:visited,
+    &:active,
+    &:focus {
+        color: $color;
+    }
 
     &:hover {
-        color: var(--pc-monochrome-button-color);
+        color: $hoverColor;
+    }
+}
+
+@mixin monochrome-button() {
+    @include button(
+        var(--pc-monochrome-button-color),
+        var(--pc-monochrome-button-background-color),
+        $hoverBackgroundColor: var(--pc-monochrome-button-background-color-hover)
+    );
+}
+
+@mixin centerable-title() {
+    &_centered {
+        text-align: center;
+
+        & > * {
+            margin: 0 auto;
+        }
+    }
+}
+
+@mixin tab-panel() {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    overflow: auto;
+
+    &_centered {
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+
+    @media (max-width: map-get($gridBreakpoints, 'md')) {
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+        overflow: auto;
+
+        margin-left: -$indentL;
+        margin-right: -$indentL;
+        padding-left: $indentL;
+        padding-right: $indentL - $indentXXXS;
+    }
+
+    @media (max-width: map-get($gridBreakpoints, 'sm')) {
+        margin-left: -$indentSM;
+        margin-right: -$indentSM;
+        padding-left: $indentSM;
+        padding-right: $indentXS;
     }
 }

package/styles/root.scss

@@ -19,6 +19,16 @@
     --pc-text-header-color: var(--yc-color-text-primary);
     --pc-media-card-meta-info-color: var(--yc-color-text-secondary);
 
+    --pc-tab-item-color: var(--yc-color-text-primary);
+    --pc-tab-item-background-color: var(--yc-color-base-generic);
+    --pc-tab-item-background-color-hover: var(--yc-color-base-generic-hover);
+
+    --pc-selected-tab-item-color: var(--pc-monochrome-button-color);
+    --pc-selected-tab-item-background-color: var(--pc-monochrome-button-background-color);
+    --pc-selected-tab-item-background-color-hover: var(
+        --pc-monochrome-button-background-color-hover
+    );
+
     &.yc-root_theme_dark {
         --pc-color-sfx-shadow: var(--yc-color-sfx-shadow);
         --pc-color-line-generic-active-solid: #6c6c70;