amis/lib/themes/default.css.map

一种MIS页面生成工具

{
    "version": 3,
    "file": "default.css",
    "sources": [
        "/scss/themes/default.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": [
        "// 默认主题\n\n// 更新时间: 2019-08-14 14:31:00\n$ns: \"a-\";\n\n$primary: #7266ba;\n$info: #23b7e5;\n$success: #27c24c;\n$warning: #fad733;\n$danger: #f05050;\n$light: #edf1f2;\n$dark: #3a3f51;\n$black: #1c2b36;\n\n$text-color: #58666e;\n$link-color: $info;\n\n$Form-input-borderColor: #cfdadd;\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",
        "//下一个断点\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--muted-color !default;\n$ColorPicker-borderWidth: $Form-input-borderWidth !default;\n$ColorPicker-borderColor: $Form-input-borderColor !default;\n$ColorPicker-borderRadius: $Form-input-borderRadius !default;\n$ColorPicker-height: $Form-input-height !default;\n$ColorPicker-lineHeight: $Form-input-lineHeight !default;\n$ColorPicker-fontSize: $Form-input-fontSize !default;\n$ColorPicker-paddingX: px2rem(12px) !default;\n$ColorPicker-paddingY: ($ColorPicker-height - $ColorPicker-lineHeight * $ColorPicker-fontSize)/2 - $ColorPicker-borderWidth !default;\n$ColorPicker-placeholderColor: $Form-input-placeholderColor !default;\n$ColorPicker-onFocused-borderColor: $Form-input-onFocused-borderColor !default;\n$DatePicker-onHover-borderColor: $Form-input-borderColor !default;\n\n// datepicker\n$DatePicker-color: $Form-input-color !default;\n$DatePicker-bg: $white !default;\n$DatePicker-onHover-bg: darken($DatePicker-bg, 5%) !default;\n$DatePicker-borderWidth: $Form-input-borderWidth !default;\n$DatePicker-borderColor: $Form-input-borderColor !default;\n$DatePicker-borderRadius: $Form-input-borderRadius !default;\n$DatePicker-height: $Form-input-height !default;\n$DatePicker-lineHeight: $Form-input-lineHeight !default;\n$DatePicker-fontSize: $Form-input-fontSize !default;\n$DatePicker-paddingX: px2rem(12px) !default;\n$DatePicker-paddingY: ($DatePicker-height - $DatePicker-lineHeight * $DatePicker-fontSize)/2 - $DatePicker-borderWidth !default;\n$DatePicker-placeholderColor: $Form-input-placeholderColor !default;\n$DatePicker-iconColor: $gray600 !default;\n$DatePicker-onHover-iconColor: darken($DatePicker-iconColor, 10%) !default;\n$DatePicker-onFocused-borderColor: $Form-input-onFocused-borderColor !default;\n$DatePicker-toggler-vendor: 'FontAwesome' !default;\n$DatePicker-toggler-fontSize: $Form-fontSize !default;\n$DatePicker-toggler-icon: '__scss_backup_10' !default;\n$DatePicker-prevBtn-vendor: 'FontAwesome' !default;\n$DatePicker-prevBtn-fontSize: $fontSizeMd !default;\n$DatePicker-prevBtn-icon: '__scss_backup_11' !default;\n$DatePicker-nextBtn-vendor: 'FontAwesome' !default;\n$DatePicker-nextBtn-fontSize: $fontSizeMd !default;\n$DatePicker-nextBtn-icon: '__scss_backup_12' !default;\n$DatePicker-header-select-borderColor: #fff !default;\n\n$Calendar-fontSize: $fontSizeBase !default;\n\n$Calendar-input-color: $info !default;\n$Calendar-input-fontSize: $fontSizeBase !default;\n$Calendar-input-borderColor: $borderColor !default;\n$Calendar-input-onFocused-borderColor: $info !default;\n$Calendar-input-borderRadius: $borderRadius !default;\n$Calendar-input-height: px2rem(30px) !default;\n$Calendar-input-lineHeight: $lineHeightBase;\n$Calendar-input-paddingX: px2rem(10px) !default;\n$Calendar-input-paddingY: ($Calendar-input-height - $Calendar-input-lineHeight * $Calendar-input-fontSize) / 2;\n\n$Calendar-btn-fontSize: $fontSizeSm !default;\n$Calendar-btn-lineHeight: $lineHeightBase !default;\n$Calendar-btn-height: px2rem(30px) !default;\n$Calendar-btn-paddingX: px2rem(10px) !default;\n$Calendar-btn-paddingY: ($Calendar-btn-height - $Calendar-btn-lineHeight * $Calendar-btn-fontSize)/2 !default;\n\n$Calendar-btn-bg: $info !default;\n$Calendar-btn-border: $Calendar-btn-bg !default;\n$Calendar-btn-borderRadius: $Bu