| /* |
| * Licensed to the Apache Software Foundation (ASF) under one |
| * or more contributor license agreements. See the NOTICE file |
| * distributed with this work for additional information |
| * regarding copyright ownership. The ASF licenses this file |
| * to you under the Apache License, Version 2.0 (the |
| * "License"); you may not use this file except in compliance |
| * with the License. You may obtain a copy of the License at |
| * |
| * https://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, |
| * software distributed under the License is distributed on an |
| * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| * KIND, either express or implied. See the License for the |
| * specific language governing permissions and limitations |
| * under the License. |
| */ |
| |
| $blue: var(--blue); |
| $purple: var(--purple); |
| $cyan: var(--cyan); |
| $green: var(--green); |
| $magenta: var(--magenta); |
| $pink: var(--pink); |
| $red: var(--red); |
| $orange: var(--orange); |
| $yellow: var(--yellow); |
| $volcano: var(--volcano); |
| $geekblue: var(--geekblue); |
| $gold: var(--gold); |
| $lime: var(--lime); |
| $color-primary: var(--color-primary); |
| $color-success: var(--color-success); |
| $color-warning: var(--color-warning); |
| $color-error: var(--color-error); |
| $color-info: var(--color-info); |
| $color-text-base: var(--color-text-base); |
| $color-bg-base: var(--color-bg-base); |
| $font-family: var(--font-family); |
| $font-size: var(--font-size); |
| $line-width: var(--line-width); |
| $line-type: var(--line-type); |
| $motion-unit: var(--motion-unit); |
| $motion-base: var(--motion-base); |
| $motion-ease-out-circ: var(--motion-ease-out-circ); |
| $motion-ease-in-out-circ: var(--motion-ease-in-out-circ); |
| $motion-ease-out: var(--motion-ease-out); |
| $motion-ease-in-out: var(--motion-ease-in-out); |
| $motion-ease-out-back: var(--motion-ease-out-back); |
| $motion-ease-in-back: var(--motion-ease-in-back); |
| $motion-ease-in-quint: var(--motion-ease-in-quint); |
| $motion-ease-out-quint: var(--motion-ease-out-quint); |
| $border-radius: var(--border-radius); |
| $size-unit: var(--size-unit); |
| $size-step: var(--size-step); |
| $size-popup-arrow: var(--size-popup-arrow); |
| $control-height: var(--control-height); |
| $z-index-base: var(--z-index-base); |
| $z-index-popup-base: var(--z-index-popup-base); |
| $opacity-image: var(--opacity-image); |
| $wireframe: var(--wireframe); |
| $blue-1: var(--blue-1); |
| $blue-2: var(--blue-2); |
| $blue-3: var(--blue-3); |
| $blue-4: var(--blue-4); |
| $blue-5: var(--blue-5); |
| $blue-6: var(--blue-6); |
| $blue-7: var(--blue-7); |
| $blue-8: var(--blue-8); |
| $blue-9: var(--blue-9); |
| $blue-10: var(--blue-10); |
| $purple-1: var(--purple-1); |
| $purple-2: var(--purple-2); |
| $purple-3: var(--purple-3); |
| $purple-4: var(--purple-4); |
| $purple-5: var(--purple-5); |
| $purple-6: var(--purple-6); |
| $purple-7: var(--purple-7); |
| $purple-8: var(--purple-8); |
| $purple-9: var(--purple-9); |
| $purple-10: var(--purple-10); |
| $cyan-1: var(--cyan-1); |
| $cyan-2: var(--cyan-2); |
| $cyan-3: var(--cyan-3); |
| $cyan-4: var(--cyan-4); |
| $cyan-5: var(--cyan-5); |
| $cyan-6: var(--cyan-6); |
| $cyan-7: var(--cyan-7); |
| $cyan-8: var(--cyan-8); |
| $cyan-9: var(--cyan-9); |
| $cyan-10: var(--cyan-10); |
| $green-1: var(--green-1); |
| $green-2: var(--green-2); |
| $green-3: var(--green-3); |
| $green-4: var(--green-4); |
| $green-5: var(--green-5); |
| $green-6: var(--green-6); |
| $green-7: var(--green-7); |
| $green-8: var(--green-8); |
| $green-9: var(--green-9); |
| $green-10: var(--green-10); |
| $magenta-1: var(--magenta-1); |
| $magenta-2: var(--magenta-2); |
| $magenta-3: var(--magenta-3); |
| $magenta-4: var(--magenta-4); |
| $magenta-5: var(--magenta-5); |
| $magenta-6: var(--magenta-6); |
| $magenta-7: var(--magenta-7); |
| $magenta-8: var(--magenta-8); |
| $magenta-9: var(--magenta-9); |
| $magenta-10: var(--magenta-10); |
| $pink-1: var(--pink-1); |
| $pink-2: var(--pink-2); |
| $pink-3: var(--pink-3); |
| $pink-4: var(--pink-4); |
| $pink-5: var(--pink-5); |
| $pink-6: var(--pink-6); |
| $pink-7: var(--pink-7); |
| $pink-8: var(--pink-8); |
| $pink-9: var(--pink-9); |
| $pink-10: var(--pink-10); |
| $red-1: var(--red-1); |
| $red-2: var(--red-2); |
| $red-3: var(--red-3); |
| $red-4: var(--red-4); |
| $red-5: var(--red-5); |
| $red-6: var(--red-6); |
| $red-7: var(--red-7); |
| $red-8: var(--red-8); |
| $red-9: var(--red-9); |
| $red-10: var(--red-10); |
| $orange-1: var(--orange-1); |
| $orange-2: var(--orange-2); |
| $orange-3: var(--orange-3); |
| $orange-4: var(--orange-4); |
| $orange-5: var(--orange-5); |
| $orange-6: var(--orange-6); |
| $orange-7: var(--orange-7); |
| $orange-8: var(--orange-8); |
| $orange-9: var(--orange-9); |
| $orange-10: var(--orange-10); |
| $yellow-1: var(--yellow-1); |
| $yellow-2: var(--yellow-2); |
| $yellow-3: var(--yellow-3); |
| $yellow-4: var(--yellow-4); |
| $yellow-5: var(--yellow-5); |
| $yellow-6: var(--yellow-6); |
| $yellow-7: var(--yellow-7); |
| $yellow-8: var(--yellow-8); |
| $yellow-9: var(--yellow-9); |
| $yellow-10: var(--yellow-10); |
| $volcano-1: var(--volcano-1); |
| $volcano-2: var(--volcano-2); |
| $volcano-3: var(--volcano-3); |
| $volcano-4: var(--volcano-4); |
| $volcano-5: var(--volcano-5); |
| $volcano-6: var(--volcano-6); |
| $volcano-7: var(--volcano-7); |
| $volcano-8: var(--volcano-8); |
| $volcano-9: var(--volcano-9); |
| $volcano-10: var(--volcano-10); |
| $geekblue-1: var(--geekblue-1); |
| $geekblue-2: var(--geekblue-2); |
| $geekblue-3: var(--geekblue-3); |
| $geekblue-4: var(--geekblue-4); |
| $geekblue-5: var(--geekblue-5); |
| $geekblue-6: var(--geekblue-6); |
| $geekblue-7: var(--geekblue-7); |
| $geekblue-8: var(--geekblue-8); |
| $geekblue-9: var(--geekblue-9); |
| $geekblue-10: var(--geekblue-10); |
| $gold-1: var(--gold-1); |
| $gold-2: var(--gold-2); |
| $gold-3: var(--gold-3); |
| $gold-4: var(--gold-4); |
| $gold-5: var(--gold-5); |
| $gold-6: var(--gold-6); |
| $gold-7: var(--gold-7); |
| $gold-8: var(--gold-8); |
| $gold-9: var(--gold-9); |
| $gold-10: var(--gold-10); |
| $lime-1: var(--lime-1); |
| $lime-2: var(--lime-2); |
| $lime-3: var(--lime-3); |
| $lime-4: var(--lime-4); |
| $lime-5: var(--lime-5); |
| $lime-6: var(--lime-6); |
| $lime-7: var(--lime-7); |
| $lime-8: var(--lime-8); |
| $lime-9: var(--lime-9); |
| $lime-10: var(--lime-10); |
| $color-text: var(--color-text); |
| $color-text-secondary: var(--color-text-secondary); |
| $color-text-tertiary: var(--color-text-tertiary); |
| $color-text-quaternary: var(--color-text-quaternary); |
| $color-fill: var(--color-fill); |
| $color-fill-secondary: var(--color-fill-secondary); |
| $color-fill-tertiary: var(--color-fill-tertiary); |
| $color-fill-quaternary: var(--color-fill-quaternary); |
| $color-bg-layout: var(--color-bg-layout); |
| $color-bg-container: var(--color-bg-container); |
| $color-bg-elevated: var(--color-bg-elevated); |
| $color-bg-spotlight: var(--color-bg-spotlight); |
| $color-border: var(--color-border); |
| $color-border-secondary: var(--color-border-secondary); |
| $color-primary-bg: var(--color-primary-bg); |
| $color-primary-bg-hover: var(--color-primary-bg-hover); |
| $color-primary-border: var(--color-primary-border); |
| $color-primary-border-hover: var(--color-primary-border-hover); |
| $color-primary-hover: var(--color-primary-hover); |
| $color-primary-active: var(--color-primary-active); |
| $color-primary-text-hover: var(--color-primary-text-hover); |
| $color-primary-text: var(--color-primary-text); |
| $color-primary-text-active: var(--color-primary-text-active); |
| $color-success-bg: var(--color-success-bg); |
| $color-success-bg-hover: var(--color-success-bg-hover); |
| $color-success-border: var(--color-success-border); |
| $color-success-border-hover: var(--color-success-border-hover); |
| $color-success-hover: var(--color-success-hover); |
| $color-success-active: var(--color-success-active); |
| $color-success-text-hover: var(--color-success-text-hover); |
| $color-success-text: var(--color-success-text); |
| $color-success-text-active: var(--color-success-text-active); |
| $color-error-bg: var(--color-error-bg); |
| $color-error-bg-hover: var(--color-error-bg-hover); |
| $color-error-border: var(--color-error-border); |
| $color-error-border-hover: var(--color-error-border-hover); |
| $color-error-hover: var(--color-error-hover); |
| $color-error-active: var(--color-error-active); |
| $color-error-text-hover: var(--color-error-text-hover); |
| $color-error-text: var(--color-error-text); |
| $color-error-text-active: var(--color-error-text-active); |
| $color-warning-bg: var(--color-warning-bg); |
| $color-warning-bg-hover: var(--color-warning-bg-hover); |
| $color-warning-border: var(--color-warning-border); |
| $color-warning-border-hover: var(--color-warning-border-hover); |
| $color-warning-hover: var(--color-warning-hover); |
| $color-warning-active: var(--color-warning-active); |
| $color-warning-text-hover: var(--color-warning-text-hover); |
| $color-warning-text: var(--color-warning-text); |
| $color-warning-text-active: var(--color-warning-text-active); |
| $color-info-bg: var(--color-info-bg); |
| $color-info-bg-hover: var(--color-info-bg-hover); |
| $color-info-border: var(--color-info-border); |
| $color-info-border-hover: var(--color-info-border-hover); |
| $color-info-hover: var(--color-info-hover); |
| $color-info-active: var(--color-info-active); |
| $color-info-text-hover: var(--color-info-text-hover); |
| $color-info-text: var(--color-info-text); |
| $color-info-text-active: var(--color-info-text-active); |
| $color-bg-mask: var(--color-bg-mask); |
| $color-white: var(--color-white); |
| $font-size-s-m: var(--font-size-s-m); |
| $font-size-l-g: var(--font-size-l-g); |
| $font-size-x-l: var(--font-size-x-l); |
| $font-size-heading1: var(--font-size-heading1); |
| $font-size-heading2: var(--font-size-heading2); |
| $font-size-heading3: var(--font-size-heading3); |
| $font-size-heading4: var(--font-size-heading4); |
| $font-size-heading5: var(--font-size-heading5); |
| $line-height: var(--line-height); |
| $line-height-l-g: var(--line-height-l-g); |
| $line-height-s-m: var(--line-height-s-m); |
| $line-height-heading1: var(--line-height-heading1); |
| $line-height-heading2: var(--line-height-heading2); |
| $line-height-heading3: var(--line-height-heading3); |
| $line-height-heading4: var(--line-height-heading4); |
| $line-height-heading5: var(--line-height-heading5); |
| $size-x-x-l: var(--size-x-x-l); |
| $size-x-l: var(--size-x-l); |
| $size-l-g: var(--size-l-g); |
| $size-m-d: var(--size-m-d); |
| $size-m-s: var(--size-m-s); |
| $size: var(--size); |
| $size-s-m: var(--size-s-m); |
| $size-x-s: var(--size-x-s); |
| $size-x-x-s: var(--size-x-x-s); |
| $control-height-s-m: var(--control-height-s-m); |
| $control-height-x-s: var(--control-height-x-s); |
| $control-height-l-g: var(--control-height-l-g); |
| $motion-duration-fast: var(--motion-duration-fast); |
| $motion-duration-mid: var(--motion-duration-mid); |
| $motion-duration-slow: var(--motion-duration-slow); |
| $line-width-bold: var(--line-width-bold); |
| $border-radius-x-s: var(--border-radius-x-s); |
| $border-radius-s-m: var(--border-radius-s-m); |
| $border-radius-l-g: var(--border-radius-l-g); |
| $border-radius-outer: var(--border-radius-outer); |
| $color-link: var(--color-link); |
| $color-link-hover: var(--color-link-hover); |
| $color-link-active: var(--color-link-active); |
| $color-fill-content: var(--color-fill-content); |
| $color-fill-content-hover: var(--color-fill-content-hover); |
| $color-fill-alter: var(--color-fill-alter); |
| $color-bg-container-disabled: var(--color-bg-container-disabled); |
| $color-border-bg: var(--color-border-bg); |
| $color-split: var(--color-split); |
| $color-text-placeholder: var(--color-text-placeholder); |
| $color-text-disabled: var(--color-text-disabled); |
| $color-text-heading: var(--color-text-heading); |
| $color-text-label: var(--color-text-label); |
| $color-text-description: var(--color-text-description); |
| $color-text-light-solid: var(--color-text-light-solid); |
| $color-highlight: var(--color-highlight); |
| $color-bg-text-hover: var(--color-bg-text-hover); |
| $color-bg-text-active: var(--color-bg-text-active); |
| $color-icon: var(--color-icon); |
| $color-icon-hover: var(--color-icon-hover); |
| $color-error-outline: var(--color-error-outline); |
| $color-warning-outline: var(--color-warning-outline); |
| $font-size-icon: var(--font-size-icon); |
| $control-outline-width: var(--control-outline-width); |
| $control-interactive-size: var(--control-interactive-size); |
| $control-item-bg-hover: var(--control-item-bg-hover); |
| $control-item-bg-active: var(--control-item-bg-active); |
| $control-item-bg-active-hover: var(--control-item-bg-active-hover); |
| $control-item-bg-active-disabled: var(--control-item-bg-active-disabled); |
| $control-tmp-outline: var(--control-tmp-outline); |
| $control-outline: var(--control-outline); |
| $font-weight-strong: var(--font-weight-strong); |
| $opacity-loading: var(--opacity-loading); |
| $link-decoration: var(--link-decoration); |
| $link-hover-decoration: var(--link-hover-decoration); |
| $link-focus-decoration: var(--link-focus-decoration); |
| $control-padding-horizontal: var(--control-padding-horizontal); |
| $control-padding-horizontal-s-m: var(--control-padding-horizontal-s-m); |
| $padding-x-x-s: var(--padding-x-x-s); |
| $padding-x-s: var(--padding-x-s); |
| $padding-s-m: var(--padding-s-m); |
| $padding: var(--padding); |
| $padding-m-d: var(--padding-m-d); |
| $padding-l-g: var(--padding-l-g); |
| $padding-x-l: var(--padding-x-l); |
| $padding-content-horizontal-l-g: var(--padding-content-horizontal-l-g); |
| $padding-content-vertical-l-g: var(--padding-content-vertical-l-g); |
| $padding-content-horizontal: var(--padding-content-horizontal); |
| $padding-content-vertical: var(--padding-content-vertical); |
| $padding-content-horizontal-s-m: var(--padding-content-horizontal-s-m); |
| $padding-content-vertical-s-m: var(--padding-content-vertical-s-m); |
| $margin-x-x-s: var(--margin-x-x-s); |
| $margin-x-s: var(--margin-x-s); |
| $margin-s-m: var(--margin-s-m); |
| $margin: var(--margin); |
| $margin-m-d: var(--margin-m-d); |
| $margin-l-g: var(--margin-l-g); |
| $margin-x-l: var(--margin-x-l); |
| $margin-x-x-l: var(--margin-x-x-l); |
| $box-shadow: var(--box-shadow); |
| $box-shadow-secondary: var(--box-shadow-secondary); |
| $box-shadow-tertiary: var(--box-shadow-tertiary); |
| $screen-x-s: var(--screen-x-s); |
| $screen-x-s-min: var(--screen-x-s-min); |
| $screen-x-s-max: var(--screen-x-s-max); |
| $screen-s-m: var(--screen-s-m); |
| $screen-s-m-min: var(--screen-s-m-min); |
| $screen-s-m-max: var(--screen-s-m-max); |
| $screen-m-d: var(--screen-m-d); |
| $screen-m-d-min: var(--screen-m-d-min); |
| $screen-m-d-max: var(--screen-m-d-max); |
| $screen-l-g: var(--screen-l-g); |
| $screen-l-g-min: var(--screen-l-g-min); |
| $screen-l-g-max: var(--screen-l-g-max); |
| $screen-x-l: var(--screen-x-l); |
| $screen-x-l-min: var(--screen-x-l-min); |
| $screen-x-l-max: var(--screen-x-l-max); |
| $screen-x-x-l: var(--screen-x-x-l); |
| $screen-x-x-l-min: var(--screen-x-x-l-min); |
| $screen-x-x-l-max: var(--screen-x-x-l-max); |
| $screen-x-x-x-l: var(--screen-x-x-x-l); |
| $screen-x-x-x-l-min: var(--screen-x-x-x-l-min); |
| $box-shadow-popover-arrow: var(--box-shadow-popover-arrow); |
| $box-shadow-card: var(--box-shadow-card); |
| $box-shadow-drawer-right: var(--box-shadow-drawer-right); |
| $box-shadow-drawer-left: var(--box-shadow-drawer-left); |
| $box-shadow-drawer-up: var(--box-shadow-drawer-up); |
| $box-shadow-drawer-down: var(--box-shadow-drawer-down); |
| $box-shadow-tabs-overflow-left: var(--box-shadow-tabs-overflow-left); |
| $box-shadow-tabs-overflow-right: var(--box-shadow-tabs-overflow-right); |
| $box-shadow-tabs-overflow-top: var(--box-shadow-tabs-overflow-top); |
| $box-shadow-tabs-overflow-bottom: var(--box-shadow-tabs-overflow-bottom); |
| $_token-key: var(--_token-key); |
| $_hash-id: var(--_hash-id); |
| |
| // margin |
| $space-lg: 24px; |
| $space-md: 16px; |
| $space-sm: 8px; |
| |
| // radius |
| $border-radius-sm: 8px; |
| |
| // border |
| $color-border: #e5e5e5; |
| |
| // scrollbar |
| $scrollbar-bg-color: #c1c1c1; |
| $scrollbar-track-shadow: inset 0 0 2px #b18933; |
| |
| $layout-header-height: 64px; |
| $layout-sider-width: 200px; |
| $layout-sider-bg-color: $color-bg-base; |
| |
| @mixin flexbox($direction: null, $wrap: null, $justify: null, $align: null, $gap: null) { |
| display: flex; |
| flex-direction: $direction; |
| flex-wrap: $wrap; |
| justify-content: $justify; |
| align-items: $align; |
| gap: $gap; |
| } |
| |
| @mixin status-dot($background: $color-success, $width: 8px, $height: 8px, $margin: 0 6px 0 0) { |
| content: ''; |
| display: inline-block; |
| background-color: $background; |
| width: $width; |
| height: $height; |
| border-radius: 50%; |
| margin: $margin; |
| } |
