wix-style-react/dist/src/MessageBoxFunctionalLayout/MessageBoxFunctionalLayout.st.css

wix-style-react

:import {
  -st-from: "../Foundation/stylable/colors.st.css";
  -st-named:  B10, R10, P10, D60, D70;
}

:import {
  -st-from: "../Foundation/stylable/spacing.st.css";
  -st-named: SP1, SP2;
}

:import {
  -st-from: "../Foundation/stylable/shadows.st.css";
  -st-named:  shadow40;
}

:import {
  -st-from: "../Foundation/stylable/default-scroll-bar.st.css";
  -st-named: defaultScrollBar;
}

:import {
  -st-from: "../Foundation/stylable/typography.st.css";
  -st-named: text-medium-thin, wsr-font-weight-regular;
}

:import {
  -st-from: "../Heading/Heading.st.css";
  -st-default: Heading;
}

.root {
  -st-states: fullscreen, newColorsBranding, hasImage;
  width: 600px;
  box-shadow: value(shadow40);
  border-radius: 15px 15px 8px 8px;
  background-color: white;
}

.root:newColorsBranding {
  min-width: 510px;
  max-width: min-content;
  border-radius: 8px;
}

.root:hasImage {
  min-width: 600px;
  max-width: min-content;
  border-radius: 8px;
}

.root:fullscreen {
  display: flex;
  flex-direction: column;
  max-width: 1254px;
  height: calc(100% - 48px * 2);
  width: calc(100% - 48px * 2);
}

.topAreaContainer {
  -st-states: newColorsBranding;
}

.topAreaContainer:newColorsBranding {
  display: flex;
  overflow-y: auto;
  position: relative;
}

.contentAreaContainer {
  -st-states: newColorsBranding;
}

.contentAreaContainer:newColorsBranding {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.imageContainer {
  margin: 18px 0 0 24px;
  max-height: 120px;
  max-width: 120px;
  overflow: hidden;
}

.header {
  -st-states: theme(enum(red, blue, purple)), newColorsBranding;
  display: flex;
  justify-content: space-between;
  box-sizing:border-box;
  min-height: 60px;
  padding: 18px;
  padding-left: 30px;
  border-radius: 8px 8px 0px 0px;
}

.header:newColorsBranding {
  padding: 18px 24px;
}

.header:theme(blue) {
  background-color: value(B10);
}

.header:theme(red) {
  background-color: value(R10);
}

.header:theme(purple) {
  background-color: value(P10);
}

.heading {
  -st-extends: Heading;
}

.content {
  -st-states: scrollable, noPadding, fullscreen, noFooter, footerBorder, withEmptyState, newColorsBranding;
  -st-mixin: text-medium-thin;
  padding: 36px 30px 12px;
  box-sizing: border-box;
}

.content:scrollable {
  -st-mixin: defaultScrollBar;
  overflow-y: auto;
}

.content:noPadding {
  padding: 0;
}

.content:newColorsBranding {
  padding: 0 24px 8px;
}

.content:fullscreen {
  height: 100%;
  margin-bottom: auto;
  overflow: auto;
}

.content:noFooter {
  padding-bottom: 42px;
}

.content:footerBorder:not(:noFooter) {
  border-bottom: 1px solid value(D60);
}

.content:withEmptyState {
  padding: 42px 20px;
}

.contentWithImage {
  display: flex;
}

.image {
  -st-states: withFooterAction, noPadding;
  display: inline-block;
  margin: 24px 0 -30px 30px;
  width: 126px;
  height: 126px;
}

.image:withFooterAction {
  margin-bottom: -6px;
}

.image:noPadding {
  margin: 0;
}

.footer {
  -st-states: newColorsBranding;
  padding: 30px;
  display: flex;
  align-items: center;
}

.footer:newColorsBranding {
  padding: 18px 24px;
}

.footerbuttons {
  -st-states: withSideActions;
  display: flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
}

.footerbuttons:withSideActions {
  padding-left: 24px;
}

.footerbuttons > :first-of-type:not(:last-of-type) {
  margin-right: 12px;
}

.bottomChildren {
  -st-states: newColorsBranding;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 0 0 8px 8px;
  background-color: value(D70);
  padding: 12px 30px;
  margin-top: -12px;
  box-sizing: border-box;
}

.bottomChildren:newColorsBranding {
  margin-top: 0;
  justify-content: flex-start;
  padding: 12px 24px;
}

.controlButtons {
  position: absolute;
  right: value(SP2);
  top: value(SP2);
}

/* st-namespace-reference="../../../src/MessageBoxFunctionalLayout/MessageBoxFunctionalLayout.st.css" */