@shopware-ag/meteor-component-library
Version:
The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).
813 lines • 26.8 kB
CSS
/* ------------------------------------
* Administration variables
* Table of contents
*
* 1. Primary colors
* 2. Status colors
* 3. Module colors
* 4. Generic colors
* 5. Gradients
* 6. Typography
* 7. Miscellaneous
* 8. z-index
* 9. Global widths
* ------------------------------------ */
/* ------------------------------------
* 1. Primary colors
* ------------------------------------ */
/* ------------------------------------
* 2. Status colors
* ------------------------------------ */
/* ------------------------------------
* 3. Module colors
* ------------------------------------ */
/* ------------------------------------
* 4. Generic colors
* ------------------------------------ */
/* ------------------------------------
* 5. Gradients
* ------------------------------------ */
/* ------------------------------------
* 6. Typography
* ------------------------------------ */
/* ------------------------------------
* 7. Miscellaneous
* ------------------------------------ */
/* ------------------------------------
* 8. z-index
* ------------------------------------ */
/* ------------------------------------
* Administration variables
* Table of contents
*
* 1. Primary colors
* 2. Status colors
* 3. Module colors
* 4. Generic colors
* 5. Gradients
* 6. Typography
* 7. Miscellaneous
* 8. z-index
* 9. Global widths
* ------------------------------------ */
/* ------------------------------------
* 1. Primary colors
* ------------------------------------ */
/* ------------------------------------
* 2. Status colors
* ------------------------------------ */
/* ------------------------------------
* 3. Module colors
* ------------------------------------ */
/* ------------------------------------
* 4. Generic colors
* ------------------------------------ */
/* ------------------------------------
* 5. Gradients
* ------------------------------------ */
/* ------------------------------------
* 6. Typography
* ------------------------------------ */
/* ------------------------------------
* 7. Miscellaneous
* ------------------------------------ */
/* ------------------------------------
* 8. z-index
* ------------------------------------ */
:root {
--color-interaction-primary-default: #0870ff;
--color-interaction-primary-hover: #005cd7;
--color-interaction-primary-pressed: #0042a0;
--color-interaction-primary-disabled: #76aaff;
--color-interaction-secondary-default: #ffffff;
--color-interaction-secondary-hover: #f2f3f8;
--color-interaction-secondary-pressed: #e2e3e9;
--color-interaction-secondary-disabled: #e2e3e9;
--color-interaction-secondary-dark: #f2f3f8;
--color-interaction-critical-default: #e2262a;
--color-interaction-critical-hover: #c20017;
--color-interaction-critical-pressed: #90000e;
--color-interaction-critical-disabled: #ffa9a0;
--color-elevation-surface-sunken: #fafbfe;
--color-elevation-surface-default: #ffffff;
--color-elevation-surface-selected: #cdced4;
--color-elevation-surface-hover: #e2e3e9;
--color-elevation-surface-raised: #ffffff;
--color-elevation-surface-overlay: #ffffff;
--color-elevation-surface-frame: #fafbfe;
--color-elevation-surface-backdrop: #101013;
--color-elevation-surface-floating: #26262b;
--color-elevation-backdrop-default: #10101399;
--color-elevation-floating-default: #26262b;
--color-elevation-shadow-default: #1010131a;
--color-background-primary-default: #ffffff;
--color-background-primary-disabled: #f2f3f8;
--color-background-secondary-default: #fafbfe;
--color-background-tertiary-default: #f2f3f8;
--color-background-brand-default: #f0f6ff;
--color-background-critical-default: #fff2f0;
--color-background-critical-dark: #fff2f0;
--color-background-attention-default: #fff3e3;
--color-background-positive-default: #e1ffe0;
--color-background-accent-default: #e4e1ff;
--color-icon-primary-default: #1e1e24;
--color-icon-primary-disabled: #b9babf;
--color-icon-primary-inverse: #fafbfe;
--color-icon-secondary-default: #696a6e;
--color-icon-secondary-disabled: #b9babf;
--color-icon-secondary-inverse: #a5a6ab;
--color-icon-brand-default: #0870ff;
--color-icon-brand-hover: #005cd7;
--color-icon-brand-pressed: #0042a0;
--color-icon-brand-disabled: #76aaff;
--color-icon-critical-default: #e2262a;
--color-icon-critical-hover: #c20017;
--color-icon-critical-disabled: #ff7f74;
--color-icon-attention-default: #fbaf18;
--color-icon-positive-default: #36d046;
--color-icon-accent-default: #633bc6;
--color-icon-static-default: #ffffff;
--color-icon-static-dark: #09090b;
--color-icon-inverse-default: #fafbfe;
--color-border-primary-default: #cdced4;
--color-border-secondary-default: #e2e3e9;
--color-border-brand-selected: #0870ff;
--color-border-brand-default: #0870ff;
--color-border-brand-disabled: #76aaff;
--color-border-critical-default: #e2262a;
--color-border-critical-dark: #5e0006;
--color-border-critical-disabled: #ff7f74;
--color-border-attention-default: #fbaf18;
--color-border-positive-default: #36d046;
--color-border-accent-default: #a694ff;
--color-text-primary-default: #1e1e24;
--color-text-primary-disabled: #b9babf;
--color-text-primary-inverse: #fafbfe;
--color-text-secondary-default: #696a6e;
--color-text-secondary-disabled: #b9babf;
--color-text-secondary-inverse: #a5a6ab;
--color-text-tertiary-default: #696a6e;
--color-text-brand-default: #0870ff;
--color-text-brand-hover: #005cd7;
--color-text-brand-pressed: #0042a0;
--color-text-brand-disabled: #76aaff;
--color-text-brand-inverse: #4a8fff;
--color-text-critical-default: #e2262a;
--color-text-critical-hover: #c20017;
--color-text-critical-pressed: #90000e;
--color-text-critical-disabled: #ff7f74;
--color-text-critical-dark: #e2262a;
--color-text-attention-default: #533600;
--color-text-positive-default: #00470a;
--color-text-accent-default: #633bc6;
--color-text-static-default: #ffffff;
--color-text-static-dark: #09090b;
--color-text-inverse-default: #fafbfe;
--color-static-white: #ffffff;
--color-static-black: #09090b;
--font-family-headings: 'Inter';
--font-family-body: 'Inter';
--font-size-2xs: 0.75rem;
--font-size-xs: 0.875rem;
--font-size-s: 1rem;
--font-size-m: 1.125rem;
--font-size-l: 1.25rem;
--font-size-xl: 1.5rem;
--font-size-2xl: 1.75rem;
--font-size-3xl: 2rem;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-line-height-2xs: 1.125rem;
--font-line-height-xs: 1.375rem;
--font-line-height-s: 1.625rem;
--font-line-height-m: 1.75rem;
--font-line-height-l: 1.875rem;
--font-line-height-xl: 2rem;
--font-line-height-2xl: 2.25rem;
--font-line-height-3xl: 2.5rem;
--border-radius-card: 0.5rem;
--border-radius-overlay: 0.25rem;
--border-radius-button: 0.25rem;
--border-radius-checkbox: 0.25rem;
--border-radius-none: 0rem;
--border-radius-2xs: 0.125rem;
--border-radius-xs: 0.25rem;
--border-radius-s: 0.375rem;
--border-radius-m: 0.5rem;
--border-radius-l: 0.75rem;
--border-radius-xl: 1rem;
--border-radius-2xl: 1.25rem;
--border-radius-3xl: 1.5rem;
--border-radius-4xl: 2rem;
--border-radius-round: 624.9375rem;
}
[data-theme='dark'] {
--color-interaction-primary-default: #0870ff;
--color-interaction-primary-hover: #005cd7;
--color-interaction-primary-pressed: #0042a0;
--color-interaction-primary-disabled: #00296a;
--color-interaction-secondary-default: #1e1e24;
--color-interaction-secondary-hover: #26262b;
--color-interaction-secondary-pressed: #2d2e32;
--color-interaction-secondary-disabled: #3d3e42;
--color-interaction-secondary-dark: #2d2e32;
--color-interaction-critical-default: #e2262a;
--color-interaction-critical-hover: #c20017;
--color-interaction-critical-pressed: #90000e;
--color-interaction-critical-disabled: #5e0006;
--color-elevation-surface-sunken: #09090b;
--color-elevation-surface-default: #101013;
--color-elevation-surface-selected: #2d2e32;
--color-elevation-surface-hover: #3d3e42;
--color-elevation-surface-raised: #141418;
--color-elevation-surface-overlay: #26262b;
--color-elevation-surface-frame: #1e1e24;
--color-elevation-surface-backdrop: #101013;
--color-elevation-surface-floating: #ffffff;
--color-elevation-backdrop-default: #10101399;
--color-elevation-floating-default: #ffffff;
--color-elevation-shadow-default: #1010131a;
--color-background-primary-default: #1e1e24;
--color-background-primary-disabled: #2d2e32;
--color-background-secondary-default: #26262b;
--color-background-tertiary-default: #2d2e32;
--color-background-brand-default: #00153e;
--color-background-critical-default: #360002;
--color-background-critical-dark: #360002;
--color-background-attention-default: #241500;
--color-background-positive-default: #002002;
--color-background-accent-default: #1c0049;
--color-icon-primary-default: #fafbfe;
--color-icon-primary-disabled: #696a6e;
--color-icon-primary-inverse: #1e1e24;
--color-icon-secondary-default: #a5a6ab;
--color-icon-secondary-disabled: #696a6e;
--color-icon-secondary-inverse: #696a6e;
--color-icon-brand-default: #0870ff;
--color-icon-brand-hover: #005cd7;
--color-icon-brand-pressed: #0042a0;
--color-icon-brand-disabled: #0042a0;
--color-icon-critical-default: #e2262a;
--color-icon-critical-hover: #c20017;
--color-icon-critical-disabled: #5e0006;
--color-icon-attention-default: #ffbc51;
--color-icon-positive-default: #4dde58;
--color-icon-accent-default: #b5a8ff;
--color-icon-static-default: #ffffff;
--color-icon-static-dark: #09090b;
--color-icon-inverse-default: #1e1e24;
--color-border-primary-default: #3d3e42;
--color-border-secondary-default: #26262b;
--color-border-brand-selected: #0870ff;
--color-border-brand-default: #0870ff;
--color-border-brand-disabled: #0042a0;
--color-border-critical-default: #e2262a;
--color-border-critical-dark: #5e0006;
--color-border-critical-disabled: #90000e;
--color-border-attention-default: #cc8c00;
--color-border-positive-default: #00ab26;
--color-border-accent-default: #886fe9;
--color-text-primary-default: #fafbfe;
--color-text-primary-disabled: #696a6e;
--color-text-primary-inverse: #1e1e24;
--color-text-secondary-default: #a5a6ab;
--color-text-secondary-disabled: #696a6e;
--color-text-secondary-inverse: #696a6e;
--color-text-tertiary-default: #a5a6ab;
--color-text-brand-default: #4a8fff;
--color-text-brand-hover: #0870ff;
--color-text-brand-pressed: #005cd7;
--color-text-brand-disabled: #0042a0;
--color-text-brand-inverse: #0870ff;
--color-text-critical-default: #fc4945;
--color-text-critical-hover: #e2262a;
--color-text-critical-pressed: #c20017;
--color-text-critical-disabled: #90000e;
--color-text-critical-dark: #fc4945;
--color-text-attention-default: #fff3e3;
--color-text-positive-default: #e1ffe0;
--color-text-accent-default: #b5a8ff;
--color-text-static-default: #ffffff;
--color-text-static-dark: #09090b;
--color-text-inverse-default: #1e1e24;
--color-static-white: #ffffff;
--color-static-black: #09090b;
--font-family-headings: 'Inter';
--font-family-body: 'Inter';
--font-size-2xs: 0.75rem;
--font-size-xs: 0.875rem;
--font-size-s: 1rem;
--font-size-m: 1.125rem;
--font-size-l: 1.25rem;
--font-size-xl: 1.5rem;
--font-size-2xl: 1.75rem;
--font-size-3xl: 2rem;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-line-height-2xs: 1.125rem;
--font-line-height-xs: 1.375rem;
--font-line-height-s: 1.625rem;
--font-line-height-m: 1.75rem;
--font-line-height-l: 1.875rem;
--font-line-height-xl: 2rem;
--font-line-height-2xl: 2.25rem;
--font-line-height-3xl: 2.5rem;
--border-radius-card: 0.5rem;
--border-radius-overlay: 0.25rem;
--border-radius-button: 0.25rem;
--border-radius-checkbox: 0.25rem;
--border-radius-none: 0rem;
--border-radius-2xs: 0.125rem;
--border-radius-xs: 0.25rem;
--border-radius-s: 0.375rem;
--border-radius-m: 0.5rem;
--border-radius-l: 0.75rem;
--border-radius-xl: 1rem;
--border-radius-2xl: 1.25rem;
--border-radius-3xl: 1.5rem;
--border-radius-4xl: 2rem;
--border-radius-round: 624.9375rem;
}
:root {
--color-slate-50: #fafbfe;
--color-slate-100: #f0f3ff;
--color-slate-200: #e0e3f3;
--color-slate-300: #cbcede;
--color-slate-400: #b6b9c9;
--color-slate-500: #a3a6b5;
--color-slate-600: #808392;
--color-slate-700: #666977;
--color-slate-800: #474a57;
--color-slate-900: #2b2e3a;
--color-slate-950: #12141e;
--color-blue-50: #eef6ff;
--color-blue-100: #cce5ff;
--color-blue-200: #a8d4ff;
--color-blue-300: #83c3ff;
--color-blue-400: #59b1ff;
--color-blue-500: #189eff;
--color-blue-600: #0081d4;
--color-blue-700: #005b99;
--color-blue-800: #00375f;
--color-blue-900: #001931;
--color-yellow-50: #fffef7;
--color-yellow-100: #fff7d6;
--color-yellow-200: #ffefb3;
--color-yellow-300: #ffe88e;
--color-yellow-400: #ffe061;
--color-yellow-500: #ffd702;
--color-yellow-600: #cdac00;
--color-yellow-700: #8d7600;
--color-yellow-800: #4f4100;
--color-yellow-900: #1e1800;
--color-pumpkin-50: #fff2ec;
--color-pumpkin-100: #ffddcc;
--color-pumpkin-200: #ffc7aa;
--color-pumpkin-300: #ffb086;
--color-pumpkin-400: #ff985e;
--color-pumpkin-500: #f88138;
--color-pumpkin-600: #d46000;
--color-pumpkin-700: #974200;
--color-pumpkin-800: #5c2600;
--color-pumpkin-900: #2c0e00;
--color-pink-50: #fff1f5;
--color-pink-100: #ffd8e4;
--color-pink-200: #ffbed3;
--color-pink-300: #ffa2c2;
--color-pink-400: #ff83b1;
--color-pink-500: #ff5ea1;
--color-pink-600: #e42683;
--color-pink-700: #a8005c;
--color-pink-800: #670036;
--color-pink-900: #340018;
--color-purple-50: #f5f4ff;
--color-purple-100: #e4e1ff;
--color-purple-200: #d4ceff;
--color-purple-300: #c4bbff;
--color-purple-400: #b5a8ff;
--color-purple-500: #a694ff;
--color-purple-600: #886fe9;
--color-purple-700: #633bc6;
--color-purple-800: #3e0091;
--color-purple-900: #1c0049;
--color-emerald-50: #ddffea;
--color-emerald-100: #aeffd0;
--color-emerald-200: #80fbba;
--color-emerald-300: #74f0af;
--color-emerald-400: #67e4a4;
--color-emerald-500: #57d998;
--color-emerald-600: #00b472;
--color-emerald-700: #007e4e;
--color-emerald-800: #00492b;
--color-emerald-900: #001f0f;
--color-zinc-0: #ffffff;
--color-zinc-50: #fafbfe;
--color-zinc-75: #f2f3f8;
--color-zinc-100: #e2e3e9;
--color-zinc-200: #cdced4;
--color-zinc-300: #b9babf;
--color-zinc-400: #a5a6ab;
--color-zinc-500: #838489;
--color-zinc-600: #696a6e;
--color-zinc-700: #3d3e42;
--color-zinc-800: #2d2e32;
--color-zinc-850: #26262b;
--color-zinc-900: #1e1e24;
--color-zinc-950: #141418;
--color-zinc-975: #101013;
--color-zinc-1000: #09090b;
--color-orange-50: #fff3e3;
--color-orange-100: #ffe6c4;
--color-orange-200: #ffd9a2;
--color-orange-300: #ffcb7e;
--color-orange-400: #ffbc51;
--color-orange-500: #fbaf18;
--color-orange-600: #cc8c00;
--color-orange-700: #8f6000;
--color-orange-800: #533600;
--color-orange-900: #241500;
--color-green-50: #e1ffe0;
--color-green-100: #b0fbb0;
--color-green-200: #86f98c;
--color-green-300: #73f27a;
--color-green-400: #4dde58;
--color-green-500: #36d046;
--color-green-600: #00ab26;
--color-green-700: #007818;
--color-green-800: #00470a;
--color-green-900: #002002;
--color-red-50: #fff2f0;
--color-red-100: #ffcfc9;
--color-red-200: #ffa9a0;
--color-red-300: #ff7f74;
--color-red-400: #fc4945;
--color-red-500: #e2262a;
--color-red-600: #c20017;
--color-red-700: #90000e;
--color-red-800: #5e0006;
--color-red-900: #360002;
--color-brand-50: #f0f6ff;
--color-brand-100: #c8ddff;
--color-brand-200: #9fc4ff;
--color-brand-300: #76aaff;
--color-brand-400: #4a8fff;
--color-brand-500: #0870ff;
--color-brand-600: #005cd7;
--color-brand-700: #0042a0;
--color-brand-800: #00296a;
--color-brand-900: #00153e;
--color-brand-950: #000c2b;
--color-cyan-50: #e8f8ff;
--color-cyan-100: #c3eeff;
--color-cyan-200: #9ce4ff;
--color-cyan-300: #79dbff;
--color-cyan-400: #4ad0fc;
--color-cyan-500: #2fc3f0;
--color-cyan-600: #009ac0;
--color-cyan-700: #006c88;
--color-cyan-800: #004051;
--color-cyan-900: #001c26;
--font-weight-100: 100;
--font-weight-200: 200;
--font-weight-300: 300;
--font-weight-400: 400;
--font-weight-500: 500;
--font-weight-600: 600;
--font-weight-700: 700;
--font-weight-800: 800;
--font-weight-900: 900;
--scale-size-0: 0rem;
--scale-size-1: 0.0625rem;
--scale-size-2: 0.125rem;
--scale-size-4: 0.25rem;
--scale-size-6: 0.375rem;
--scale-size-8: 0.5rem;
--scale-size-10: 0.625rem;
--scale-size-12: 0.75rem;
--scale-size-14: 0.875rem;
--scale-size-16: 1rem;
--scale-size-18: 1.125rem;
--scale-size-20: 1.25rem;
--scale-size-22: 1.375rem;
--scale-size-24: 1.5rem;
--scale-size-26: 1.625rem;
--scale-size-28: 1.75rem;
--scale-size-30: 1.875rem;
--scale-size-32: 2rem;
--scale-size-36: 2.25rem;
--scale-size-40: 2.5rem;
--scale-size-48: 3rem;
--scale-size-56: 3.5rem;
--scale-size-64: 4rem;
--scale-size-72: 4.5rem;
--scale-size-80: 5rem;
--scale-size-96: 6rem;
--scale-size-128: 8rem;
--scale-size-160: 10rem;
--scale-size-192: 12rem;
--scale-size-224: 14rem;
--scale-size-256: 16rem;
--scale-size-9999: 624.9375rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--color-text-primary-default);
font-weight: var(--font-weight-semibold);
margin-block-end: var(--scale-size-20);
}
p {
color: var(--color-text-primary-default);
}
/* ------------------------------------
* Administration variables
* Table of contents
*
* 1. Primary colors
* 2. Status colors
* 3. Module colors
* 4. Generic colors
* 5. Gradients
* 6. Typography
* 7. Miscellaneous
* 8. z-index
* 9. Global widths
* ------------------------------------ */
/* ------------------------------------
* 1. Primary colors
* ------------------------------------ */
/* ------------------------------------
* 2. Status colors
* ------------------------------------ */
/* ------------------------------------
* 3. Module colors
* ------------------------------------ */
/* ------------------------------------
* 4. Generic colors
* ------------------------------------ */
/* ------------------------------------
* 5. Gradients
* ------------------------------------ */
/* ------------------------------------
* 6. Typography
* ------------------------------------ */
/* ------------------------------------
* 7. Miscellaneous
* ------------------------------------ */
/* ------------------------------------
* 8. z-index
* ------------------------------------ */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
[data-theme=dark] {
color-scheme: dark;
}
body {
font-family: "Inter", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
font-size: 16px;
color: #303a4f;
background: #f9fafb;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@supports (font-variation-settings: normal) {
body {
font-family: "Inter var", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
font-feature-settings: "cv10" on, "cv05" on, "cv02" on, "cv07" on, "cv09" on, "cv04" on, "cv03" on;
}
}
.mt-drag-select-box {
position: absolute;
background: rgba(0, 162, 255, 0.4);
z-index: 100;
}
.link {
display: inline-block;
color: #189eff;
}
/* style inline external links */
a[target=_blank]:not(.mt-internal-link,
.mt-link--external,
.mt-link--internal,
.mt-button,
.mt-action-menu-item) {
display: inline-block;
position: relative;
color: var(--color-text-brand-default);
font-size: inherit;
text-decoration: underline;
cursor: pointer;
word-break: break-word;
}
a[target=_blank]:not(.mt-internal-link,
.mt-link--external,
.mt-link--internal,
.mt-button,
.mt-action-menu-item)::after {
content: "";
display: inline-block;
width: 0.715em;
height: 0.715em;
position: relative;
margin-left: 0.285em;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23758CA3' fill-rule='evenodd' d='M12.5857864,2 L10,2 C9.44771525,2 9,1.55228475 9,1 C9,0.44771525 9.44771525,0 10,0 L15,0 C15.5522847,0 16,0.44771525 16,1 L16,6 C16,6.55228475 15.5522847,7 15,7 C14.4477153,7 14,6.55228475 14,6 L14,3.41421356 L7.20710678,10.2071068 C6.81658249,10.5976311 6.18341751,10.5976311 5.79289322,10.2071068 C5.40236893,9.81658249 5.40236893,9.18341751 5.79289322,8.79289322 L12.5857864,2 Z M6,1 C6.55228475,1 7,1.44771525 7,2 C7,2.55228475 6.55228475,3 6,3 L3,3 C2.44771525,3 2,3.44771525 2,4 L2,13 C2,13.5522847 2.44771525,14 3,14 L11.9673236,14 C12.5153749,14 12.9613171,13.5588713 12.9672647,13.0108522 L13.0000589,9.98914776 C13.0060524,9.43689554 13.4586,8.99406536 14.0108522,9.00005889 C14.5631045,9.00605241 15.0059346,9.45860001 14.9999411,10.0108522 L14.9671469,13.0325567 C14.9493042,14.6766139 13.6114776,16 11.9673236,16 L3,16 C1.34314575,16 -2.77555756e-16,14.6568542 -4.4408921e-16,13 L0,4 C-1.66533454e-16,2.34314575 1.34314575,1 3,1 L6,1 Z'/%3E%3C/svg%3E%0A");
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 0.715em 0.715em;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23758CA3' fill-rule='evenodd' d='M12.5857864,2 L10,2 C9.44771525,2 9,1.55228475 9,1 C9,0.44771525 9.44771525,0 10,0 L15,0 C15.5522847,0 16,0.44771525 16,1 L16,6 C16,6.55228475 15.5522847,7 15,7 C14.4477153,7 14,6.55228475 14,6 L14,3.41421356 L7.20710678,10.2071068 C6.81658249,10.5976311 6.18341751,10.5976311 5.79289322,10.2071068 C5.40236893,9.81658249 5.40236893,9.18341751 5.79289322,8.79289322 L12.5857864,2 Z M6,1 C6.55228475,1 7,1.44771525 7,2 C7,2.55228475 6.55228475,3 6,3 L3,3 C2.44771525,3 2,3.44771525 2,4 L2,13 C2,13.5522847 2.44771525,14 3,14 L11.9673236,14 C12.5153749,14 12.9613171,13.5588713 12.9672647,13.0108522 L13.0000589,9.98914776 C13.0060524,9.43689554 13.4586,8.99406536 14.0108522,9.00005889 C14.5631045,9.00605241 15.0059346,9.45860001 14.9999411,10.0108522 L14.9671469,13.0325567 C14.9493042,14.6766139 13.6114776,16 11.9673236,16 L3,16 C1.34314575,16 -2.77555756e-16,14.6568542 -4.4408921e-16,13 L0,4 C-1.66533454e-16,2.34314575 1.34314575,1 3,1 L6,1 Z'/%3E%3C/svg%3E%0A");
mask-repeat: no-repeat;
mask-size: 0.715em 0.715em;
background-color: #189eff;
}
button {
appearance: none;
padding: 0;
border: none;
font: inherit;
color: inherit;
background: none;
cursor: pointer;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
:root {
--color-elevation-shadow-default: #1010131a ;
}
@keyframes ellipsis {
to {
width: 1.25rem;
}
}
.mt-tooltip {
position: absolute;
z-index: 1100;
}
.mt-tooltip--dark {
background-color: var(--color-elevation-floating-default);
border-radius: var(--border-radius-xs);
color: var(--color-text-primary-inverse);
padding: 12px 16px;
font-size: var(--font-size-xs);
line-height: var(--font-line-height-xs);
font-family: var(--font-family-body);
word-wrap: break-word;
&::before {
content: "";
position: absolute;
height: 8px;
width: 8px;
transform: rotate(45deg);
background: var(--color-elevation-floating-default);
}
&.mt-tooltip--top::before {
bottom: -4px;
margin-left: -4px;
left: 50%;
}
&.mt-tooltip--bottom::before {
top: -4px;
margin-left: -4px;
left: 50%;
}
&.mt-tooltip--left::before {
top: 50%;
margin-top: -4px;
right: -4px;
}
&.mt-tooltip--right::before {
top: 50%;
margin-top: -4px;
left: -4px;
}
}
.mt-tooltip--light {
color: #52667a;
font-size: 12px;
font-weight: lighter;
letter-spacing: 0;
line-height: 19px;
width: auto ;
height: auto ;
padding: 5px 10px;
background: #fff;
border: 1px solid #d1d9e0;
box-shadow: 0 3px 6px 0 rgba(120, 138, 155, 0.5);
border-radius: 4px;
&.mt-tooltip--top {
margin-top: 6px;
}
&.mt-tooltip--bottom {
margin-top: -4px;
}
&.mt-tooltip--left {
margin-left: 5px;
}
&.mt-tooltip--right {
margin-right: -5px;
}
}
/* ------------------------------------
* Administration variables
* Table of contents
*
* 1. Primary colors
* 2. Status colors
* 3. Module colors
* 4. Generic colors
* 5. Gradients
* 6. Typography
* 7. Miscellaneous
* 8. z-index
* 9. Global widths
* ------------------------------------ */
/* ------------------------------------
* 1. Primary colors
* ------------------------------------ */
/* ------------------------------------
* 2. Status colors
* ------------------------------------ */
/* ------------------------------------
* 3. Module colors
* ------------------------------------ */
/* ------------------------------------
* 4. Generic colors
* ------------------------------------ */
/* ------------------------------------
* 5. Gradients
* ------------------------------------ */
/* ------------------------------------
* 6. Typography
* ------------------------------------ */
/* ------------------------------------
* 7. Miscellaneous
* ------------------------------------ */
/* ------------------------------------
* 8. z-index
* ------------------------------------ */
.is--drag-element {
position: absolute;
pointer-events: none;
touch-action: none;
user-focus: none;
user-select: none;
z-index: 1400;
box-shadow: 0 0 4px 0 #189eff;
overflow: hidden;
cursor: grab;
}
.is--drag-element > * {
user-focus: none;
user-select: none;
user-input: none;
user-modify: none;
pointer-events: none;
touch-action: none;
-webkit-user-drag: none;
}
.is--drag-element.is--valid-drag {
box-shadow: 0 0 4px 0 #37d046;
}
.is--drag-element.is--invalid-drag {
box-shadow: 0 0 4px 0 #de294c;
}
.is--draggable {
user-focus: none;
user-select: none;
cursor: grab;
}
.is--draggable img {
user-focus: none;
user-select: none;
user-input: none;
user-modify: none;
pointer-events: none;
touch-action: none;
-webkit-user-drag: none;
}
.is--dragging {
background: #f0f2f5;
border: 1px dashed #d1d9e0;
box-shadow: none;
color: #f0f2f5;
cursor: grab;
}
.is--dragging > * {
opacity: 0;
}