wix-style-react
Version:
wix-style-react
87 lines (71 loc) • 1.47 kB
CSS
:import {
-st-from: "../Foundation/stylable/colors.st.css";
-st-named: D60;
}
:import {
-st-from: "../Foundation/stylable/mixins/flex-gap-polyfilled.js";
-st-named: gap;
}
:import {
-st-from: '../Heading/Heading.st.css';
-st-default: Heading;
}
.root {
-st-states: removeVerticalPadding;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
padding: 15px 24px;
height: initial;
min-height: 60px;
}
.root:removeVerticalPadding {
padding-top: 0;
padding-bottom: 0;
min-height: 0;
}
.item {
-st-states: layout(enum(button));
display: flex;
}
.item:not(:first-child) {
margin-inline-start: 12px;
}
.itemLabel {
-st-mixin: gap(12px);
display: flex;
align-items: center;
}
.itemGroup {
-st-states: position(enum(end, start));
display: flex;
align-items: center;
}
.itemGroup:position(end) {
justify-content: flex-end;
}
.itemGroup:position(start) {
justify-content: flex-start;
}
.itemGroup:last-child:not(:only-child) {
margin-inline-start: 24px;
}
.title {
-st-extends: Heading;
margin-inline-end: 12px;
}
.divider {
height: 18px;
width: 1px;
margin-inline-start: 12px;
background-color: value(D60);
}
.itemGroup .item:layout(button) + .item:layout(button) {
margin-inline-start: 6px;
}
.itemGroup:first-child .item + .divider {
margin-inline-start: 24px;
}
/* st-namespace-reference="../../../src/TableToolbar/TableToolbar.st.css" */