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

wix-style-react

@st-import Text from "../Text/Text.st.css";
@st-import [D80, D70, B30, B10, F00, B40, D20, D10, B00, B50] from '../Foundation/stylable/colors.st.css';
@st-import [text-small-normal] from "../Foundation/stylable/typography.st.css";

.root {
  -st-states:
    selected,
    disabled,
    skin(enum(dark, light, neutral)),
    isChild,
    inContextMenu,
    hasPrefix,
    isParentWithPrefix,
    level(number(1, 2, 3)),
    legacy,
    isFocusVisible;
  -st-mixin: text-small-normal;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  border: none;
  text-align: start;
  text-decoration: none;
  min-width: 136px;
  padding-inline: 0;
  padding-block: 0;
  padding-right: 18px;
}

.root:disabled {
  pointer-events: none;
}

.root:focus {
  outline: none;
}

.root:not(:disabled):isFocusVisible {
  box-shadow: inset 0 0 0 3px value(F00);
}

.root:active,
.root:selected,
.root:hover {
  cursor: pointer;
}

.root:inContextMenu .text:skin(standard) {
  line-height: 15px;
  margin: 6px 0 6px 0;
}

/** level legacy */
.root:legacy:level(1) {
  padding: 0 20px;
}

.root:legacy:level(2) {
  padding-left: 24px;
}

.root:legacy:hasPrefix {
  padding: 0 16px 0 16px;
}

.root:legacy:inContextMenu:level(2) .text {
  -webkit-line-clamp: 1;
}

.root:legacy .text:skin(standard),
.root:legacy:inContextMenu .text:skin(standard) {
  margin: 6px 0 7px 0;
}

/* level=[1] */
.root:level(1) {
  padding-left: 24px;
}

.root:level(1):hasPrefix {
  padding-left: 18px;
}

.root:level(1):hasPrefix .prefix {
  margin-right: 12px;
  margin-top: 9px;
  margin-bottom: 9px;
}

.root:level(1):hasPrefix:legacy .prefix {
  margin-top: 0px;
  margin-bottom: 0px;
}

.root:level(1) .text {
  line-height: 18px;
  margin: 9px 0;
}

/* level=[2] */
.root:level(2) {
  padding-left: 48px;
}

.root:inContextMenu:level(2) {
  padding-left: 24px;
  padding-right: 18px;
}

.root:level(2):hasPrefix {
  padding-left: 18px;
}

.root:level(2):hasPrefix .prefix {
  margin-right: 12px;
}

/* level=[3] */
.root:level(3) {
  padding-left: 48px;
}

.root:inContextMenu:level(3) {
  padding-left: 24px;
  padding-right: 18px;
}

.root:level(3):hasPrefix {
  padding-left: 48px;
}

.root:level(3) .divider {
  margin-right: 18px;
}

.root:level(3):hasPrefix .divider {
  margin-right: 12px;
}

/** skin - dark - legacy **/
.root:legacy:skin(dark) {
  background-color: #131720;
  color: #CFD0D2;
}

.root:legacy:level(2):skin(dark) {
  background-color: #1F222B;
}

.root:legacy:skin(dark) .text:skin(standard):light {
  color: #CFD0D2;
}

.root:legacy:skin(dark):hover {
  background-color: #42454C;
}

.root:legacy:skin(dark):selected {
  background-color: #42454C;
}

.root:legacy:skin(dark):selected .text {
  color: value(D80);
}

.root:legacy:skin(dark):disabled .text {
  color: #CFD1DC;
}

.root:legacy:skin(dark):level(2):inContextMenu {
  background-color: #2c2e35
}

.root:legacy:skin(dark):level(2):inContextMenu:hover {
  background-color: #42454C;
}

.root:legacy:level(2):skin(dark):not(:hover):not(:selected) {
  background: transparent;
}

/** skin[dark] - all levels - default **/
.root:level(1):skin(dark) {
  background-color: #131720;
}

.root:level(2):skin(dark) {
  background-color: #1F222B;
}

.root:inContextMenu:level(2):skin(dark) {
  background-color: #1F222B;
}

.root:level(3):skin(dark) {
  background-color: #1F222B;
}

.root:inContextMenu:level(3):skin(dark) {
  background-color: #1F222B;
}

.root:level(1):skin(dark) .text:skin(standard):light,
.root:level(2):skin(dark) .text:skin(standard):light,
.root:level(3):skin(dark) .text:skin(standard):light {
  color: #CFD0D2;
}

.root:level(1):skin(dark) .prefix,
.root:level(2):skin(dark) .prefix,
.root:level(3):skin(dark) .prefix {
  color: #CFD0D2;
}

.root:level(1):skin(dark) .suffix,
.root:level(2):skin(dark) .suffix,
.root:level(3):skin(dark) .suffix {
  color: #CFD0D2;
}

.root:level(3):skin(dark) .divider {
  background-color: #42454C;
}

.listItem:first-child .root:skin(dark) .divider {
  background: linear-gradient(to top, #42454C 66%, transparent 0%);;
}

.listItem:last-child .root:skin(dark) .divider {
  background: linear-gradient(to bottom, #42454C 66%, transparent 0%);
}

/** skin[dark] - all levels - hover **/
.root:level(1):skin(dark):hover {
 background-color: #2B2E36;
}

.root:level(2):skin(dark):hover {
  background-color: #2B2E36;
}

.root:level(3):skin(dark):hover {
  background-color: #2B2E36;
}

/* skin[dark] - all levels - active/selected */
.root:level(1):skin(dark):active,
.root:level(2):skin(dark):active,
.root:level(3):skin(dark):active {
  background-color: #42454C;
}

.root:level(1):skin(dark):selected,
.root:level(2):skin(dark):selected,
.root:level(3):skin(dark):selected {
  background-color: #42454C;
}

.root:level(1):selected .text,
.root:level(2):selected .text,
.root:level(3):selected .text {
  color: value(D80);
}

/** skin[dark] - all levels - disabled */
.root:level(1):skin(dark):disabled .text,
.root:level(2):skin(dark):disabled .text,
.root:level(3):skin(dark):disabled .text {
  color: #898B8F;
}

.root:level(1):skin(dark):disabled .prefix,
.root:level(2):skin(dark):disabled .prefix,
.root:level(3):skin(dark):disabled .prefix {
  color: #898B8F;
}

/** skin - light - legacy **/
.root:legacy:skin(light) {
  background-color: value(D80);
  color: value(D20);
}

.root:legacy:skin(light) .text:skin(standard):secondary {
  color: value(D20);
}

.root:legacy:skin(light):hover {
  background-color: value(B40);
}

.root:legacy:skin(light):hover:selected {
  background-color: value(B30);
}

.root:legacy:skin(light):selected {
  background-color: value(B30);
  color: value(B00);
}

.root:legacy:skin(light):selected .text:skin(standard):secondary {
  color: value(B00);
}

.root:legacy:skin(light):disabled .text {
  color: #CFD1DC;
}

.root:legacy:level(2):skin(light) {
  background: transparent;
}

/** skin[light] - all levels - default **/
.root:level(1):skin(light) {
  background-color: #FFFFFF;
}

.root:level(2):skin(light) {
  background-color: #FFFFFF;
}

.root:level(3):skin(light) {
  background-color: #FFFFFF;
}

.root:level(1):skin(light) .text:skin(standard),
.root:level(2):skin(light) .text:skin(standard),
.root:level(3):skin(light) .text:skin(standard) {
  color: #333853;
}

.root:level(1):skin(light) .prefix,
.root:level(2):skin(light) .prefix,
.root:level(3):skin(light) .prefix {
  color: #333853;
}

.root:level(3):skin(light) .divider {
  background-color: #CFD1DC;
}

.listItem:first-child .root:skin(light) .divider {
  background: linear-gradient(to top, #CFD1DC 66%, transparent 0%);;
}

.listItem:last-child .root:skin(light) .divider {
  background: linear-gradient(to bottom, #CFD1DC 66%, transparent 0%);;
}

/** skin[light] - all levels - hover **/
.root:level(1):skin(light):hover {
  background-color: #D6E6FE;
}

.root:level(2):skin(light):hover {
  background-color: #D6E6FE;
}

.root:level(3):skin(light):hover {
  background-color: #D6E6FE;
}

/** skin[light] - all levels - active/selected **/
.root:level(1):skin(light):active,
.root:level(2):skin(light):active,
.root:level(3):skin(light):active {
  background-color: #A8CAFF;
}

.root:level(1):skin(light):selected,
.root:level(2):skin(light):selected,
.root:level(3):skin(light):selected {
  background-color: #A8CAFF;
}

.root:level(1):skin(light):selected .text:skin(standard),
.root:level(2):skin(light):selected .text:skin(standard),
.root:level(3):skin(light):selected .text:skin(standard) {
  color: #084EBD;
}

.root:level(1):skin(light):active .text:skin(standard),
.root:level(2):skin(light):active .text:skin(standard),
.root:level(3):skin(light):active .text:skin(standard) {
  color: #084EBD;
}

/** skin[light] - all levels - disabled */
.root:level(1):skin(light):disabled .text,
.root:level(2):skin(light):disabled .text,
.root:level(3):skin(light):disabled .text {
  color: #CFD1DC;
}

.root:level(1):skin(light):disabled .prefix,
.root:level(2):skin(light):disabled .prefix,
.root:level(3):skin(light):disabled .prefix {
  color: #CFD1DC;
}

/** skin - neutral - legacy **/
.root:legacy:skin(neutral) {
  background-color: value(D70);
}

.root:legacy:level(2):skin(neutral) {
  background-color: value(D70);
}

.root:legacy:skin(neutral) .prefix {
  color: value(D20);
}

.root:legacy:skin(neutral):hover {
  background-color: value(B40);
}

.root:legacy:skin(neutral):hover:selected {
  background-color: value(B40);
}

.root:legacy:skin(neutral):selected {
  background-color: value(B40);
}

.root:legacy:skin(neutral):selected .text {
  color: value(B00);
}

.root:legacy:skin(neutral):disabled .text {
  color: #CFD1DC;
}

/** skin[neutral] - all levels - default **/
.root:level(1):skin(neutral) {
  background-color: #ECEFF3
}

.root:level(2):skin(neutral) {
  background-color: #ECEFF3;
}

.root:level(3):skin(neutral) {
  background-color: #ECEFF3;
}

.root:level(1):skin(neutral) .text:skin(standard):light,
.root:level(2):skin(neutral) .text:skin(standard):light,
.root:level(3):skin(neutral) .text:skin(standard):light {
  color: #000624;
}

.root:level(1):skin(neutral) .prefix,
.root:level(2):skin(neutral) .prefix,
.root:level(3):skin(neutral) .prefix {
  color: #000624;
}

.root:level(3):skin(neutral) .divider {
  background-color: #CFD1DC;
}

.listItem:first-child .root:skin(neutral) .divider {
  background: linear-gradient(to top, #CFD1DC 66%, transparent 0%);;
}

.listItem:last-child .root:skin(neutral) .divider {
  background: linear-gradient(to bottom, #CFD1DC 66%, transparent 0%);;
}

/** skin[neutral] - all levels - hover **/
.root:level(1):skin(neutral):hover {
  background-color: #D6E6FE;
}

.root:level(2):skin(neutral):hover {
  background-color:#D6E6FE;
}

.root:level(3):skin(neutral):hover {
  background-color: #D6E6FE;
}

/** skin[neutral] - all levels - active/selected **/
.root:level(1):skin(neutral):active,
.root:level(2):skin(neutral):active,
.root:level(3):skin(neutral):active {
  background-color: #D6E6FE;
}

.root:level(1):skin(neutral):selected,
.root:level(2):skin(neutral):selected,
.root:level(3):skin(neutral):selected {
  background-color: #D6E6FE;
}

.root:level(1):skin(neutral):active .text:skin(standard),
.root:level(2):skin(neutral):active .text:skin(standard),
.root:level(3):skin(neutral):active .text:skin(standard) {
  color: #084EBD;
}

.root:level(1):skin(neutral):selected .text:skin(standard),
.root:level(2):skin(neutral):selected .text:skin(standard),
.root:level(3):skin(neutral):selected .text:skin(standard) {
  color: #084EBD;
}

/** skin[neutral] - all levels - disabled */
.root:level(1):skin(neutral):disabled .text:skin(standard),
.root:level(2):skin(neutral):disabled .text:skin(standard),
.root:level(3):skin(neutral):disabled .text:skin(standard) {
  color: #CFD1DC;
}

.root:level(1):skin(neutral):disabled .prefix,
.root:level(2):skin(neutral):disabled .prefix,
.root:level(3):skin(neutral):disabled .prefix {
  color: #CFD1DC;
}

.divider {
  width: 1px;
  height: 100%;
  border-style: none;
  margin-block-start: 0;
  margin-block-end: 0;
}

.textWrapper {
  flex: 1;
}

.text {
  -st-extends: Text;
}

.text {
  display: block;
  flex: 1 1 auto;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
  overflow: hidden;
  line-height: 15px;
  margin: 6px 0 6px 0;
}

.root:skin(dark) .text:weight(normal):size(tiny),
.root:skin(neutral) .text:weight(normal):size(tiny),
.root:skin(light) .text:weight(normal):size(tiny) {
  line-height: 15px;
}

.prefix {
  margin-right: 6px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.suffix {
  display: flex;
  flex: 1 0 auto;
  justify-content: flex-end;
  min-width: 18px;
  max-width: 100%;
  margin-left: 6px;
}

.suffixContainer {
  display: flex;
  justify-content: flex-end;
  min-width: 18px;
  max-width: 30%;
  margin-left: 6px;
}

.listItem {
  list-style-type: none;
  display: flex;
}

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