amis/lib/themes/dark.css.map

一种MIS页面生成工具

{
    "version": 3,
    "file": "dark.css",
    "sources": [
        "/scss/themes/dark.scss",
        "/scss/_functions.scss",
        "/scss/_variables.scss",
        "/scss/_mixins.scss",
        "/scss/base/_reset.scss",
        "/scss/base/_normalize.scss",
        "/scss/base/_typography.scss",
        "/scss/layout/_layout.scss",
        "/scss/layout/_grid.scss",
        "/scss/layout/_aside.scss",
        "/scss/layout/_hbox.scss",
        "/scss/layout/_vbox.scss",
        "/scss/components/_modal.scss",
        "/scss/components/_drawer.scss",
        "/scss/components/_tooltip.scss",
        "/scss/components/_popover.scss",
        "/scss/components/_toast.scss",
        "/scss/components/_alert.scss",
        "/scss/components/_tabs.scss",
        "/scss/components/_nav.scss",
        "/scss/components/_page.scss",
        "/scss/components/_remark.scss",
        "/scss/components/_chart.scss",
        "/scss/components/_video.scss",
        "/scss/components/_audio.scss",
        "/scss/components/_panel.scss",
        "/scss/components/_service.scss",
        "/scss/components/_spinner.scss",
        "/scss/components/_button.scss",
        "/scss/components/_button-group.scss",
        "/scss/components/_dropdown.scss",
        "/scss/components/_collapse.scss",
        "/scss/components/_wizard.scss",
        "/scss/components/_crud.scss",
        "/scss/components/_table.scss",
        "/scss/components/_list.scss",
        "/scss/components/_cards.scss",
        "/scss/components/_card.scss",
        "/scss/components/_quick-edit.scss",
        "/scss/components/_popoverable.scss",
        "/scss/components/_copyable.scss",
        "/scss/components/_divider.scss",
        "/scss/components/_pagination.scss",
        "/scss/components/_wrapper.scss",
        "/scss/components/_status.scss",
        "/scss/components/_carousel.scss",
        "/scss/components/form/_fieldset.scss",
        "/scss/components/form/_group.scss",
        "/scss/components/form/_input-group.scss",
        "/scss/components/form/_text.scss",
        "/scss/components/form/_textarea.scss",
        "/scss/components/form/_checks.scss",
        "/scss/components/form/_city.scss",
        "/scss/components/form/_switch.scss",
        "/scss/components/form/_number.scss",
        "/scss/components/form/_select.scss",
        "/scss/components/form/_list.scss",
        "/scss/components/form/_matrix.scss",
        "/scss/components/form/_color.scss",
        "/scss/components/form/_date.scss",
        "/scss/components/form/_date-range.scss",
        "/scss/components/form/_image.scss",
        "/scss/components/form/_file.scss",
        "/scss/components/form/_editor.scss",
        "/scss/components/form/_rich-text.scss",
        "/scss/components/form/_range.scss",
        "/scss/components/form/_repeat.scss",
        "/scss/components/form/_tree.scss",
        "/scss/components/form/_tree-select.scss",
        "/scss/components/form/_combo.scss",
        "/scss/components/form/_sub-form.scss",
        "/scss/components/form/_chained-select.scss",
        "/scss/components/form/_picker.scss",
        "/scss/components/form/_qr-code.scss",
        "/scss/components/form/_tag.scss",
        "/scss/components/form/_rating.scss",
        "/scss/components/form/_form.scss",
        "/scss/components/form/_transfer-select.scss",
        "/scss/components/form/_nested-select.scss",
        "/scss/components/form/_icon-picker.scss",
        "/scss/_utilities.scss"
    ],
    "sourcesContent": [
        "// dark 主题\n// 参考： https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/color/\n\n$ns: 'dark-';\n\n$orange: #ff9f0b;\n$yellow: #ffd609;\n$green: #32d74b;\n$turquoise: #00d1b2;\n$cyan: #17a2b8;\n$blue: #0983ff;\n$purple: #bf5af2;\n$red: #dc3545;\n\n$primary: $blue;\n$info: #2296f3;\n$success: $green;\n$warning: $orange;\n$danger: $red;\n$light: #3a3a3a;\n$dark: #1e1f22;\n$black: #141316;\n\n$text-color: rgb(243, 241, 241);\n\n$text--muted-color: #6c6c6c;\n$text--loud-color: lighten($text-color, 10%);\n\n$background: #333538;\n$background-head: #191c22;\n\n$body-bg: $background;\n$Page-aside-bg: #3c3c3c;\n$Panel-bg: #302d2a;\n$borderColor: $black;\n$link-color: $info;\n\n$borderColor: #656565;\n\n$Button--default-bg: $black;\n$Calendar-btnCancel-bg: $background-head;\n$Calendar-cell-bg: $Panel-bg;\n\n$Card-bg: $Panel-bg;\n$Card-onModified-bg: $dark;\n$Card-onModified-color: $text-color;\n$Card-onChecked-bg: $black;\n$Card-onChecked-color: $text-color;\n$Card-actions-onHover-bg: $dark;\n$Card-actions-onHover-color: $text-color;\n\n$Checkbox-gb: linear-gradient(#515151, #4b4b4b);\n$Checkbox-onHover-color: $blue;\n$ColorPicker-bg: $background;\n$DatePicker-bg: $background;\n$DatePicker-header-select-borderColor: $background;\n$DropDown-menu-bg: $background;\n$Fieldset-legend-bgColor: $background;\n\n$Form-input-bg: #3c3c3c;\n\n$Form-input-addOnBg: $Form-input-bg;\n$Form-input-color: $text-color;\n$Form-input-onDisabled-bg: $Panel-bg;\n$Form-select-bg: $background;\n$Form-select-menu-bg: $background;\n$Form-select-onHover-bg: $background-head;\n$Form-selectValue-bg: $Panel-bg;\n$Form-selectValue-color: $text-color;\n\n$TreeSelect-popover-bg: $Panel-bg;\n\n$IconPicker-tab-onActive-bg: $background;\n$InputGroup-select-bg: $background;\n$InputGroup-select-onFocused-bg: $Panel-bg;\n$istItem-onModified-bg: $black;\n\n$Layout-aside-bg: $background-head;\n$Layout-aside-onAcitve-bg: $Panel-bg;\n$Layout-aside-onHover-bg: #404040;\n$Layout-aside-subList-bg: #131519;\n$Layout-header-bg: $background-head;\n\n$List-bg: $Panel-bg;\n$ListControl-item-bg: $background;\n$ListControl-item-onActive-before-bg: $background;\n$ListItem--strip-bg: $background;\n$ListItem-onChecked-bg: $black;\n$ListItem-onChecked-color: $text-color;\n$ListItem-onModified-color: $text-color;\n\n$Number-handler-bg: $background;\n\n$Panel--default-bg: linear-gradient(#524e48, #423e3a);\n$Panel-footerBg: linear-gradient(#524e48, #423e3a);\n$PopOver-bg: $background;\n\n$Table-onHover-bg: $dark;\n$Table-strip-bg: $Panel-bg;\n$Table-thead-bg: #2f2f2f;\n$Table-onChecked-bg: $black;\n$Table-onChecked-color: $text-color;\n$Table-onModified-bg: $black;\n$Table-onModified-color: $text-color;\n\n$Tabs--card-bg: #323639;\n$Tabs--card-borderTopColor: $background;\n$Tabs--card-onActive-bg: $Panel-bg;\n$Tabs--radio-bg: $Panel-bg;\n$Tabs-content-bg: $Panel-bg;\n$Tabs-onActive-bg: $Panel-bg;\n$Tabs-onActive-borderColor: $borderColor;\n$Tabs-onActive-color: lighten($text-color, 10%);\n$Tabs-onHover-borderColor: $Tabs-onActive-borderColor;\n\n$Tabs--radio-bg: $Panel-bg;\n\n$Tooltip--attr-color: $text-color;\n$TransferSelect--table-heading-bg: $background;\n$Wizard-steps-bg: $background-head;\n$Wizard-steps-li-onActive-arrow-bg: $Panel-bg;\n$Wizard-steps-li-onActive-bg: $Panel-bg;\n\nbutton[disabled],\nhtml input[disabled] {\n    cursor: not-allowed;\n}\n\ninput {\n    color: $text-color;\n    background: $Form-input-bg;\n}\n\npre {\n    color: $text-color;\n    background: $background;\n}\n\n.rdtPicker {\n    background: $background;\n}\n\n.rdtPicker th {\n    border-bottom: none;\n}\n\n.fr-toolbar {\n    background: $background;\n}\n\n.markdown-body {\n    color: $text-color;\n}\n\n@import '../functions';\n@import '../variables';\n@import '../mixins';\n@import '../base/reset';\n@import '../base/normalize';\n@import '../base/typography';\n\n@import '../layout/layout';\n@import '../layout/grid';\n@import '../layout/aside';\n@import '../layout/hbox';\n@import '../layout/vbox';\n@import '../components/modal';\n@import '../components/drawer';\n@import '../components/tooltip';\n@import '../components/popover';\n@import '../components/toast';\n@import '../components/alert';\n@import '../components/tabs';\n@import '../components/nav';\n@import '../components/page';\n@import '../components/remark';\n@import '../components/chart';\n@import '../components/video';\n@import '../components/audio';\n@import '../components/panel';\n@import '../components/service';\n@import '../components/spinner';\n@import '../components/button';\n@import '../components/button-group';\n@import '../components/dropdown';\n@import '../components/collapse';\n@import '../components/wizard';\n@import '../components/crud';\n@import '../components/table';\n@import '../components/list';\n@import '../components/cards';\n@import '../components/card';\n@import '../components/quick-edit';\n@import '../components/popoverable';\n@import '../components/copyable';\n@import '../components/divider';\n@import '../components/pagination';\n@import '../components/wrapper';\n@import '../components/status';\n@import '../components/carousel';\n\n@import '../components/form/fieldset';\n@import '../components/form/group';\n@import '../components/form/input-group';\n@import '../components/form/text';\n@import '../components/form/textarea';\n@import '../components/form/checks';\n@import '../components/form/city';\n@import '../components/form/switch';\n@import '../components/form/number';\n@import '../components/form/select';\n@import '../components/form/list';\n@import '../components/form/matrix';\n@import '../components/form/color';\n@import '../components/form/date';\n@import '../components/form/date-range';\n@import '../components/form/image';\n@import \"../components/form/file\";\n@import '../components/form/editor';\n@import '../components/form/rich-text';\n@import '../components/form/range';\n@import '../components/form/repeat';\n@import '../components/form/tree';\n@import '../components/form/tree-select';\n@import '../components/form/combo';\n@import '../components/form/sub-form';\n@import '../components/form/chained-select';\n@import '../components/form/picker';\n@import '../components/form/qr-code';\n@import '../components/form/tag';\n@import '../components/form/rating';\n@import '../components/form/form';\n@import '../components/form/transfer-select';\n@import '../components/form/nested-select';\n@import '../components/form/icon-picker';\n\n@import '../utilities';",
        "//下一个断点\n@function breakpoint-next(\n    $name,\n    $breakpoints: breakpoints,\n    $breakpoint-names: map-keys($breakpoints)\n) {\n    $n: index($breakpoint-names, $name);\n    @return if(\n        $n < length($breakpoint-names),\n        nth($breakpoint-names, $n + 1),\n        null\n    );\n}\n\n//断点最小值\n@function breakpoint-min($name, $breakpoints: $breakpoints) {\n    $min: map-get($breakpoints, $name); // @return if($min != 0, $min, null);\n    @return $min;\n}\n\n//断点最大值\n@function breakpoint-max($name, $breakpoints: $breakpoints) {\n    $next: breakpoint-next($name, $breakpoints);\n    @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);\n}\n\n//生成类名“-sm、-md、-lg、-cl” -xs?\n@function breakpoint-infix($name, $breakpoints: $breakpoints) {\n    @return if(breakpoint-min($name, $breakpoints) ==null, \"\", \"-#{$name}\");\n}\n\n@function px2rem($pixels, $context: $remFactor) {\n    @if (unitless($pixels)) {\n        $pixels: $pixels * 1px;\n    }\n\n    @if (unitless($context)) {\n        $context: $context * 1px;\n    }\n\n    @return $pixels / $context * 1rem;\n}\n",
        "// 类名前缀\n$ns: '' !default;\n\n// 颜色\n$white: #fff !default;\n$gray100: #f8f9fa !default;\n$gray200: #e9ecef !default;\n$gray300: #dee2e6 !default;\n$gray400: #ced4da !default;\n$gray500: #adb5bd !default;\n$gray600: #6c757d !default;\n$gray700: #495057 !default;\n$gray800: #343a40 !default;\n$gray900: #212529 !default;\n$black: #000 !default;\n\n$orange: #fd7e14 !default;\n$yellow: #ffc107 !default;\n$green: #28a745 !default;\n$turquoise: #00d1b2 !default;\n$cyan: #17a2b8 !default;\n$blue: #007bff !default;\n$purple: #6f42c1 !default;\n$red: #dc3545 !default;\n\n$primary: $blue !default;\n$secondary: $gray600 !default;\n$success: $green !default;\n$info: $cyan !default;\n$warning: $yellow !default;\n$danger: $red !default;\n$light: $gray100 !default;\n$dark: $gray800 !default;\n\n$remFactor: 16px !default;\n\n// 字体相关\n$fontFamilySansSerif: -apple-system,\nBlinkMacSystemFont,\n'SF Pro SC',\n'SF Pro Text',\n'Helvetica Neue',\nHelvetica,\n'PingFang SC',\n'Segoe UI',\nRoboto,\n'Hiragino Sans GB',\n'Arial',\n'microsoft yahei ui',\n'Microsoft YaHei',\nSimSun,\nsans-serif !default;\n$fontFamilyMonospace: SFMono-Regular,\nMenlo,\nMonaco,\nConsolas,\n'Liberation Mono',\n'Courier New',\nmonospace !default;\n$fontFamilyBase: $fontFamilySansSerif !default;\n\n$fontSizeBase: px2rem(14px) !default; // Assumes the browser default, typically `16px`\n$fontSizeMd: px2rem(16px) !default;\n$fontSizeLg: px2rem(20px) !default;\n$fontSizeXl: px2rem(24px) !default;\n$fontSizeSm: px2rem(12px) !default;\n$fontSizeXs: px2rem(11px) !default;\n\n$fontWeightLighter: lighter !default;\n$fontWeightLight: 300 !default;\n$fontWeightNormal: 400 !default;\n$fontWeightBold: 700 !default;\n$fontWeightBolder: bolder !default;\n\n$fontWeightBase: $fontWeightNormal !default;\n\n// 行高\n$lineHeightBase: 1.5 !default;\n$lineHeightLg: 1.5 !default;\n$lineHeightSm: 1.5 !default;\n\n$h1-fontSize: $fontSizeBase * 2.5 !default;\n$h2-fontSize: $fontSizeBase * 2 !default;\n$h3-fontSize: $fontSizeBase * 1.75 !default;\n$h4-fontSize: $fontSizeBase * 1.5 !default;\n$h5-fontSize: $fontSizeBase * 1.25 !default;\n$h6-fontSize: $fontSizeBase !default;\n\n// 边框\n$borderWidth: px2rem(1px) !default;\n$borderColor: $gray300 !default;\n\n$borderRadius: 0.142rem !default;\n$borderRadiusMd: 0.285rem !default;\n$borderRadiusLg: 0.428rem !default;\n\n$boxShadowSm: 0 0.125rem 0.25rem rgba($black, 0.075) !default;\n$boxShadow: 0 0.5rem 1rem rgba($black, 0.15) !default;\n$boxShadowLg: 0 1rem 3rem rgba($black, 0.175) !default;\n\n// 窗口适配\n$breakpoints: (xs: 0,\n    sm: 576px,\n    md: 768px,\n    lg: 992px,\n    xl: 1200px) !default;\n\n// 段落间距\n$paragraph-marginBottom: 1rem !default;\n\n$text-color: $gray900 !default;\n$text--muted-color: lighten($text-color, 25%) !default;\n$text--loud-color: darken($text-color, 10%) !default;\n\n$background: $white !default;\n\n$code-color: $red !default;\n$code-background: $background !default;\n\n$pre-color: $text-color !default;\n$pre-background: $background !default;\n\n$link-color: $primary !default;\n$link-decoration: none !default;\n$link-onHover-color: darken($link-color, 15%) !default;\n$link-onHover-decoration: underline !default;\n\n$body-bg: lighten($light, 1%) !default;\n$body-size: $fontSizeBase !default;\n$body-color: $text-color !default;\n$body-weight: $fontWeightBase;\n$body-lineHeight: $lineHeightBase;\n\n$zindex-affix: 900 !default;\n$zindex-dropdown: 1000 !default;\n$zindex-sticky: 1100 !default;\n$zindex-fixed: 1200 !default;\n$zindex-modal: 1300 !default;\n$zindex-popover: 1400 !default;\n$zindex-tooltip: 1500 !default;\n$zindex-toast: 2000 !default;\n\n$gap-xs: px2rem(5px) !default;\n$gap-sm: px2rem(10px) !default;\n$gap-base: px2rem(15px) !default;\n$gap-md: px2rem(20px) !default;\n$gap-lg: px2rem(30px) !default;\n\n// Components\n$scrollbar-width: px2rem(17px) !default;\n\n$Layout-aside-width: px2rem(200px) !default;\n$Layout-aside--sm-width: px2rem(150px) !default;\n$Layout-aside--md-width: px2rem(250px) !default;\n$Layout-aside--lg-width: px2rem(300px) !default;\n$Layout-aside--folded-width: px2rem(60px) !default;\n$Layout-aside-bg: $dark !default;\n$Layout-aside-onAcitve-bg: saturate(darken($Layout-aside-bg, 5%), 2.5%) !default;\n$Layout-aside-subList-bg: saturate(darken($Layout-aside-bg, 10%), 2.5%) !default;\n$Layout-aside-onHover-bg: saturate(darken($Layout-aside-bg, 3%), 2.5%) !default;\n$Layout-aside-color: desaturate(lighten($Layout-aside-bg, 40%), 10%) !default;\n\n$Layout-asideDivider-margin: $gap-sm 0 !default;\n$Layout-asideDivider-bg: #2e3344 !default;\n\n$Layout-asideLink-onHover-iconSize: inherit !default;\n$Layout-asideLink-iconColor: inherit !default;\n$Layout-asideLink-onHover-iconColor: inherit !default;\n$Layout-asideLink-fontSize: $fontSizeBase !default;\n$Layout-asideLink-color: #b4b6bd !default;\n$Layout-asideLink-onHover-color: #fff !default;\n$Layout-asideLink-onActive-color: #fff !default;\n$Layout-asideLink-arrowVendor: 'FontAwesome' !default;\n$Layout-asideLink-arrowFontSize: $fontFamilyBase !default;\n$Layout-asideLink-arrowIcon: '__scss_backup_0' !default;\n$Layout-asideLink-arrowColor: $Layout-asideLink-color !default;\n$Layout-asideLink-onActive-arrowColor: $Layout-asideLink-onActive-color !default;\n$Layout-asideLabel-color: darken($Layout-aside-color, 10%) !default;\n$Layout-brand-bg: $dark !default;\n$Layout-brandBar-color: desaturate(lighten($Layout-brand-bg, 40%), 10%) !default;\n$Layout-brand-color: lighten($Layout-brandBar-color, 25%) !default;\n$Layout-header-height: px2rem(50px) !default;\n$Layout-headerBar-borderBottom: none !default;\n$Layout-header-bg: $white !default;\n$Layout-header-boxShadow: 0 px2rem(2px) px2rem(2px) rgba(0, 0, 0, 0.05),\n0 1px 0 rgba(0, 0, 0, 0.05) !default;\n$Layout-nav-height: px2rem(40px) !default;\n$Layout-nav-lgHeight: px2rem(50px) !default;\n$Layout-nav--folded-height: px2rem(50px) !default;\n$Layout--offscreen-width: 75% !default;\n\n// Grid\n$Grid-columns: 12 !default;\n$Grid-gutterWidth: px2rem(30px) !default;\n\n// container\n// $container-tablet: (720px + $Grid-gutterWidth) !default;\n// $container-sm: $container-tablet !default;\n// $container-desktop: (940px + $Grid-gutterWidth) !default;\n// $container-md: $container-desktop !default;\n// $container-large-desktop: (1140px + $Grid-gutterWidth) !default;\n// $container-lg: $container-large-desktop !default;\n\n// Modal\n$Modal-bg: $background !default;\n$Modal-overlay-bg: rgba(0, 0, 0, 0.6) !default;\n$Modal-content-startMarginTop: px2rem(60px) !default;\n$Modal-content-stepMarginTop: px2rem(30px) !default;\n$Modal-content-minHeight: px2rem(200px) !default;\n$Modal-content-borderWidth: $borderWidth !default;\n$Modal-content-borderColor: $borderColor !default;\n$Modal-content-borderRadius: $borderRadius !default;\n\n$Modal-header-height: px2rem(40px) !default;\n$Modal-header-bg: darken($Modal-bg, 2.5%) !default;\n$Modal-title-lineHeight: $lineHeightBase !default;\n$Modal-title-fontSize: $fontSizeBase !default;\n$Modal-title-color: $text--loud-color !default;\n$Modal-header-paddingY: ($Modal-header-height - $Modal-title-lineHeight * $Modal-title-fontSize) / 2 !default;\n$Modal-header-paddingX: $gap-md !default;\n$Modal-close-width: px2rem(12px) !default;\n$Modal-close-color: $text--muted-color !default;\n$Model-close-onHover-color: $text-color !default;\n$Modal-body-paddingX: $gap-md !default;\n$Modal-body-paddingY: $gap-md !default;\n$Modal-body--noHeader-paddingTop: $gap-base;\n$Modal-body-borderTop: $Modal-content-borderWidth solid lighten($Modal-content-borderColor, 5%) !default;\n$Modal-body-borderBottom: $Modal-content-borderWidth solid lighten($Modal-content-borderColor, 5%) !default;\n$Modal-footer-padding: $gap-sm !default;\n$Modal-footer-marginY: 0 !default;\n$Modal-footer-marginX: 0 !default;\n\n$Modal-widthBase: px2rem(500px);\n$Modal-widthSm: px2rem(350px);\n$Modal-widthMd: px2rem(800px);\n$Modal-widthLg: px2rem(1100px);\n$Modal-widthXl: 90%;\n\n$Drawer-bg: $background !default;\n$Drawer-overlay-bg: rgba(0, 0, 0, 0.6) !default;\n$Drawer-content-borderWidth: $borderWidth !default;\n$Drawer-content-borderColor: $borderColor !default;\n$Drawer-content-borderRadius: 0 !default;\n\n$Drawer-header-padding: $gap-base !default;\n$Drawer-header-bg: darken($Drawer-bg, 2.5%) !default;\n$Drawer-title-fontSize: $fontSizeMd !default;\n$Drawer-title-fontColor: $text--loud-color !default;\n$Drawer-close-color: rgba(255, 255, 255, 0.8) !default;\n$Drawer-close-onHover-color: rgba(255, 255, 255, 1) !default;\n$Drawer-body-padding: $gap-base !default;\n$Drawer-footer-padding: $gap-base !default;\n\n$Drawer-widthBase: 80%;\n$Drawer-widthXs: px2rem(200px);\n$Drawer-widthSm: px2rem(300px);\n$Drawer-widthMd: px2rem(500px);\n$Drawer-widthLg: px2rem(800px);\n$Drawer-widthXl: 90%;\n\n// Tooltip\n$Tooltip-fontSize: $fontSizeSm !default;\n$Tooltip-bg: $background !default;\n$Tooltip-maxWidth: px2rem(240px) !default;\n$Tooltip-minWidth: auto !default;\n$Tooltip-borderWidth: $borderWidth !default;\n$Tooltip-borderColor: $borderColor !default;\n$Tooltip-borderRadius: $borderRadiusLg !default;\n$Tooltip-boxShadow: $boxShadow !default;\n\n$Tooltip-title-bg: darken($Tooltip-bg, 3%) !default;\n$Tooltip-title-color: $text--loud-color !default;\n$Tooltip-title-paddingY: $gap-xs !default;\n$Tooltip-title-paddingX: $gap-sm !default;\n\n$Tooltip-body-color: $text-color !default;\n$Tooltip-body-paddingY: $gap-sm !default;\n$Tooltip-body-paddingX: $gap-sm !default;\n\n$Tooltip-arrow-width: px2rem(16px) !default;\n$Tooltip-arrow-height: px2rem(8px) !default;\n$Tooltip-arrow-color: $Tooltip-bg !default;\n$Tooltip-arrow-width: 1rem !default;\n$Tooltip-arrow-height: 0.5rem !default;\n$Tooltip-arrow-color: $Tooltip-bg !default;\n$Tooltip-arrow-outerColor: fade-in($Tooltip-borderColor, 0.05) !default;\n\n$Tooltip--attr-color: $background !default;\n$Tooltip--attr-bg: rgba(0, 0, 0, 0.7) !default;\n$Tooltip--attr-borderWidth: 0 !default;\n$Tooltip--attr-borderColor: $borderColor !default;\n$Tooltip--attr-borderRadius: $borderRadius !default;\n$Tooltip--attr-boxShadow: $boxShadow !default;\n$Tooltip--attr-fontSize: $fontSizeSm !default;\n$Tooltip--attr-lineHeigt: $lineHeightBase !default;\n$Tooltip--attr-paddingX: px2rem(10px) !default;\n$Tooltip--attr-paddingY: px2rem(2px) !default;\n$Tooltip--attr-gap: $gap-sm;\n$Tooltip--attr-transition: all 0.15s ease-in-out !default;\n\n// toast\n$Toast-width: px2rem(300px) !default;\n$Toast-box-shadow: $boxShadow !default;\n$Toast-borderRadius: $borderRadiusLg !default;\n$Toast-paddingY: $gap-base !default;\n$Toast-paddingX: $gap-base !default;\n$Toast-paddingL: px2rem(40px) !default;\n$Toast--info-paddingL: $Toast-paddingL !default;\n$Toast-border-width: 0 !default;\n$Toast-icon-fontSize: px2rem(30px) !default;\n$Toast-opacity: 0.8 !default;\n$Toast-display: block !default;\n\n$Toast-color: $white !default;\n\n$Toast--danger-color: $Toast-color !default;\n$Toast--danger-bgColor: $red !default;\n$Toast--danger-borderColor: $red !default;\n\n$Toast--info-color: $Toast-color !default;\n$Toast--info-bgColor: $info !default;\n$Toast--info-borderColor: $info !default;\n\n$Toast--success-color: $Toast-color !default;\n$Toast--success-bgColor: $success !default;\n$Toast--success-borderColor: $success !default;\n\n$Toast--warning-color: $Toast-color !default;\n$Toast--warning-bgColor: $warning !default;\n$Toast--warning-borderColor: $warning !default;\n\n$Toast-iconVendor: 'FontAwesome' !default;\n\n$Toast--error-icon: '__scss_backup_1' !default;\n$Toast--warning-icon: '__scss_backup_2' !default;\n$Toast--info-icon: '__scss_backup_3' !default;\n$Toast--success-icon: '__scss_backup_4' !default;\n\n// alert\n$Alert-fontSize: $fontSizeBase !default;\n$Alert-boxShadow: none !default;\n$Alert-paddingX: $gap-base !default;\n$Alert-paddingY: $gap-base !default;\n$Alert-borderWidth: $borderWidth !default;\n$Alert-borderColor: transparent !default;\n$Alert-borderRadius: $borderRadiusMd !default;\n$Alert-marginBottom: $gap-md !default;\n\n$Alert--danger-color: #a94442 !default;\n$Alert--danger-bg: #f2dede !default;\n$Alert--danger-borderColor: darken(adjust-hue($Alert--danger-bg, -10), 5%) !default;\n\n$Alert--info-color: #31708f !default;\n$Alert--info-bg: #d9edf7 !default;\n$Alert--info-borderColor: darken(adjust-hue($Alert--info-bg, -10), 5%) !default;\n\n$Alert--success-color: #3c763d !default;\n$Alert--success-bg: #dff0d8 !default;\n$Alert--success-borderColor: darken(adjust-hue($Alert--success-bg, -10), 5%) !default;\n\n$Alert--warning-color: #8a6d3b !default;\n$Alert--warning-bg: #fcf8e3 !default;\n$Alert--warning-borderColor: darken(adjust-hue($Alert--warning-bg, -10), 5%) !default;\n\n// spinner\n$Spinner-overlay-bg: rgba(255, 255, 255, 0.4) !default;\n$Spinner-width: px2rem(26px) !default;\n$Spinner-height: px2rem(26px) !default;\n$Spinner--lg-width: px2rem(50px) !default;\n$Spinner--lg-height: px2rem(50px) !default;\n\n$Spinner-bg: url('./spinner-default.svg?__inline') !default;\n\n// Tabs\n$Tabs-linkFontSize: $fontSizeBase !default;\n$Tabs-borderColor: $borderColor !default;\n$Tabs-borderWidth: $borderWidth !default;\n$Tabs-borderRadius: $borderRadius !default;\n$Tabs-color: $text-color !default;\n$Tabs-onDisabled-color: $gray600 !default;\n$Tabs-onHover-borderColor: $gray200 !default;\n$Tabs-onActive-color: $gray700 !default;\n$Tabs-onActive-borderColor: $gray300 !default;\n$Tabs-onActive-bg: $background !default;\n$Tabs-linkPadding: $gap-sm $gap-base !default;\n$Tabs-linkMargin: 0 px2rem(3px) 0 0 !default;\n$Tabs-content-bg: $background !default;\n\n$Tabs--line-borderColor: $borderColor !default;\n$Tabs--line-onHover-color: $primary !default;\n$Tabs--line-onHover-borderColor: $primary !default;\n$Tabs--line-borderWidth: px2rem(2px) !default;\n$Tabs--line-linkPadding: 10px 0 !default;\n$Tabs--line-linkMargin: 0 40px 0 0 !default;\n$Tabs--line-content-bg: transparent !default;\n$Tabs--line-content-padding: 20px 0 !default;\n;\n\n$Tabs--card-padding: px2rem(6px) 0 0 px2rem(10px);\n$Tabs--card-bg: darken($body-bg, 5%) !default;\n$Tabs--card-borderTopColor: $borderColor !default;\n$Tabs--card-onActive-borderColor: $borderColor !default;\n$Tabs--card-onActive-bg: $background !default;\n$Tabs--card-linkPadding: px2rem(10px) px2rem(10px) !default;\n$Tabs--card-linkMargin: 0 10px 0 0 !default;\n\n\n$Tabs--radio-bg: #eaf6fe !default;\n\n$Tabs--vertical-onActive-borderColor: $primary !default;\n\n// Nav\n$Nav-item-fontSize: $fontSizeBase !default;\n$Nav-item-borderRadius: $borderRadiusMd !default;\n$Nav-item-color: $text-color !default;\n$Nav-item-onHover-color: $text--loud-color !default;\n$Nav-item-onActive-color: $white !default;\n$Nav-item-onDisabled-color: $text--muted-color !default;\n$Nav-item-bg: transparent !default;\n$Nav-item-onHover-bg: rgba(0, 0, 0, 0.05) !default;\n$Nav-item-onActive-bg: $info !default;\n$Nav-item-onActive-borderLeft: 4px solid transparent !default;\n$Nav-subItem-onActiveBeforeBg: #e5eaeb !default;\n$Nav-subItem-fontSize: $fontSizeBase !default;\n\n// CRUD\n$Crud-toolbar-lineHeight: $lineHeightBase !default;\n$Crud-toolbar-height: px2rem(30px) !default;\n$Crud-toolbar-gap: $gap-xs !default;\n\n// Table\n$Table-bg: $background !default;\n$Table-fontSize: $fontSizeBase !default;\n$Table-color: $text-color !default;\n$Table-lineHeight: $lineHeightBase !default;\n$Table-borderColor: $borderColor !default;\n$Table-borderWidth: $borderWidth !default;\n$Table-borderRadius: $borderRadius !default;\n$Table-fixedTop-boxShadow: $boxShadow !default;\n$Table-fixedLeft-boxShadow: 0.42rem 0 0.42rem -0.28rem rgba($black, 0.15) !default;\n$Table-fixedRight-boxShadow: -0.42rem 0 0.42rem -0.28rem rgba($black, 0.15) !default;\n$Table-toolbar-paddingX: $gap-sm !default;\n$Table-toolbar-paddingY: $gap-sm !default;\n$Table-thead-bg: $white !default;\n$Table-thead-fontSize: $fontSizeBase !default;\n$Table-thead-color: $text--loud-color !default;\n$Table-thead-borderColor: $Table-borderColor !default;\n$Table-thead-borderWidth: $Table-borderWidth !default;\n$Table-thead-iconColor: $text--muted-color !default;\n$TableCell-height: px2rem(40px) !default;\n$TableCell-paddingX: $gap-sm !default;\n$TableCell--edge-paddingX: $gap-md !default;\n$TableCell-paddingY: ($TableCell-height - $Table-fontSize * $Table-lineHeight) / 2;\n$Table-placeholder-height: px2rem(100px) !default;\n\n// $Table-checkCell-width: px2rem(50px) !default;\n\n$Table-strip-bg: lighten(#f6f8f8, 1%) !default;\n$Table-onHover-bg: darken($Table-strip-bg, 2%) !default;\n$Table-onHover-borderColor: darken($Table-onHover-bg, 10%) !default;\n$Table-onHover-color: $text-color !default;\n$Table-onHover-boxShadow: $boxShadow !default;\n\n$Table-onChecked-bg: #d9f3fb !default;\n$Table-onChecked-borderColor: darken($Table-onChecked-bg, 10%) !default;\n$Table-onChecked-color: darken($Table-onChecked-bg, 40%) !default;\n$Table-onChecked-onHover-bg: darken($Table-onChecked-bg, 5%) !default;\n$Table-onChecked-onHover-borderColor: darken($Table-onChecked-borderColor, 5%) !default;\n$Table-onChecked-onHover-color: darken($Table-onChecked-color, 5%) !default;\n\n$Table-onModified-bg: #e8f0fe !default;\n$Table-onModified-color: #4285f4 !default;\n$Table-onModified-borderColor: darken($Table-onModified-bg, 5%) !default;\n$Table-onModified-onHover-bg: darken($Table-onModified-bg, 2.5%) !default;\n$Table-onModified-onHover-borderColor: darken($Table-onModified-onHover-bg, 5%) !default;\n$Table-onModified-onHover-color: darken($Table-onModified-color, 5%) !default;\n\n$Table-onDragging-opacity: 0.1 !default;\n$TableCell-searchBtn-width: px2rem(16px) !default;\n\n$TableCell-filterBtn-width: px2rem(16px) !default;\n$TableCell-filterPopOver-dropDownItem-height: px2rem(34px) !default;\n$TableCell-filterPopOver-dropDownItem-padding: 0 px2rem(12px) !default;\n\n$Table-heading-height: px2rem(40px) !default;\n$Table-heading-bg: $white !default;\n$Table--unsaved-heading-bg: #e8f0fe !default;\n$Table--unsaved-heading-color: #4285f4 !default;\n\n$Table-expandBtn-vendor: 'FontAwesome' !default;\n$Table-expandBtn-fontSize: px2rem(20px) !default;\n$Table-expandBtn-color: $info !default;\n$Table-expandBtn-icon: '__scss_backup_5' !default;\n\n$TableCell-sortBtn-width: px2rem(8px) !default;\n$TableCell-sortBtn--down-iconVendor: 'fontAwesome' !default;\n$TableCell-sortBtn--down-icon: '__scss_backup_6' !default;\n$TableCell-sortBtn--up-iconVendor: 'fontAwesome' !default;\n$TableCell-sortBtn--up-icon: '__scss_backup_7' !default;\n$TableCell-sortBtn--default-iconVendor: 'fontAwesome' !default;\n$TableCell-sortBtn--default-icon: '__scss_backup_8' !default;\n$TableCell-sortBtn--default-opacity: 0.4 !default;\n$TableCell-sortBtn--default-onActive-opacity: 0.4 !default;\n\n// Cards\n$Cards-fixedTop-boxShadow: $boxShadow !default;\n$Cards-toolbar-paddingY: 0 !default;\n$Cards-toolbar-paddingX: 0 !default;\n$Cards--unsaved-heading-bg: #e8f0fe !default;\n$Cards--unsaved-heading-color: #4285f4 !default;\n$Cards-placeholder-height: px2rem(100px) !default;\n$Card-bg: $white !default;\n$Card-borderColor: $borderColor !default;\n$Card-borderWidth: $borderWidth !default;\n$Card-borderRadius: $borderRadius !default;\n$Card-actions-borderColor: lighten($Card-borderColor, 5%) !default;\n$Card-actions-onHover-bg: darken($white, 5%) !default;\n$Card-actions-onHover-color: darken($text-color, 5%) !default;\n$Card-actions-onChecked-onHover-bg: darken(#d9f3fb, 5%) !default;\n\n$Card-onChecked-bg: #d9f3fb !default;\n$Card-onChecked-borderColor: darken($Table-onChecked-bg, 10%) !default;\n$Card-onChecked-color: darken($Table-onChecked-bg, 40%) !default;\n\n$Card-onModified-bg: #e8f0fe !default;\n$Card-onModified-color: #4285f4 !default;\n$Card-onModified-borderColor: darken($Card-onModified-bg, 10%) !default;\n\n$Card-onDragging-opacity: 0.1 !default;\n\n// List\n$List-bg: $white !default;\n$List-borderColor: $borderColor !default;\n$List-borderWidth: $borderWidth !default;\n$List-borderRadius: $borderRadius !default;\n$List-fixedTop-boxShadow: $boxShadow !default;\n$List-toolbar-paddingY: $gap-sm !default;\n$List-toolbar-paddingX: $gap-sm !default;\n$List--unsaved-heading-bg: #e8f0fe !default;\n$List--unsaved-heading-color: #4285f4 !default;\n$List-placeholder-height: px2rem(30px) !default;\n\n$ListItem-borderColor: lighten($List-borderColor, 5%) !default;\n$ListItem-borderWidth: $List-borderWidth !default;\n$ListItem-paddingX: $gap-base !default;\n$ListItem-paddingY: $gap-sm !default;\n$ListItem--strip-bg: #f6f8f8 !default;\n$ListItem-onChecked-bg: #d9f3fb !default;\n$ListItem-onChecked-borderColor: darken($ListItem-onChecked-bg, 10%) !default;\n$ListItem-onChecked-color: darken($ListItem-onChecked-bg, 40%) !default;\n$ListItem-onModified-bg: #e8f0fe !default;\n$ListItem-onModified-color: #4285f4 !default;\n$ListItem-onModified-borderColor: darken($ListItem-onModified-bg, 10%) !default;\n$ListItem-onDragging-opacity: 0.1 !default;\n\n// QuickEdit\n$QuickEdit-iconColor: $text--muted-color !default;\n$QuickEdit-onHover-iconColor: $text-color !default;\n$QuickEdit-onFocus-borderColor: $info !default;\n$QuickEdit-onFocus-borderWidth: $borderWidth !default;\n\n// Copyable\n$Copyable-iconColor: $text--muted-color !default;\n$Copyable-onHover-iconColor: $text-color !default;\n\n// PopOverAble\n\n$PopOverAble-iconColor: $text--muted-color !default;\n$PopOverAble-onHover-iconColor: $text-color !default;\n\n// PopOver\n$PopOver-bg: white !default;\n\n// Remark\n$Remark-width: 1rem !default;\n$Remark-icon-fontSize: $fontSizeBase !default;\n$Remark-iconColor: $text--muted-color !default;\n$Remark-onHover-iconColor: $text-color !default;\n$Remark-bg: transparent !default;\n$Remark-onHover-bg: transparent !default;\n$Remark-borderWidth: 0 !default;\n$Remark-borderColor: $borderColor !default;\n$Remark-onHover-borderColor: $borderColor !default;\n$Remark-marginLeft: $gap-sm !default;\n\n// Form\n$Form-fontSize: $fontSizeBase !default;\n$Form-description-color: lighten($text-color, 10%) !default;\n$Form-description-fontSize: $fontSizeSm !default;\n$Form-item-gap: px2rem(15px) !default;\n\n$Form--horizontal-gutterWidth: px2rem(20px) !default;\n$Form--horizontal-columns: 12 !default;\n\n$Form-group-gutterWidth: $Form--horizontal-gutterWidth !default;\n$Form-group--lg-gutterWidth: px2rem(40px) !default;\n$Form-group--md-gutterWidth: px2rem(30px) !default;\n$Form-group--sm-gutterWidth: px2rem(20px) !default;\n$Form-group--xs-gutterWidth: px2rem(10px) !default;\n\n$Form-row-gutterWidth: px2rem(10px) !default;\n\n$Form--horizontal-label-align: right !default;\n$Form--horizontal-label-widthXs: px2rem(60px) !default;\n$Form--horizontal-label-widthSm: px2rem(90px) !default;\n$Form--horizontal-label-widthBase: px2rem(120px) !default;\n$Form--horizontal-label-widthMd: px2rem(160px) !default;\n$Form--horizontal-label-widthLg: px2rem(200px) !default;\n\n$Form-control-widthXs: px2rem(80px) !default;\n$Form-control-widthSm: px2rem(160px) !default;\n$Form-control-widthMd: px2rem(240px) !default;\n$Form-control-widthLg: px2rem(320px) !default;\n\n$Form-input-bg: $white !default;\n$Form-input-color: $text-color !default;\n$Form-input-onActive-color: $info !default;\n$Form-input-borderRadius: $borderRadius !default;\n$Form-input-borderColor: $borderColor !default;\n$Form-input-borderWidth: px2rem(1px) !default;\n$Form-input-iconColor: #999 !default;\n$Form-input-onFocused-borderColor: $info !default;\n$Form-input-onFocused-bg: $Form-input-bg !default;\n$Form-input-onError-borderColor: $danger !default;\n$Form-input-onError-bg: $Form-input-bg !default;\n$Form-input-onDisabled-borderColor: $Form-input-borderColor !default;\n$Form-input-onDisabled-bg: $gray200 !default;\n$Form-input-height: px2rem(34px) !default;\n$Form-input-placeholderColor: $text--muted-color !default;\n$Form-input-lineHeight: 20/14 !default;\n$Form-input-fontSize: $Form-fontSize !default;\n$Form-input-boxShadow: none !default;\n$Form-input-paddingY: ($Form-input-height - $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px))/2 !default;\n$Form-input-paddingX: px2rem(12px) !default;\n$Form-input-marginBottom: px2rem(6px) !default;\n$Form-label-paddingTop: ($Form-input-height - $Form-input-lineHeight * $Form-input-fontSize)/2 !default;\n\n$Form-input-addOnBg: #edf1f2 !default;\n$Form-input-addOnColor: $text-color !default;\n$Form-input-onFocus-addOnColor: $primary !default;\n$Form-input-addOnDividerBorderWidth: $borderWidth !default;\n\n$Number-bg: $Form-input-bg !default;\n$Number-onDisabled-bg: $Form-input-bg !default;\n$Number-borderColor: $Form-input-borderColor !default;\n$Number-borderWidth: $Form-input-borderWidth !default;\n$Number-borderRadius: $Form-input-borderRadius !default;\n$Number-handler-mode: 'vertical' !default;\n$Number-handler-borderBottom: px2rem(1px) solid $Form-input-borderColor !default;\n$Number-handler-width: px2rem(20px) !default;\n$Number-handler-color: $Form-input-color !default;\n$Number-handler-onDisabled-color: $text--muted-color !default;\n$Number-handler-fontFamily: inherit !default;\n$Number-handler-fontSize: $fontSizeBase !default;\n$Number-handler--up-content: '+' !default;\n$Number-handler--up-transform: none !default;\n$Number-handler--down-content: '-' !default;\n$Number-handler-bg: $white !default;\n$Number-handler-onHover-bg: darken($Number-handler-bg, 5%) !default;\n$Number-handler-onHover-color: $text-color !default;\n$Number-handler-onActive-bg: $Number-handler-onHover-bg !default;\n$Number-handler-onDisabled-bg: $Form-input-onDisabled-bg !default;\n\n$Form-select-bg: $white !default;\n$Form-select-onHover-bg: darken($white, 5%) !default;\n$Form-select-onHover-borderColor: $Form-input-borderColor !default;\n$Form-select-color: $text-color !default;\n$Form-select-placeholderColor: $Form-input-placeholderColor !default;\n$Form-select-paddingX: $Form-input-paddingX !default;\n$Form-select-borderWidth: $Form-input-borderWidth !default;\n$Form-select-borderColor: $Form-input-borderColor !default;\n$Form-select-borderRadius: $Form-input-borderRadius !default;\n$Form-select-onFocused-color: $Form-select-color !default;\n$Form-select-onFocused-borderColor: $Form-input-onFocused-borderColor !default;\n$Form-select-onError-borderColor: $Form-input-onError-borderColor !default;\n$Form-selectOption-height: $Form-input-height !default;\n$Form-selectValue-color: #007eff !default;\n$Form-selectValue-bg: saturate(lighten($Form-selectValue-color, 40%), 2.5%) !default;\n$Form-selectValue-borderColor: saturate(lighten($Form-selectValue-color, 30%), 2.5%) !default;\n$Form-selectValue-fontSize: $fontSizeSm !default;\n$Form-select-caret-vender: 'FontAwesome' !default;\n$Form-select-caret-icon: '__scss_backup_9' !default;\n$Form-select-caret-fontSize: $fontSizeBase !default;\n$Form-select-caret-iconColor: $Form-input-iconColor !default;\n$Form-select-caret-onHover-iconColor: $Form-input-iconColor !default;\n$Form-select-outer-borderWidth: px2rem(1px) !default;\n$Form-select-outer-boxShadow: none !default;\n$Form-select-outer-top: 100% !default;\n$Form-select-menu-height: $Form-input-height !default;\n$Form-select-menu-bg: $white !default;\n$Form-select-menu-color: $Form-select-color !default;\n$Form-select-menu-onHover-color: $info !default;\n$Form-select-menu-onHover-bg: rgba(0, 126, 255, 0.08) !default;\n$Form-select-menu-onActive-color: $info !default;\n$Form-select-menu-onActive-bg: transparent !default;\n$Form-select-menu-onDisabled-color: $text--muted-color !default;\n$Form-select-menu-onDisabled-bg: transparent !default;\n$Form-select-checkall-bottomBorder: #eceff8 !default;\n\n// InputGroup\n$InputGroup-height: $Form-input-height !default;\n$InputGroup-addOn-bg: $Form-input-addOnBg !default;\n$InputGroup-addOn-borderWidth: $Form-input-borderWidth !default;\n$InputGroup-addOn-borderColor: $Form-input-borderColor !default;\n$InputGroup-addOn-borderRadius: $Form-input-borderRadius !default;\n$InputGroup-paddingY: ($InputGroup-height - $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px))/2 !default;\n$InputGroup-paddingX: px2rem(10px) !default;\n$InputGroup-addOn-onFocused-borderColor: $Form-input-onFocused-borderColor !default;\n$InputGroup-select-borderWidth: $Form-select-borderWidth !default;\n$InputGroup-select-borderColor: $Form-select-borderColor !default;\n$InputGroup-select-borderRadius: $Form-select-borderRadius !default;\n$InputGroup-select-bg: $white !default;\n$InputGroup-select-onFocused-bg: $white !default;\n$InputGroup-select-color: $Form-select-color !default;\n$InputGroup-select-onFocused-color: $Form-select-onFocused-color !default;\n$InputGroup-select-arrowColor: $Form-select-caret-iconColor !default;\n$InputGroup-select-onFocused-arrowColor: $Form-select-caret-iconColor !default;\n$InputGroup-button-borderWidth: $borderWidth !default;\n$InputGroup-button-borderColor: $Form-input-borderColor !default;\n$InputGroup-button-borderRadius: $borderRadius !default;\n// $InputGroup-button-onFocused-borderColor: $Form-input-onFocused-borderColor !default;\n\n// button\n\n$Button-borderWidth: $Form-input-borderWidth !default;\n$Button-fontWeight: $fontWeightNormal !default;\n$Button-fontSize: $Form-input-fontSize !default;\n$Button-height: $Form-input-height !default;\n$Button-mimWidth: auto !default;\n$Button-lineHeight: $Form-input-lineHeight !default;\n$Button-paddingX: px2rem(12px) !default;\n$Button-paddingY: ($Button-height - $Button-borderWidth * 2 - $Button-lineHeight * $Button-fontSize)/2 !default;\n\n$Button--iconOnly-minWidthRate: 4 / 3 !default;\n\n$Button--xs-fontSize: $fontSizeXs !default;\n$Button--xs-height: px2rem(22px) !default;\n$Button--xs-lineHeight: 18 / 11 !default;\n$Button--xs-paddingX: px2rem(5px) !default;\n$Button--xs-paddingY: ($Button--xs-height - $Button-borderWidth * 2 - $Button--xs-lineHeight * $Button--xs-fontSize)/2 !default;\n\n$Button--sm-fontSize: $fontSizeSm !default;\n$Button--sm-height: px2rem(30px) !default;\n$Button--sm-lineHeight: 18 / 12 !default;\n$Button--sm-paddingX: px2rem(8px) !default;\n$Button--sm-paddingY: ($Button--sm-height - $Button-borderWidth * 2 - $Button--sm-lineHeight * $Button--sm-fontSize)/2 !default;\n\n$Button--md-fontSize: $Button-fontSize !default;\n$Button--md-height: $Button-height !default;\n$Button--md-lineHeight: $Button-lineHeight !default;\n$Button--md-paddingX: $Button-paddingX !default;\n$Button--md-paddingY: ($Button--md-height - $Button-borderWidth * 2 - $Button--md-lineHeight * $Button--md-fontSize)/2 !default;\n\n$Button--lg-fontSize: $fontSizeLg !default;\n$Button--lg-height: px2rem(46px) !default;\n$Button--lg-lineHeight: 24 / 20 !default;\n$Button--lg-paddingX: px2rem(16px) !default;\n$Button--lg-paddingY: ($Button--lg-height - $Button-borderWidth * 2 - $Button--lg-lineHeight * $Button--lg-fontSize)/2 !default;\n\n$Button-boxShadow: inset 0 1px 0 rgba($white, 0.15),\n0 1px 1px rgba($black, 0.075) !default;\n$Button-onFocus-boxShadow: none !default;\n$Button-onActive-boxShadow: inset 0 3px 5px rgba($black, 0.125) !default;\n$Button-onDisabled-opacity: 0.65 !default;\n$Button-onDisabled-borderColor: #dee2e6 !default;\n\n$Button--link-onDisabled-color: $gray600 !default;\n\n$Button-borderRadius: $borderRadius !default;\n$Button--lg-borderRadius: $borderRadius !default;\n$Button--sm-borderRadius: $borderRadius !default;\n\n$Button-transition: color 0.15s ease-in-out,\nbackground-color 0.15s ease-in-out,\nborder-color 0.15s ease-in-out,\nbox-shadow 0.15s ease-in-out !default;\n\n$Button--primary-bg: $primary !default;\n$Button--primary-border: $Button--primary-bg !default;\n$Button--primary-color: $white !default;\n$Button--primary-onHover-bg: darken($Button--primary-bg, 7.5%) !default;\n$Button--primary-onHover-border: darken($Button--primary-border, 10%) !default;\n$Button--primary-onHover-color: $Button--primary-color !default;\n$Button--primary-onActive-bg: darken($Button--primary-bg, 10%) !default;\n$Button--primary-onActive-border: darken($Button--primary-border, 12.5%) !default;\n$Button--primary-onActive-color: $Button--primary-color !default;\n\n$Button--secondary-bg: $secondary !default;\n$Button--secondary-border: $Button--secondary-bg !default;\n$Button--secondary-color: $white !default;\n$Button--secondary-onHover-bg: darken($Button--secondary-bg, 7.5%) !default;\n$Button--secondary-onHover-border: darken($Button--secondary-border, 10%) !default;\n$Button--secondary-onHover-color: $Button--secondary-color !default;\n$Button--secondary-onActive-bg: darken($Button--secondary-bg, 10%) !default;\n$Button--secondary-onActive-border: darken($Button--secondary-border, 12.5%) !default;\n$Button--secondary-onActive-color: $Button--secondary-color !default;\n\n$Button--success-bg: $success !default;\n$Button--success-border: $Button--success-bg !default;\n$Button--success-color: $white !default;\n$Button--success-onHover-bg: darken($Button--success-bg, 7.5%) !default;\n$Button--success-onHover-border: darken($Button--success-border, 10%) !default;\n$Button--success-onHover-color: $Button--success-color !default;\n$Button--success-onActive-bg: darken($Button--success-bg, 10%) !default;\n$Button--success-onActive-border: darken($Button--success-border, 12.5%) !default;\n$Button--success-onActive-color: $Button--success-color !default;\n\n$Button--info-bg: $info !default;\n$Button--info-border: $Button--info-bg !default;\n$Button--info-color: $white !default;\n$Button--info-onHover-bg: darken($Button--info-bg, 7.5%) !default;\n$Button--info-onHover-border: darken($Button--info-border, 10%) !default;\n$Button--info-onHover-color: $Button--info-color !default;\n$Button--info-onActive-bg: darken($Button--info-bg, 10%) !default;\n$Button--info-onActive-border: darken($Button--info-border, 12.5%) !default;\n$Button--info-onActive-color: $Button--info-color !default;\n\n$Button--warning-bg: $warning !default;\n$Button--warning-border: $Button--warning-bg !default;\n$Button--warning-color: $white !default;\n$Button--warning-onHover-bg: darken($Button--warning-bg, 7.5%) !default;\n$Button--warning-onHover-border: darken($Button--warning-border, 10%) !default;\n$Button--warning-onHover-color: $Button--warning-color !default;\n$Button--warning-onActive-bg: darken($Button--warning-bg, 10%) !default;\n$Button--warning-onActive-border: darken($Button--warning-border, 12.5%) !default;\n$Button--warning-onActive-color: $Button--warning-color !default;\n\n$Button--danger-bg: $danger !default;\n$Button--danger-border: $Button--danger-bg !default;\n$Button--danger-color: $white !default;\n$Button--danger-onHover-bg: darken($Button--danger-bg, 7.5%) !default;\n$Button--danger-onHover-border: darken($Button--danger-border, 10%) !default;\n$Button--danger-onHover-color: $Button--danger-color !default;\n$Button--danger-onActive-bg: darken($Button--danger-bg, 10%) !default;\n$Button--danger-onActive-border: darken($Button--danger-border, 12.5%) !default;\n$Button--danger-onActive-color: $Button--danger-color !default;\n\n$Button--light-bg: $light !default;\n$Button--light-border: $borderColor !default;\n$Button--light-color: $text-color !default;\n$Button--light-onHover-bg: darken($Button--light-bg, 7.5%) !default;\n$Button--light-onHover-border: darken($Button--light-border, 10%) !default;\n$Button--light-onHover-color: $Button--light-color !default;\n$Button--light-onActive-bg: darken($Button--light-bg, 10%) !default;\n$Button--light-onActive-border: darken($Button--light-border, 12.5%) !default;\n$Button--light-onActive-color: $Button--light-color !default;\n\n$Button--dark-bg: $dark !default;\n$Button--dark-border: $Button--dark-bg !default;\n$Button--dark-color: $white !default;\n$Button--dark-onHover-bg: darken($Button--dark-bg, 7.5%) !default;\n$Button--dark-onHover-border: darken($Button--dark-border, 10%) !default;\n$Button--dark-onHover-color: $Button--dark-color !default;\n$Button--dark-onActive-bg: darken($Button--dark-bg, 10%) !default;\n$Button--dark-onActive-border: darken($Button--dark-border, 12.5%) !default;\n$Button--dark-onActive-color: $Button--dark-color !default;\n\n$Button--default-bg: $white !default;\n$Button--default-border: $borderColor !default;\n$Button--default-color: $text-color !default;\n$Button--default-onHover-bg: darken($Button--default-bg, 7.5%) !default;\n$Button--default-onHover-border: darken($Button--default-border, 10%) !default;\n$Button--default-onHover-color: $Button--default-color !default;\n$Button--default-onActive-bg: darken($Button--default-bg, 10%) !default;\n$Button--default-onActive-border: darken($Button--default-border, 12.5%) !default;\n$Button--default-onActive-color: $Button--default-color !default;\n\n$Button--link-color: $text-color !default;\n$Button--link-onHover-color: $text--loud-color !default;\n\n$DropDown-caret-marginLeft: $gap-sm;\n$DropDown-menu-bg: $white !default;\n$DropDown-menu-boxShadow: $boxShadow !default;\n$DropDown-menu-borderColor: $borderColor !default;\n$DropDown-menu-borderWidth: $borderWidth !default;\n$DropDown-menu-borderRadius: $borderRadius !default;\n$DropDown-menu-height: px2rem(34px) !default;\n$DropDown-menu-minWidth: px2rem(160px) !default;\n$DropDown-menu-paddingY: $gap-xs !default;\n$DropDown-menu-paddingX: 0 !default;\n$DropDown-menuItem-paddingY: ($DropDown-menu-height - $fontSizeBase * $lineHeightBase) / 2 !default;\n$DropDown-menuItem-paddingX: $gap-sm !default;\n$DropDown-menuItem-onHover-color: inherit !default;\n$DropDown-menuItem-onHover-bg: $Button--default-onHover-bg !default;\n\n// Checks\n$Checkbox-gap: $gap-sm !default;\n$Checkbox-size: px2rem(20px) !default;\n$Checkbox-inner-size: $Checkbox-size / 2 !default;\n$Checkbox--full-inner-size: px2rem(12px) !default;\n$Checkbox-color: $Form-input-borderColor !default;\n$Checkbox-onHover-color: $info !default;\n\n$Checkbox--sm-size: px2rem(16px) !default;\n$Checkbox-gb: #fff !default;\n$Checkbox-borderRadius: $borderRadius !default;\n\n// Radio\n$Radio-size: $Checkbox-size !default;\n$Radio-inner-size: $Radio-size / 2 !default;\n$Radio-color: $Checkbox-color !default;\n$Radio-onHover-color: $Checkbox-onHover-color !default;\n$Radio--sm-size: $Checkbox--sm-size !default;\n\n// switch\n$Switch-gap: $gap-sm !default;\n$Switch-width: px2rem(50px) !default;\n$Switch-height: px2rem(22px) !default;\n$Switch-bgColor: $gray600 !default;\n$Switch-borderColor: darken($Switch-bgColor, 10%) !default;\n$Switch-valueColor: $white !default;\n$Switch-onActive-bgColor: $info !default;\n$Switch-onDisabled-bgColor: #ccc !default;\n$Switch-onDisabled-color: #fff !default;\n$Switch-onDisabled-circle-BackgroundColor: $white !default;\n\n// Fieldset\n$Fieldset-legend-bgColor: $white !default;\n\n// color Picker\n$ColorPicker-color: $Form-input-color !default;\n$ColorPicker-bg: $white !default;\n$ColorPicker-onHover-bg: darken($ColorPicker-bg, 5%) !default;\n$ColorPicker-onHover-borderColor: $borderColor !default;\n$ColorPicker-onDisabled-bg: $gray200 !default;\n$ColorPicker-onDisabled-color: $text--