p96170835
/
amis
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

增加 .editorconfig；使用 prettier 格式化 scss

This commit is contained in:
wuduoyi 2019-05-15 16:10:20 +08:00
parent 59c09ca3c4
commit ed8717989d
80 changed files with 2188 additions and 1338 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
.editorconfig Normal file
View File

@ -0,0 +1,14 @@
root = true
[*]
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[**.{js,ts,tsx,scss}]
indent_style = space
indent_size = 4
[*.md]
trim_trailing_whitespace = false

18
scss/_functions.scss
View File

@ -1,7 +1,15 @@
//下一个断点
@function breakpoint-next( $name, $breakpoints: breakpoints, $breakpoint-names: map-keys($breakpoints)) {
@function breakpoint-next(
$name,
$breakpoints: breakpoints,
$breakpoint-names: map-keys($breakpoints)
) {
$n: index($breakpoint-names, $name);
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
@return if(
$n < length($breakpoint-names),
nth($breakpoint-names, $n + 1),
null
);
}
//断点最小值
@ -18,15 +26,17 @@
//生成类名“-sm、-md、-lg、-cl” -xs?
@function breakpoint-infix($name, $breakpoints: $breakpoints) {
@return if(breakpoint-min($name, $breakpoints)==null, "", "-#{$name}");
@return if(breakpoint-min($name, $breakpoints) ==null, "", "-#{$name}");
}
@function px2rem($pixels, $context: $remFactor) {
@if (unitless($pixels)) {
$pixels: $pixels * 1px;
}
@if (unitless($context)) {
$context: $context * 1px;
}
@return $pixels / $context * 1rem;
}
}

79
scss/_mixins.scss
View File

@ -1,12 +1,12 @@
// 媒体查询最小阈值
@mixin media-breakpoint-up($name, $breakpoints: $breakpoints) {
$min: breakpoint-min($name, $breakpoints);
@if $min {
@media (min-width: $min) {
@content;
}
}
@else {
} @else {
@content;
}
}
@ -14,12 +14,12 @@
//媒体查询最大阈值
@mixin media-breakpoint-down($name, $breakpoints: $breakpoints) {
$max: breakpoint-max($name, $breakpoints);
@if $max {
@media (max-width: $max) {
@content;
}
}
@else {
} @else {
@content;
}
}
@ -28,6 +28,7 @@
@mixin media-breakpoint-between($min, $max, $breakpoints: $breakpoints) {
$min: breakpoint-min($min, $breakpoints);
$max: breakpoint-max($max, $breakpoints);
@media (min-width: $min) and (max-width: $max) {
@content;
}
@ -41,32 +42,43 @@
}
}
@mixin color-schema($bg-color:#555, $percent:15%, $sat-percent:100%) {
@mixin color-schema($bg-color: #555, $percent: 15%, $sat-percent: 100%) {
background-color: saturate(darken($bg-color, $percent), $sat-percent);
}
@mixin color-schema-lt($bg-color:#555, $percent:15%, $sat-percent:100%) {
@mixin color-schema-lt($bg-color: #555, $percent: 15%, $sat-percent: 100%) {
background-color: desaturate(lighten($bg-color, $percent), $sat-percent);
}
@mixin color-variant($bg-color:#555, $lt-percent:10%, $lter-percent:15%, $dk-percent:10%, $dker-percent:15%) {
@mixin color-variant(
$bg-color: #555,
$lt-percent: 10%,
$lter-percent: 15%,
$dk-percent: 10%,
$dker-percent: 15%
) {
background-color: $bg-color;
&.lt,
& .lt {
@include color-schema-lt($bg-color, $lt-percent, 2.5%);
}
&.lter,
& .lter {
@include color-schema-lt($bg-color, $lter-percent, 5%);
}
&.dk,
& .dk {
@include color-schema($bg-color, $dk-percent, 2.5%);
}
&.dker,
& .dker {
@include color-schema($bg-color, $dker-percent, 5%);
}
&.bg,
& .bg {
background-color: $bg-color;
@ -78,15 +90,19 @@
$link-color: desaturate(lighten($bg-color, 50%), 10%);
$hover-color: #fff;
color: $font-color;
& a {
color: $link-color;
&:hover {
color: $hover-color;
}
}
& .open > a {
&, &:hover, &:focus {
&,
&:hover,
&:focus {
color: $hover-color;
}
}
@ -99,11 +115,16 @@
color: lighten($font-color, 25%) !important;
}
&.auto, & .auto {
&.auto,
& .auto {
& .list-group-item {
border-color: darken($bg-color, 5%) !important;
background-color: transparent;
&:hover, &:focus, &:active, &.active {
&:hover,
&:focus,
&:active,
&.active {
@include color-schema($bg-color, 5%, 2.5% !important);
}
}
@ -114,28 +135,36 @@
a.bg-#{$name}:hover {
background-color: darken($bg-color, 5%);
}
a.text-#{$name}:hover {
color: darken($bg-color, 5%);
}
.text-#{$name} {
color: $bg-color;
}
.text-#{$name}-lt {
color: darken($bg-color, 5%);
}
.text-#{$name}-lter {
color: darken($bg-color, 10%);
}
.text-#{$name}-dk {
color: darken($bg-color, 5%);
}
.text-#{$name}-dker {
color: darken($bg-color, 10%);
}
}
@mixin hover {
&:hover { @content; }
&:hover {
@content;
}
}
@mixin hover-focus {
@ -152,11 +181,11 @@
}
@mixin button-size(
$padding-y,
$padding-x,
$font-size,
$line-height,
$border-radius,
$padding-y,
$padding-x,
$font-size,
$line-height,
$border-radius,
$height: auto,
$iconWdith: px2rem(20px)
) {
@ -166,7 +195,6 @@
border-radius: $border-radius;
height: $height;
.#{$ns}Button-icon:first-child:not(:last-child):not(.pull-right),
> .pull-left {
margin-right: $padding-x;
@ -182,10 +210,10 @@
$background,
$border: $background,
$color: $white,
$hover-background: darken($background, 7.5%),
$hover-border: darken($border, 10%),
$hover-background: darken($background, 7.5%),
$hover-border: darken($border, 10%),
$hover-color: $color,
$active-background: darken($background, 10%),
$active-background: darken($background, 10%),
$active-border: darken($border, 12.5%),
$active-color: $color
) {
@ -193,16 +221,15 @@
background-color: $background;
border-color: $border;
box-shadow: $Button-boxShadow;
@include hover-focus {
color: $hover-color;
background-color: $hover-background;
border-color: $hover-border;
}
&.is-disabled,
&:disabled {
@if variable-exists(Button-onDisabled-bg) {
background-color: $Button-onDisabled-bg;
} @else {
@ -220,14 +247,12 @@
} @else {
border-color: $border;
}
}
&:not(:disabled):not(.is-disabled):active,
&:not(:disabled):not(.is-disabled).is-active {
color: $active-color;
background-color: $active-background;
border-color: $active-border;
}
}
}

641
scss/_utilities.scss
View File

File diff suppressed because it is too large Load Diff

380
scss/_variables.scss
View File

@ -1,6 +1,5 @@
// 类名前缀
$ns: '' !default;
$ns: "" !default;
// 颜色
$white: #fff !default;
@ -18,7 +17,7 @@ $black: #000 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #28a745 !default;
$turquoise: #00D1B2 !default;
$turquoise: #00d1b2 !default;
$cyan: #17a2b8 !default;
$blue: #007bff !default;
$purple: #6f42c1 !default;
@ -33,18 +32,24 @@ $danger: $red !default;
$light: $gray100 !default;
$dark: $gray800 !default;
$remFactor: 16px!default;
$remFactor: 16px !default;
// 字体相关
$fontFamilySansSerif: -apple-system, BlinkMacSystemFont,"SF Pro SC","SF Pro Text","Helvetica Neue", Helvetica, "PingFang SC","Segoe UI", Roboto, "Hiragino Sans GB", 'Arial','microsoft yahei ui',"Microsoft YaHei",SimSun, sans-serif !default;
$fontFamilyMonospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$fontFamilySansSerif: -apple-system, BlinkMacSystemFont, "SF Pro SC",
"SF Pro Text", "Helvetica Neue", Helvetica, "PingFang SC", "Segoe UI",
Roboto, "Hiragino Sans GB", "Arial", "microsoft yahei ui", "Microsoft YaHei",
SimSun, sans-serif !default;
$fontFamilyMonospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace !default;
$fontFamilyBase: $fontFamilySansSerif !default;
$fontSizeBase: px2rem(14px) !default; // Assumes the browser default, typically `16px`
$fontSizeMd: px2rem(16px) !default;
$fontSizeLg: px2rem(20px) !default;
$fontSizeSm: px2rem(12px) !default;
$fontSizeXs: px2rem(11px) !default;
$fontSizeBase: px2rem(
14px
) !default; // Assumes the browser default, typically `16px`
$fontSizeMd: px2rem(16px) !default;
$fontSizeLg: px2rem(20px) !default;
$fontSizeSm: px2rem(12px) !default;
$fontSizeXs: px2rem(11px) !default;
$fontWeightLighter: lighter !default;
$fontWeightLight: 300 !default;
@ -66,31 +71,29 @@ $h4-fontSize: $fontSizeBase * 1.5 !default;
$h5-fontSize: $fontSizeBase * 1.25 !default;
$h6-fontSize: $fontSizeBase !default;
// 边框
$borderWidth: px2rem(1px) !default;
$borderWidth: px2rem(1px) !default;
$borderColor: $gray300 !default;
$borderRadius: .142rem !default;
$borderRadiusMd: .285rem !default;
$borderRadiusLg: .428rem !default;
$borderRadius: 0.142rem !default;
$borderRadiusMd: 0.285rem !default;
$borderRadiusLg: 0.428rem !default;
$boxShadowSm: 0 .125rem .25rem rgba($black, .075) !default;
$boxShadow: 0 .5rem 1rem rgba($black, .15) !default;
$boxShadowLg: 0 1rem 3rem rgba($black, .175) !default;
$boxShadowSm: 0 0.125rem 0.25rem rgba($black, 0.075) !default;
$boxShadow: 0 0.5rem 1rem rgba($black, 0.15) !default;
$boxShadowLg: 0 1rem 3rem rgba($black, 0.175) !default;
// 窗口适配
$breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
// 段落间距
$paragraph-marginBottom: 1rem !default;
$paragraph-marginBottom: 1rem !default;
$text-color: $gray900 !default;
$text--muted-color: lighten($text-color, 25%) !default;
@ -133,13 +136,16 @@ $gap-lg: px2rem(30px) !default;
// Components
$scrollbar-width: px2rem(17px) !default;
$Layout-aside-width: px2rem(200px) !default;
$Layout-aside--sm-width: px2rem(150px) !default;
$Layout-aside--md-width: px2rem(250px) !default;
$Layout-aside--lg-width: px2rem(300px) !default;
$Layout-aside-width: px2rem(200px) !default;
$Layout-aside--sm-width: px2rem(150px) !default;
$Layout-aside--md-width: px2rem(250px) !default;
$Layout-aside--lg-width: px2rem(300px) !default;
$Layout-aside--folded-width: px2rem(60px) !default;
$Layout-aside-bg: $dark !default;
$Layout-aside-onAcitve-bg: saturate(darken($Layout-aside-bg, 5%), 2.5%) !default;
$Layout-aside-onAcitve-bg: saturate(
darken($Layout-aside-bg, 5%),
2.5%
) !default;
$Layout-aside-onHover-bg: saturate(darken($Layout-aside-bg, 3%), 2.5%) !default;
$Layout-aside-color: desaturate(lighten($Layout-aside-bg, 40%), 10%) !default;
@ -155,18 +161,22 @@ $Layout-asideLink-onHover-color: #fff !default;
$Layout-asideLink-onActive-color: #fff !default;
$Layout-asideLink-arrowVendor: "FontAwesome" !default;
$Layout-asideLink-arrowFontSize: $fontFamilyBase !default;
$Layout-asideLink-arrowIcon: "\f105" !default;
$Layout-asideLink-arrowIcon: "\f105" !default;
$Layout-asideLink-arrowColor: $Layout-asideLink-color !default;
$Layout-asideLink-onActive-arrowColor: $Layout-asideLink-onActive-color !default;
$Layout-asideLabel-color: darken($Layout-aside-color, 10%) !default;
$Layout-brand-bg: $dark !default;
$Layout-brandBar-color: desaturate(lighten($Layout-brand-bg, 40%), 10%) !default;
$Layout-brandBar-color: desaturate(
lighten($Layout-brand-bg, 40%),
10%
) !default;
$Layout-brand-color: lighten($Layout-brandBar-color, 25%) !default;
$Layout-header-height: px2rem(50px) !default;
$Layout-headerBar-borderBottom: none !default;
$Layout-header-bg: $white !default;
$Layout-header-boxShadow: 0 px2rem(2px) px2rem(2px) rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05) !default;
$Layout-nav-height: px2rem(40px) !default;
$Layout-header-boxShadow: 0 px2rem(2px) px2rem(2px) rgba(0, 0, 0, 0.05),
0 1px 0 rgba(0, 0, 0, 0.05) !default;
$Layout-nav-height: px2rem(40px) !default;
$Layout-nav--folded-height: px2rem(50px) !default;
$Layout--offscreen-width: 75% !default;
@ -197,16 +207,20 @@ $Modal-header-bg: darken($Modal-bg, 2.5%) !default;
$Modal-title-lineHeight: $lineHeightBase !default;
$Modal-title-fontSize: $fontSizeBase !default;
$Modal-title-color: $text--loud-color !default;
$Modal-header-paddingY: ($Modal-header-height - $Modal-title-lineHeight * $Modal-title-fontSize) / 2 !default;
$Modal-header-paddingY: (
$Modal-header-height - $Modal-title-lineHeight * $Modal-title-fontSize
) / 2 !default;
$Modal-header-paddingX: $gap-md !default;
$Modal-close-width: px2rem(12px) !default;
$Modal-close-color: $text--muted-color !default;
$Model-close-onHover-color: $text-color !default ;
$Model-close-onHover-color: $text-color !default;
$Modal-body-paddingX: $gap-md !default;
$Modal-body-paddingY: $gap-md !default;
$Modal-body--noHeader-paddingTop: $gap-base;
$Modal-body-borderTop: $Modal-content-borderWidth solid lighten($Modal-content-borderColor, 5%) !default;
$Modal-body-borderBottom: $Modal-content-borderWidth solid lighten($Modal-content-borderColor, 5%) !default;
$Modal-body-borderTop: $Modal-content-borderWidth solid
lighten($Modal-content-borderColor, 5%) !default;
$Modal-body-borderBottom: $Modal-content-borderWidth solid
lighten($Modal-content-borderColor, 5%) !default;
$Modal-footer-padding: $gap-sm !default;
$Modal-footer-marginY: 0 !default;
$Modal-footer-marginX: 0 !default;
@ -228,7 +242,7 @@ $Drawer-header-bg: darken($Drawer-bg, 2.5%) !default;
$Drawer-title-fontSize: $fontSizeMd !default;
$Drawer-title-fontColor: $text--loud-color !default;
$Drawer-close-color: rgba(255, 255, 255, 0.8) !default;
$Drawer-close-onHover-color: rgba(255, 255, 255, 1) !default ;
$Drawer-close-onHover-color: rgba(255, 255, 255, 1) !default;
$Drawer-body-padding: $gap-base !default;
$Drawer-footer-padding: $gap-base !default;
@ -262,9 +276,9 @@ $Tooltip-arrow-width: px2rem(16px) !default;
$Tooltip-arrow-height: px2rem(8px) !default;
$Tooltip-arrow-color: $Tooltip-bg !default;
$Tooltip-arrow-width: 1rem !default;
$Tooltip-arrow-height: .5rem !default;
$Tooltip-arrow-height: 0.5rem !default;
$Tooltip-arrow-color: $Tooltip-bg !default;
$Tooltip-arrow-outerColor: fade-in($Tooltip-borderColor, .05) !default;
$Tooltip-arrow-outerColor: fade-in($Tooltip-borderColor, 0.05) !default;
$Tooltip--attr-color: $background !default;
$Tooltip--attr-bg: rgba(0, 0, 0, 0.7) !default;
@ -272,12 +286,12 @@ $Tooltip--attr-borderWidth: 0 !default;
$Tooltip--attr-borderColor: $borderColor !default;
$Tooltip--attr-borderRadius: $borderRadius !default;
$Tooltip--attr-boxShadow: $boxShadow !default;
$Tooltip--attr-fontSize: $fontSizeSm !default;
$Tooltip--attr-fontSize: $fontSizeSm !default;
$Tooltip--attr-lineHeigt: $lineHeightBase !default;
$Tooltip--attr-paddingX: px2rem(10px) !default;
$Tooltip--attr-paddingY: px2rem(2px) !default;
$Tooltip--attr-gap: $gap-sm;
$Tooltip--attr-transition: all .15s ease-in-out !default;
$Tooltip--attr-transition: all 0.15s ease-in-out !default;
// toast
$Toast-width: px2rem(300px) !default;
@ -285,7 +299,7 @@ $Toast-box-shadow: $boxShadow !default;
$Toast-borderRadius: $borderRadiusLg !default;
$Toast-paddingY: $gap-base !default;
$Toast-paddingX: $gap-base !default;
$Toast-paddingL: px2rem(40px)!default;
$Toast-paddingL: px2rem(40px) !default;
$Toast--info-paddingL: $Toast-paddingL !default;
$Toast-border-width: 0 !default;
$Toast-icon-fontSize: px2rem(30px) !default;
@ -317,7 +331,6 @@ $Toast--warning-icon: "\f071" !default;
$Toast--info-icon: "\f05a" !default;
$Toast--success-icon: "\f00c" !default;
// alert
$Alert-fontSize: $fontSizeBase !default;
$Alert-boxShadow: none !default;
@ -330,7 +343,10 @@ $Alert-marginBottom: $gap-md !default;
$Alert--danger-color: #a94442 !default;
$Alert--danger-bg: #f2dede !default;
$Alert--danger-borderColor: darken(adjust-hue($Alert--danger-bg, -10), 5%) !default;
$Alert--danger-borderColor: darken(
adjust-hue($Alert--danger-bg, -10),
5%
) !default;
$Alert--info-color: #31708f !default;
$Alert--info-bg: #d9edf7 !default;
@ -338,11 +354,17 @@ $Alert--info-borderColor: darken(adjust-hue($Alert--info-bg, -10), 5%) !default;
$Alert--success-color: #3c763d !default;
$Alert--success-bg: #dff0d8 !default;
$Alert--success-borderColor: darken(adjust-hue($Alert--success-bg, -10), 5%) !default;
$Alert--success-borderColor: darken(
adjust-hue($Alert--success-bg, -10),
5%
) !default;
$Alert--warning-color: #8a6d3b !default;
$Alert--warning-bg: #fcf8e3 !default;
$Alert--warning-borderColor: darken(adjust-hue($Alert--warning-bg, -10), 5%) !default;
$Alert--warning-borderColor: darken(
adjust-hue($Alert--warning-bg, -10),
5%
) !default;
// spinner
$Spinner-overlay-bg: rgba(255, 255, 255, 0.4) !default;
@ -351,7 +373,7 @@ $Spinner-height: px2rem(26px) !default;
$Spinner--lg-width: px2rem(50px) !default;
$Spinner--lg-height: px2rem(50px) !default;
$Spinner-bg: url('./spinner-default.svg') !default;
$Spinner-bg: url("./spinner-default.svg") !default;
// Tabs
$Tabs-linkFontSize: $fontSizeBase !default;
@ -362,8 +384,8 @@ $Tabs-color: $text-color !default;
$Tabs-onDisabled-color: $gray600 !default;
$Tabs-onHover-borderColor: $gray200 !default;
$Tabs-onActive-color: $gray700 !default;
$Tabs-onActive-borderColor: $gray300 !default;
$Tabs-onActive-borderBottomColor: transparent !default;
$Tabs-onActive-borderColor: $gray300 !default;
$Tabs-onActive-borderBottomColor: transparent !default;
$Tabs-onActive-borderBottomWidth: initial !default;
$Tabs-onActive-bg: $background !default;
$Tabs-content-bg: $background !default;
@ -372,11 +394,11 @@ $Tabs-content-bg: $background !default;
$Nav-item-fontSize: $fontSizeBase !default;
$Nav-item-borderRadius: $borderRadiusMd !default;
$Nav-item-color: $text-color !default;
$Nav-item-onHover-color: $text--loud-color!default;
$Nav-item-onHover-color: $text--loud-color !default;
$Nav-item-onActive-color: $white !default;
$Nav-item-onDisabled-color: $text--muted-color !default;
$Nav-item-bg: transparent !default;
$Nav-item-onHover-bg: rgba(0,0,0,.05) !default;
$Nav-item-onHover-bg: rgba(0, 0, 0, 0.05) !default;
$Nav-item-onActive-bg: $info !default;
$Nav-item-onActive-borderLeft: 4px solid transparent !default;
$Nav-subItem-onActiveBeforeBg: #e5eaeb !default;
@ -396,8 +418,8 @@ $Table-borderColor: $borderColor !default;
$Table-borderWidth: $borderWidth !default;
$Table-borderRadius: $borderRadius !default;
$Table-fixedTop-boxShadow: $boxShadow !default;
$Table-fixedLeft-boxShadow: 0.42rem 0 0.42rem -0.28rem rgba($black, .15) !default;
$Table-fixedRight-boxShadow: -0.42rem 0 0.42rem -0.28rem rgba($black, .15) !default;
$Table-fixedLeft-boxShadow: 0.42rem 0 0.42rem -0.28rem rgba($black, 0.15) !default;
$Table-fixedRight-boxShadow: -0.42rem 0 0.42rem -0.28rem rgba($black, 0.15) !default;
$Table-toolbar-paddingX: $gap-sm !default;
$Table-toolbar-paddingY: $gap-sm !default;
$Table-thead-bg: $white !default;
@ -409,12 +431,13 @@ $Table-thead-iconColor: $text--muted-color !default;
$TableCell-height: px2rem(40px) !default;
$TableCell-paddingX: $gap-sm !default;
$TableCell--edge-paddingX: $gap-md !default;
$TableCell-paddingY: ($TableCell-height - $Table-fontSize * $Table-lineHeight) / 2;
$TableCell-paddingY: ($TableCell-height - $Table-fontSize * $Table-lineHeight) /
2;
$Table-placeholder-height: px2rem(100px) !default;
// $Table-checkCell-width: px2rem(50px) !default;
$Table-strip-bg: lighten(#f6f8f8 , 1%) !default;
$Table-strip-bg: lighten(#f6f8f8, 1%) !default;
$Table-onHover-bg: darken($Table-strip-bg, 2%) !default;
$Table-onHover-borderColor: darken($Table-onHover-bg, 10%) !default;
$Table-onHover-color: $text-color !default;
@ -423,17 +446,22 @@ $Table-onHover-boxShadow: $boxShadow !default;
$Table-onChecked-bg: #d9f3fb !default;
$Table-onChecked-borderColor: darken($Table-onChecked-bg, 10%) !default;
$Table-onChecked-color: darken($Table-onChecked-bg, 40%) !default;
$Table-onChecked-onHover-bg: darken($Table-onChecked-bg, 5%)!default;
$Table-onChecked-onHover-borderColor: darken($Table-onChecked-borderColor, 5%)!default;
$Table-onChecked-onHover-color: darken($Table-onChecked-color, 5%)!default;
$Table-onChecked-onHover-bg: darken($Table-onChecked-bg, 5%) !default;
$Table-onChecked-onHover-borderColor: darken(
$Table-onChecked-borderColor,
5%
) !default;
$Table-onChecked-onHover-color: darken($Table-onChecked-color, 5%) !default;
$Table-onModified-bg: #e8f0fe !default;
$Table-onModified-color: #4285f4 !default;
$Table-onModified-borderColor: darken($Table-onModified-bg, 5%) !default;
$Table-onModified-onHover-bg: darken($Table-onModified-bg, 2.5%)!default;
$Table-onModified-onHover-borderColor: darken($Table-onModified-onHover-bg, 5%)!default;
$Table-onModified-onHover-color: darken($Table-onModified-color, 5%)!default;
$Table-onModified-onHover-bg: darken($Table-onModified-bg, 2.5%) !default;
$Table-onModified-onHover-borderColor: darken(
$Table-onModified-onHover-bg,
5%
) !default;
$Table-onModified-onHover-color: darken($Table-onModified-color, 5%) !default;
$Table-onDragging-opacity: 0.1 !default;
$TableCell-searchBtn-width: px2rem(16px) !default;
@ -505,8 +533,6 @@ $ListItem-onModified-color: #4285f4 !default;
$ListItem-onModified-borderColor: darken($ListItem-onModified-bg, 10%) !default;
$ListItem-onDragging-opacity: 0.1 !default;
// QuickEdit
$QuickEdit-iconColor: $text--muted-color !default;
$QuickEdit-onHover-iconColor: $text-color !default;
@ -517,7 +543,7 @@ $QuickEdit-onFocus-borderWidth: $borderWidth !default;
$Copyable-iconColor: $text--muted-color !default;
$Copyable-onHover-iconColor: $text-color !default;
// PopOverAble
// PopOverAble
$PopOverAble-iconColor: $text--muted-color !default;
$PopOverAble-onHover-iconColor: $text-color !default;
@ -534,7 +560,6 @@ $Remark-borderColor: $borderColor !default;
$Remark-onHover-borderColor: $borderColor !default;
$Remark-marginLeft: $gap-sm !default;
// Form
$Form-fontSize: $fontSizeBase !default;
$Form-description-color: lighten($text-color, 10%) !default;
@ -578,14 +603,19 @@ $Form-input-onError-bg: $Form-input-bg !default;
$Form-input-onDisabled-borderColor: $Form-input-borderColor;
$Form-input-onDisabled-bg: $gray200 !default;
$Form-input-height: px2rem(34px) !default;
$Form-input-placeholderColor: $text--muted-color!default;
$Form-input-placeholderColor: $text--muted-color !default;
$Form-input-lineHeight: 20/14 !default;
$Form-input-fontSize: $Form-fontSize !default;
$Form-input-boxShadow: none !default;
$Form-input-paddingY: ($Form-input-height - $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px))/2 !default;
$Form-input-paddingY: (
$Form-input-height - $Form-input-lineHeight * $Form-input-fontSize -
px2rem(2px)
)/2 !default;
$Form-input-paddingX: px2rem(12px) !default;
$Form-input-marginBottom: px2rem(6px) !default;
$Form-label-paddingTop: ($Form-input-height - $Form-input-lineHeight * $Form-input-fontSize)/2 !default;
$Form-label-paddingTop: (
$Form-input-height - $Form-input-lineHeight * $Form-input-fontSize
)/2 !default;
$Form-input-addOnBg: #edf1f2 !default;
$Form-input-addOnColor: $text-color !default;
@ -597,7 +627,7 @@ $Number-borderWidth: $Form-input-borderWidth !default;
$Number-borderRadius: $Form-input-borderRadius !default;
$Number-handler-mode: "vertical" !default;
$Number-handler-width: px2rem(20px) !default;
$Number-handler-color: $Form-input-color!default;
$Number-handler-color: $Form-input-color !default;
$Number-handler-onDisabled-color: $text--muted-color !default;
$Number-handler-fontFamily: inherit !default;
$Number-handler-fontSize: $fontSizeBase !default;
@ -608,7 +638,6 @@ $Number-handler-onHover-bg: darken($Number-handler-bg, 5%) !default;
$Number-handler-onActive-bg: $Number-handler-onHover-bg !default;
$Number-handler-onDisabled-bg: $Form-input-onDisabled-bg !default;
$Form-select-bg: $white !default;
$Form-select-onHover-bg: darken($white, 5%) !default;
$Form-select-color: $text-color !default;
@ -622,8 +651,14 @@ $Form-select-onFocused-borderColor: $Form-input-onFocused-borderColor !default;
$Form-select-onError-borderColor: $Form-input-onError-borderColor !default;
$Form-selectOption-height: $Form-input-height !default;
$Form-selectValue-color: #007eff !default;
$Form-selectValue-bg: saturate(lighten($Form-selectValue-color, 40%), 2.5%) !default;
$Form-selectValue-borderColor: saturate(lighten($Form-selectValue-color, 30%), 2.5%) !default;
$Form-selectValue-bg: saturate(
lighten($Form-selectValue-color, 40%),
2.5%
) !default;
$Form-selectValue-borderColor: saturate(
lighten($Form-selectValue-color, 30%),
2.5%
) !default;
$Form-selectValue-fontSize: $fontSizeSm !default;
$Form-select-caret-vender: "FontAwesome" !default;
$Form-select-caret-icon: "\f0d7" !default;
@ -635,7 +670,7 @@ $Form-select-menu-height: $Form-input-height !default;
$Form-select-menu-bg: $white !default;
$Form-select-menu-color: $Form-select-color !default;
$Form-select-menu-onHover-color: $info !default;
$Form-select-menu-onHover-bg: rgba(0,126,255,.08) !default;
$Form-select-menu-onHover-bg: rgba(0, 126, 255, 0.08) !default;
$Form-select-menu-onActive-color: $info !default;
$Form-select-menu-onActive-bg: transparent !default;
$Form-select-menu-onDisabled-color: $text--muted-color !default;
@ -647,7 +682,10 @@ $InputGroup-addOn-bg: $Form-input-addOnBg !default;
$InputGroup-addOn-borderWidth: $Form-input-borderWidth !default;
$InputGroup-addOn-borderColor: $Form-input-borderColor !default;
$InputGroup-addOn-borderRadius: $Form-input-borderRadius !default;
$InputGroup-paddingY: ($InputGroup-height - $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px))/2 !default;
$InputGroup-paddingY: (
$InputGroup-height - $Form-input-lineHeight * $Form-input-fontSize -
px2rem(2px)
)/2 !default;
$InputGroup-paddingX: px2rem(10px) !default;
$InputGroup-addOn-onFocused-borderColor: $Form-input-onFocused-borderColor !default;
$InputGroup-select-borderWidth: $Form-select-borderWidth !default;
@ -673,7 +711,10 @@ $Button-height: $Form-input-height !default;
$Button-mimWidth: auto !default;
$Button-lineHeight: $Form-input-lineHeight !default;
$Button-paddingX: px2rem(12px) !default;
$Button-paddingY: ($Button-height - $Button-borderWidth * 2 - $Button-lineHeight * $Button-fontSize)/2 !default;
$Button-paddingY: (
$Button-height - $Button-borderWidth * 2 - $Button-lineHeight *
$Button-fontSize
)/2 !default;
$Button--iconOnly-minWidthRate: 4 / 3 !default;
@ -681,33 +722,43 @@ $Button--xs-fontSize: $fontSizeXs !default;
$Button--xs-height: px2rem(22px) !default;
$Button--xs-lineHeight: 18 / 11 !default;
$Button--xs-paddingX: px2rem(5px) !default;
$Button--xs-paddingY: ($Button--xs-height - $Button-borderWidth * 2 - $Button--xs-lineHeight * $Button--xs-fontSize)/2 !default;
$Button--xs-paddingY: (
$Button--xs-height - $Button-borderWidth * 2 - $Button--xs-lineHeight *
$Button--xs-fontSize
)/2 !default;
$Button--sm-fontSize: $fontSizeSm !default;
$Button--sm-height: px2rem(30px) !default;
$Button--sm-lineHeight: 18 / 12 !default;
$Button--sm-paddingX: px2rem(8px) !default;
$Button--sm-paddingY: ($Button--sm-height - $Button-borderWidth * 2 - $Button--sm-lineHeight * $Button--sm-fontSize)/2 !default;
$Button--sm-paddingY: (
$Button--sm-height - $Button-borderWidth * 2 - $Button--sm-lineHeight *
$Button--sm-fontSize
)/2 !default;
$Button--md-fontSize: $Button-fontSize !default;
$Button--md-height: $Button-height !default;
$Button--md-lineHeight: $Button-lineHeight !default;
$Button--md-paddingX: $Button-paddingX !default;
$Button--md-paddingY: ($Button--md-height - $Button-borderWidth * 2 - $Button--md-lineHeight * $Button--md-fontSize)/2 !default;
$Button--md-paddingY: (
$Button--md-height - $Button-borderWidth * 2 - $Button--md-lineHeight *
$Button--md-fontSize
)/2 !default;
$Button--lg-fontSize: $fontSizeLg !default;
$Button--lg-height: px2rem(46px) !default;
$Button--lg-lineHeight: 24 / 20 !default;
$Button--lg-paddingX: px2rem(16px) !default;
$Button--lg-paddingY: ($Button--lg-height - $Button-borderWidth * 2 - $Button--lg-lineHeight * $Button--lg-fontSize)/2 !default;
$Button--lg-paddingY: (
$Button--lg-height - $Button-borderWidth * 2 - $Button--lg-lineHeight *
$Button--lg-fontSize
)/2 !default;
$Button-boxShadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
$Button-boxShadow: inset 0 1px 0 rgba($white, 0.15),
0 1px 1px rgba($black, 0.075) !default;
$Button-onFocus-boxShadow: none !default;
$Button-onActive-boxShadow: inset 0 3px 5px rgba($black, .125) !default;
$Button-onDisabled-opacity: .65 !default;
$Button-onActive-boxShadow: inset 0 3px 5px rgba($black, 0.125) !default;
$Button-onDisabled-opacity: 0.65 !default;
$Button--link-onDisabled-color: $gray600 !default;
@ -715,7 +766,8 @@ $Button-borderRadius: $borderRadius !default;
$Button--lg-borderRadius: $borderRadius !default;
$Button--sm-borderRadius: $borderRadius !default;
$Button-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
$Button-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
$Button--primary-bg: $primary !default;
$Button--primary-border: $Button--primary-bg !default;
@ -724,17 +776,26 @@ $Button--primary-onHover-bg: darken($Button--primary-bg, 7.5%) !default;
$Button--primary-onHover-border: darken($Button--primary-border, 10%) !default;
$Button--primary-onHover-color: $Button--primary-color !default;
$Button--primary-onActive-bg: darken($Button--primary-bg, 10%) !default;
$Button--primary-onActive-border: darken($Button--primary-border, 12.5%) !default;
$Button--primary-onActive-border: darken(
$Button--primary-border,
12.5%
) !default;
$Button--primary-onActive-color: $Button--primary-color !default;
$Button--secondary-bg: $secondary !default;
$Button--secondary-border: $Button--secondary-bg !default;
$Button--secondary-color: $white !default;
$Button--secondary-onHover-bg: darken($Button--secondary-bg, 7.5%) !default;
$Button--secondary-onHover-border: darken($Button--secondary-border, 10%) !default;
$Button--secondary-onHover-border: darken(
$Button--secondary-border,
10%
) !default;
$Button--secondary-onHover-color: $Button--secondary-color !default;
$Button--secondary-onActive-bg: darken($Button--secondary-bg, 10%) !default;
$Button--secondary-onActive-border: darken($Button--secondary-border, 12.5%) !default;
$Button--secondary-onActive-border: darken(
$Button--secondary-border,
12.5%
) !default;
$Button--secondary-onActive-color: $Button--secondary-color !default;
$Button--success-bg: $success !default;
@ -744,7 +805,10 @@ $Button--success-onHover-bg: darken($Button--success-bg, 7.5%) !default;
$Button--success-onHover-border: darken($Button--success-border, 10%) !default;
$Button--success-onHover-color: $Button--success-color !default;
$Button--success-onActive-bg: darken($Button--success-bg, 10%) !default;
$Button--success-onActive-border: darken($Button--success-border, 12.5%) !default;
$Button--success-onActive-border: darken(
$Button--success-border,
12.5%
) !default;
$Button--success-onActive-color: $Button--success-color !default;
$Button--info-bg: $info !default;
@ -764,7 +828,10 @@ $Button--warning-onHover-bg: darken($Button--warning-bg, 7.5%) !default;
$Button--warning-onHover-border: darken($Button--warning-border, 10%) !default;
$Button--warning-onHover-color: $Button--warning-color !default;
$Button--warning-onActive-bg: darken($Button--warning-bg, 10%) !default;
$Button--warning-onActive-border: darken($Button--warning-border, 12.5%) !default;
$Button--warning-onActive-border: darken(
$Button--warning-border,
12.5%
) !default;
$Button--warning-onActive-color: $Button--warning-color !default;
$Button--danger-bg: $danger !default;
@ -797,7 +864,6 @@ $Button--dark-onActive-bg: darken($Button--dark-bg, 10%) !default;
$Button--dark-onActive-border: darken($Button--dark-border, 12.5%) !default;
$Button--dark-onActive-color: $Button--dark-color !default;
$Button--default-bg: $white !default;
$Button--default-border: $borderColor !default;
$Button--default-color: $text-color !default;
@ -805,7 +871,10 @@ $Button--default-onHover-bg: darken($Button--default-bg, 7.5%) !default;
$Button--default-onHover-border: darken($Button--default-border, 10%) !default;
$Button--default-onHover-color: $Button--default-color !default;
$Button--default-onActive-bg: darken($Button--default-bg, 10%) !default;
$Button--default-onActive-border: darken($Button--default-border, 12.5%) !default;
$Button--default-onActive-border: darken(
$Button--default-border,
12.5%
) !default;
$Button--default-onActive-color: $Button--default-color !default;
$Button--link-color: $text-color !default;
@ -821,12 +890,13 @@ $DropDown-menu-height: px2rem(34px) !default;
$DropDown-menu-minWidth: px2rem(160px) !default;
$DropDown-menu-paddingY: $gap-xs !default;
$DropDown-menu-paddingX: 0 !default;
$DropDown-menuItem-paddingY: ($DropDown-menu-height - $fontSizeBase * $lineHeightBase) / 2 !default;
$DropDown-menuItem-paddingY: (
$DropDown-menu-height - $fontSizeBase * $lineHeightBase
) / 2 !default;
$DropDown-menuItem-paddingX: $gap-sm !default;
$DropDown-menuItem-onHover-color: inherit !default;
$DropDown-menuItem-onHover-bg: $Button--default-onHover-bg !default;
// Checks
$Checkbox-gap: $gap-sm !default;
$Checkbox-size: px2rem(20px) !default;
@ -858,19 +928,20 @@ $Switch-onDisabled-color: #fff !default;
$ColorPicker-color: $Form-input-color !default;
$ColorPicker-bg: $white !default;
$ColorPicker-onHover-bg: darken($ColorPicker-bg, 5%) !default;
$ColorPicker-onDisabled-bg: $gray200!default;
$ColorPicker-onDisabled-bg: $gray200 !default;
$ColorPicker-onDisabled-color: $text--muted-color !default;
$ColorPicker-borderWidth: $Form-input-borderWidth !default;
$ColorPicker-borderColor: $Form-input-borderColor !default;
$ColorPicker-borderRadius: $Form-input-borderRadius !default;
$ColorPicker-borderRadius: $Form-input-borderRadius !default;
$ColorPicker-height: $Form-input-height !default;
$ColorPicker-lineHeight: $Form-input-lineHeight !default;
$ColorPicker-fontSize: $Form-input-fontSize !default;
$ColorPicker-paddingX: px2rem(12px) !default;
$ColorPicker-paddingY: ($ColorPicker-height - $ColorPicker-lineHeight * $ColorPicker-fontSize)/2 - $ColorPicker-borderWidth !default;
$ColorPicker-paddingY: (
$ColorPicker-height - $ColorPicker-lineHeight * $ColorPicker-fontSize
)/2 - $ColorPicker-borderWidth !default;
$ColorPicker-placeholderColor: $Form-input-placeholderColor !default;
$ColorPicker-onFocused-borderColor: $Form-input-onFocused-borderColor!default;
$ColorPicker-onFocused-borderColor: $Form-input-onFocused-borderColor !default;
// datepicker
$DatePicker-color: $Form-input-color !default;
@ -878,27 +949,28 @@ $DatePicker-bg: $white !default;
$DatePicker-onHover-bg: darken($DatePicker-bg, 5%) !default;
$DatePicker-borderWidth: $Form-input-borderWidth !default;
$DatePicker-borderColor: $Form-input-borderColor !default;
$DatePicker-borderRadius: $Form-input-borderRadius !default;
$DatePicker-borderRadius: $Form-input-borderRadius !default;
$DatePicker-height: $Form-input-height !default;
$DatePicker-lineHeight: $Form-input-lineHeight !default;
$DatePicker-fontSize: $Form-input-fontSize !default;
$DatePicker-paddingX: px2rem(12px) !default;
$DatePicker-paddingY: ($DatePicker-height - $DatePicker-lineHeight * $DatePicker-fontSize)/2 - $DatePicker-borderWidth !default;
$DatePicker-paddingY: (
$DatePicker-height - $DatePicker-lineHeight * $DatePicker-fontSize
)/2 - $DatePicker-borderWidth !default;
$DatePicker-placeholderColor: $Form-input-placeholderColor !default;
$DatePicker-iconColor: $gray600 !default;
$DatePicker-onHover-iconColor: darken($DatePicker-iconColor, 10%) !default;
$DatePicker-onFocused-borderColor: $Form-input-onFocused-borderColor!default;
$DatePicker-onFocused-borderColor: $Form-input-onFocused-borderColor !default;
$DatePicker-toggler-vendor: "FontAwesome" !default;
$DatePicker-toggler-fontSize: $Form-fontSize !default;
$DatePicker-toggler-icon: "\f073" !default;
$DatePicker-prevBtn-vendor: "FontAwesome" !default;
$DatePicker-prevBtn-fontSize: $fontSizeMd!default;
$DatePicker-prevBtn-fontSize: $fontSizeMd !default;
$DatePicker-prevBtn-icon: "\f104" !default;
$DatePicker-nextBtn-vendor: "FontAwesome" !default;
$DatePicker-nextBtn-fontSize: $fontSizeMd !default;
$DatePicker-nextBtn-icon: "\f105" !default;
$Calendar-fontSize: $fontSizeBase !default;
$Calendar-input-color: $info !default;
@ -909,14 +981,18 @@ $Calendar-input-borderRadius: $borderRadius !default;
$Calendar-input-height: px2rem(30px) !default;
$Calendar-input-lineHeight: $lineHeightBase;
$Calendar-input-paddingX: px2rem(10px) !default;
$Calendar-input-paddingY: ($Calendar-input-height - $Calendar-input-lineHeight*$Calendar-input-fontSize) / 2;
$Calendar-input-paddingY: (
$Calendar-input-height - $Calendar-input-lineHeight *
$Calendar-input-fontSize
) / 2;
$Calendar-btn-fontSize: $fontSizeSm !default;
$Calendar-btn-lineHeight: $lineHeightBase !default;
$Calendar-btn-height: px2rem(30px) !default;
$Calendar-btn-paddingX: px2rem(10px) !default;
$Calendar-btn-paddingY: ($Calendar-btn-height - $Calendar-btn-lineHeight * $Calendar-btn-fontSize)/2 !default;
$Calendar-btn-paddingY: (
$Calendar-btn-height - $Calendar-btn-lineHeight * $Calendar-btn-fontSize
)/2 !default;
$Calendar-btn-bg: $info !default;
$Calendar-btn-border: $Calendar-btn-bg !default;
@ -934,13 +1010,18 @@ $Calendar-btnCancel-border: $Calendar-btnCancel-bg !default;
$Calendar-btnCancel-borderRadius: $Button-borderRadius !default;
$Calendar-btnCancel-color: $text-color !default;
$Calendar-btnCancel-onHover-bg: darken($Calendar-btnCancel-bg, 7.5%) !default;
$Calendar-btnCancel-onHover-border: darken($Calendar-btnCancel-border, 10%) !default;
$Calendar-btnCancel-onHover-border: darken(
$Calendar-btnCancel-border,
10%
) !default;
$Calendar-btnCancel-onHover-color: $Calendar-btnCancel-color !default;
$Calendar-btnCancel-onActive-bg: darken($Calendar-btnCancel-bg, 10%) !default;
$Calendar-btnCancel-onActive-border: darken($Calendar-btnCancel-border, 12.5%) !default;
$Calendar-btnCancel-onActive-border: darken(
$Calendar-btnCancel-border,
12.5%
) !default;
$Calendar-btnCancel-onActive-color: $Calendar-btnCancel-color !default;
$Calendar-color: $text-color !default;
$Calendar-wLabel-color: #999 !default;
$Calendar-cell-bg: $white !default;
@ -961,12 +1042,18 @@ $ListControl-item-paddingX: px2rem(12px) !default;
$ListControl-item-paddingY: px2rem(6px) !default;
$ListControl-item-color: $text-color !default;
$ListControl-item-onHover-borderColor: darken($ListControl-item-borderColor, 10%) !default;
$ListControl-item-onHover-borderColor: darken(
$ListControl-item-borderColor,
10%
) !default;
$ListControl-item-onHover-bg: darken($ListControl-item-bg, 7.5%) !default;
$ListControl-item-onHover-color: $ListControl-item-color !default;
$ListControl-item-onActive-bg: $primary !default;
$ListControl-item-onActive-borderColor: darken($ListControl-item-onActive-bg, 10%) !default;
$ListControl-item-onActive-borderColor: darken(
$ListControl-item-onActive-bg,
10%
) !default;
$ListControl-item-onActive-color: $white !default;
$ListControl-item-onDisabled-opacity: 0.6 !default;
@ -997,24 +1084,30 @@ $Combo-addBtn-borderRadius: $Button-borderRadius;
$Combo-addBtn-height: px2rem(26px) !default;
$Combo-addBtn-lineHeight: $Button--sm-lineHeight !default;
$Combo-addBtn-paddingX: $Button--sm-paddingX !default;
$Combo-addBtn-paddingY: ($Combo-addBtn-height - $Button-borderWidth * 2 - $Combo-addBtn-lineHeight * $Combo-addBtn-fontSize)/2 !default;
$Combo-addBtn-paddingY: (
$Combo-addBtn-height - $Button-borderWidth * 2 -
$Combo-addBtn-lineHeight * $Combo-addBtn-fontSize
)/2 !default;
$Combo--vertical-item-gap: px2rem(5px);
$Combo--vertical-item-borderColor: $borderColor !default;
$Combo--vertical-item-onHover-borderColor: $info !default;
$Combo--vertical-item-borderWidth: $borderWidth !default;
$Combo--vertical-item-borderRadius: $borderRadius !default;
$Combo--vertical-item-paddingX: px2rem(10px)!default;
$Combo--vertical-item-paddingY: px2rem(10px)!default;
$Combo--vertical-item-paddingX: px2rem(10px) !default;
$Combo--vertical-item-paddingY: px2rem(10px) !default;
$Combo--vertical-itemToolbar-height: px2rem(25px) !default;
$Combo--vertical-itemToolbar-bg: $info !default;
$Combo--vertical-itemToolbar-color: darken($white, 5%) !default;
$Combo--vertical-itemToolbar-onHover-color: $white !default;
$Combo--vertical-itemToolbar-borderWidth: $borderWidth !default;
$Combo--vertical-itemToolbar-borderColor: darken($Combo--vertical-itemToolbar-bg, 5%) !default;
$Combo--vertical-itemToolbar-borderColor: darken(
$Combo--vertical-itemToolbar-bg,
5%
) !default;
$Combo--vertical-itemToolbar-borderRadius: px2rem(3px) !default;
$Combo--vertical-itemToolbar-transion: all .25s ease-in-out !default;
$Combo--vertical-itemToolbar-transion: all 0.25s ease-in-out !default;
$Combo--vertical-itemToolbar-positionTop: -$Combo--vertical-itemToolbar-height !default;
$Combo--vertical-itemToolbar-positionRight: px2rem(5px) !default;
@ -1028,7 +1121,10 @@ $SubForm--addBtn-onHover-bg: darken($SubForm--addBtn-bg, 7.5%) !default;
$SubForm--addBtn-onHover-border: darken($SubForm--addBtn-border, 10%) !default;
$SubForm--addBtn-onHover-color: $SubForm--addBtn-color !default;
$SubForm--addBtn-onActive-bg: darken($SubForm--addBtn-bg, 10%) !default;
$SubForm--addBtn-onActive-border: darken($SubForm--addBtn-border, 12.5%) !default;
$SubForm--addBtn-onActive-border: darken(
$SubForm--addBtn-border,
12.5%
) !default;
$SubForm--addBtn-onActive-color: $SubForm--addBtn-color !default;
$SubForm--addBtn-fontSize: $Button--sm-fontSize !default;
@ -1036,8 +1132,10 @@ $SubForm--addBtn-borderRadius: $Button-borderRadius;
$SubForm--addBtn-height: $Button--sm-height !default;
$SubForm--addBtn-lineHeight: $Button--sm-lineHeight !default;
$SubForm--addBtn-paddingX: $Button--sm-paddingX !default;
$SubForm--addBtn-paddingY: ($SubForm--addBtn-height - $Button-borderWidth * 2 - $SubForm--addBtn-lineHeight * $SubForm--addBtn-fontSize)/2 !default;
$SubForm--addBtn-paddingY: (
$SubForm--addBtn-height - $Button-borderWidth * 2 -
$SubForm--addBtn-lineHeight * $SubForm--addBtn-fontSize
)/2 !default;
// InputRange
$InputRange-fontFamily: $fontFamilyBase !default;
@ -1050,14 +1148,17 @@ $InputRange-onDisabled-color: #cccccc !default;
$InputRange-slider-bg: $InputRange-primaryColor !default;
$InputRange-slider-border: px2rem(1px) solid $InputRange-primaryColor !default;
$InputRange-slider-onFocus-borderRadius: $borderRadiusMd !default;
$InputRange-slider-onFocus-boxShadow: 0 0 0 $InputRange-slider-onFocus-borderRadius transparentize($InputRange-slider-bg, 0.8) !default;
$InputRange-slider-onFocus-boxShadow: 0 0 0
$InputRange-slider-onFocus-borderRadius
transparentize($InputRange-slider-bg, 0.8) !default;
$InputRange-slider-height: px2rem(24px) !default;
$InputRange-slider-width: px2rem(18px) !default;
$InputRange-slider-transition: transform 0.3s ease-out, box-shadow 0.3s ease-out !default;
$InputRange-sliderContainer-transition: left 0.3s ease-out !default;
$InputRange-slider-onActive-transform: scale(1.3) !default;
$InputRange-slider-onDisabled-bg: $InputRange-onDisabled-color !default;
$InputRange-slider-onDisabled-border: px2rem(1px) solid $InputRange-onDisabled-color !default;
$InputRange-slider-onDisabled-border: px2rem(1px) solid
$InputRange-onDisabled-color !default;
// input-range-label
$InputRange-label-color: $InputRange-neutralColor !default;
@ -1080,10 +1181,16 @@ $TagControl-sugBtn-bg: $Button--default-bg !default;
$TagControl-sugBtn-border: $Button--default-border !default;
$TagControl-sugBtn-color: $Button--default-color !default;
$TagControl-sugBtn-onHover-bg: darken($TagControl-sugBtn-bg, 7.5%) !default;
$TagControl-sugBtn-onHover-border: darken($TagControl-sugBtn-border, 10%) !default;
$TagControl-sugBtn-onHover-border: darken(
$TagControl-sugBtn-border,
10%
) !default;
$TagControl-sugBtn-onHover-color: $Button--default-color !default;
$TagControl-sugBtn-onActive-bg: darken($TagControl-sugBtn-bg, 10%) !default;
$TagControl-sugBtn-onActive-border: darken($TagControl-sugBtn-border, 12.5%) !default;
$TagControl-sugBtn-onActive-border: darken(
$TagControl-sugBtn-border,
12.5%
) !default;
$TagControl-sugBtn-onActive-color: $TagControl-sugBtn-color !default;
$TagControl-sugBtn-borderWidth: $Button-borderWidth !default;
@ -1092,7 +1199,10 @@ $TagControl-sugBtn-borderRadius: $Button-borderRadius !default;
$TagControl-sugBtn-height: $Button--sm-height !default;
$TagControl-sugBtn-lineHeight: $Button--sm-lineHeight !default;
$TagControl-sugBtn-paddingX: $Button--sm-paddingX !default;
$TagControl-sugBtn-paddingY: ($TagControl-sugBtn-height - $Button-borderWidth * 2 - $TagControl-sugBtn-lineHeight * $TagControl-sugBtn-fontSize)/2 !default;
$TagControl-sugBtn-paddingY: (
$TagControl-sugBtn-height - $Button-borderWidth * 2 -
$TagControl-sugBtn-lineHeight * $TagControl-sugBtn-fontSize
)/2 !default;
// Wizard
$Wizard-steps-bg: $gray100 !default;
@ -1126,7 +1236,7 @@ $Panel-borderRadius: $borderRadius !default;
$Panel-marginBottom: px2rem(20px) !default;
$Panel-bg: $white !default;
$Panel-border: $borderWidth solid transparent !default;
$Panel-boxShadow: 0 px2rem(1px) px2rem(1px) rgba(0, 0, 0, .05) !default;
$Panel-boxShadow: 0 px2rem(1px) px2rem(1px) rgba(0, 0, 0, 0.05) !default;
$Panel--default-bg: #f6f8f8 !default;
$Panel--default-color: $text-color !default;
$Panel--default-badgeColor: #f5f5f5 !default;
@ -1147,7 +1257,7 @@ $Panel-footerPadding: px2rem(10px) px2rem(15px) !default;
$Panel-borderWidth: px2rem(1px) !default;
$Panel-footerButtomMarginLeft: $gap-sm !default;
$Panel-btnToolbarTextAlign: right !default;
$Panel-fixedBottom-boxShadow: 0 -0.5rem 1rem rgba($black, .15) !default;
$Panel-fixedBottom-boxShadow: 0 -0.5rem 1rem rgba($black, 0.15) !default;
// Pagination
$Pagination-height: px2rem(30px) !default;
@ -1165,7 +1275,7 @@ $TransferSelect-heading-borderBottom: $borderWidth solid $borderColor !default;
// Tree
$Tree-indent: px2rem(20px) !default;
$Tree-itemArrowWidth: px2rem(10px)!default;
$Tree-itemArrowWidth: px2rem(10px) !default;
$Tree-arrowVendor: "FontAwesome" !default;
$Tree-unfoldedArrowContent: "\f107" !default;
$Tree-foldedArrowContent: "\f105" !default;
@ -1178,7 +1288,7 @@ $Tree-folderIconContent: "\f07b" !default;
$Tree-itemText--onChecked-color: $Form-selectValue-color !default;
// IconPicker
$IconPicker-tabs-bg: #F0F3F4 !default;
$IconPicker-tabs-bg: #f0f3f4 !default;
$IconPicker-tab-padding: 0 px2rem(5px) !default;
$IconPicker-tab-height: px2rem(30px) !default;
$IconPicker-tab-lineHeight: px2rem(30px) !default;
@ -1223,4 +1333,4 @@ $Audio-thumb-marginTop: px2rem(-5px) !default;
$Audio-svg-width: px2rem(20px) !default;
$Audio-svg-height: px2rem(20px) !default;
$Audio-svg-top: px2rem(6px) !default;
$Audio-item-margin: px2rem(10px) !default;
$Audio-item-margin: px2rem(10px) !default;

446
scss/base/_normalize.scss
View File

@ -8,334 +8,334 @@
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
html {
line-height: 1.15; // 1
-webkit-text-size-adjust: 100%; //2
}
/* Sections
========================================================================== */
/**
/**
* Remove the margin in all browsers.
*/
body {
body {
margin: 0;
}
/**
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
}
/* Grouping content
========================================================================== */
/**
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
hr {
box-sizing: content-box; // 1
height: 0; // 2
overflow: visible; //2
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
pre {
font-family: monospace, monospace; // 1
font-size: 1em; // 2
}
/* Text-level semantics
========================================================================== */
/**
/**
* Remove the gray background on active links in IE 10.
*/
a {
a {
background-color: transparent;
}
/**
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
abbr[title] {
border-bottom: none; // 1
text-decoration: underline; // 2
text-decoration: underline dotted; // 2
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
b,
strong {
font-weight: bolder;
}
/**
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
code,
kbd,
samp {
font-family: monospace, monospace; // 1
font-size: 1em; // 2
}
/**
* Add the correct font size in all browsers.
*/
small {
small {
font-size: 80%;
}
/**
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
}
sub {
bottom: -0.25em;
}
sup {
}
sup {
top: -0.5em;
}
/* Embedded content
}
/* Embedded content
========================================================================== */
/**
/**
* Remove the border on images inside links in IE 10.
*/
img {
img {
border-style: none;
}
/* Forms
}
/* Forms
========================================================================== */
/**
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
button,
input,
optgroup,
select,
textarea {
font-family: inherit; // 1
font-size: 100%; // 1
line-height: 1.15; // 1
margin: 0; // 2
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
button,
input {
overflow: visible; // 1
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
button,
select {
text-transform: none; // 1
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
}
/**
* Correct the padding in Firefox.
*/
fieldset {
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
legend {
box-sizing: border-box; // 1
color: inherit; // 2
display: table; // 1
max-width: 100%; // 1
padding: 0; // 3
white-space: normal; // 1
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
progress {
vertical-align: baseline;
}
/**
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
textarea {
overflow: auto;
}
/**
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; // 1
padding: 0; // 2
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
[type="search"] {
-webkit-appearance: textfield; // 1
outline-offset: -2px; // 2
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
::-webkit-file-upload-button {
-webkit-appearance: button; // 1
font: inherit; // 2
}
/* Interactive
========================================================================== */
/*
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
details {
display: block;
}
/*
}
/*
* Add the correct display in all browsers.
*/
summary {
summary {
display: list-item;
}
/* Misc
}
/* Misc
========================================================================== */
/**
/**
* Add the correct display in IE 10+.
*/
template {
template {
display: none;
}
/**
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
[hidden] {
display: none;
}
}

2
scss/base/_reset.scss
View File

@ -15,4 +15,4 @@ html {
// Remove figure margin
figure {
margin: 0;
}
}

15
scss/base/_typography.scss
View File

@ -1,11 +1,11 @@
/**
* Basic typography style for copy text
*/
html {
html {
font-size: $remFactor;
}
}
body {
body {
color: $body-color;
background-color: $body-bg;
font-size: $body-size;
@ -30,7 +30,12 @@ label {
font-weight: $fontWeightNormal;
}
h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: $fontWeightNormal;
color: $text--loud-color;
line-height: 1.1;
@ -38,4 +43,4 @@ h1, h2, h3, h4, h5, h6 {
.is-matched {
color: $danger;
}
}

8
scss/components/_alert.scss
View File

@ -19,14 +19,14 @@
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;
opacity: 0.2;
&:hover {
&:hover {
color: #000;
text-decoration: none;
cursor: pointer;
filter: alpha(opacity=50);
opacity: .5;
opacity: 0.5;
}
}
@ -53,4 +53,4 @@
background-color: $Alert--warning-bg;
border-color: $Alert--warning-borderColor;
}
}
}

15
scss/components/_audio.scss
View File

@ -50,6 +50,7 @@
border: $Audio-border;
display: inline-block;
padding-left: $Audio-item-margin;
&-rates {
display: inline-block;
width: $Audio-rate-width;
@ -59,9 +60,11 @@
cursor: pointer;
margin-right: $Audio-item-margin;
}
&-rateControl {
display: inline-block;
margin-right: $Audio-item-margin;
&::after {
display: inline-block;
clear: both;
@ -80,6 +83,7 @@
border-right: $Audio-rateControlItem-borderRight;
}
}
&-play {
display: inline-block;
width: $Audio-play-width;
@ -90,22 +94,25 @@
@include svg();
}
}
&-times {
display: inline-block;
width: $Audio-times-width;
margin-right: $Audio-item-margin;
cursor: default;
}
&-process {
display: inline-block;
width: $Audio-process-width;
cursor: pointer;
margin-right: $Audio-item-margin;
input[type=range] {
input[type="range"] {
@include input-range();
}
}
&-volume {
display: inline-block;
width: $Audio-volume-width;
@ -117,13 +124,15 @@
@include svg();
}
}
&-volumeControl {
display: inline-block;
width: $Audio-volumeControl-width;
height: $Audio-volumeControl-height;
line-height: $Audio-volumeControl-lineHeight;
margin-right: $Audio-item-margin;
input[type=range] {
input[type="range"] {
@include input-range();
}
@ -137,4 +146,4 @@
@include svg();
}
}
}
}

27
scss/components/_button-group.scss
View File

@ -3,39 +3,44 @@
display: inline-flex;
vertical-align: middle;
>.#{$ns}Button {
> .#{$ns}Button {
position: relative;
flex: 0 1 auto;
}
@if $Button-borderWidth > 0 {
>.#{$ns}Button {
@if $Button-borderWidth>0 {
> .#{$ns}Button {
@include hover {
z-index: 1;
}
&:focus,
&:active,
&.active {
z-index: 1;
}
}
.#{$ns}Button + .#{$ns}Button,
.#{$ns}Button + .#{$ns}ButtonGroup,
.#{$ns}ButtonGroup + .#{$ns}Button,
.#{$ns}ButtonGroup + .#{$ns}ButtonGroup {
margin-left: -$Button-borderWidth;
}
} @else if (variable-exists("ButtonGroup-divider-width") and variable-exists("ButtonGroup-divider-color")) {
} @else if
(
variable-exists("ButtonGroup-divider-width") and
variable-exists("ButtonGroup-divider-color")
)
{
background-color: $ButtonGroup-divider-color;
>.#{$ns}Button + .#{$ns}Button {
> .#{$ns}Button + .#{$ns}Button {
margin-left: $ButtonGroup-divider-width;
}
}
}
.#{$ns}ButtonToolbar {
display: inline-flex;
flex-wrap: wrap;
@ -52,7 +57,7 @@
margin-left: 0;
}
@if $Button-borderWidth > 0 {
@if $Button-borderWidth>0 {
> .#{$ns}Button:not(:last-child),
> .#{$ns}ButtonGroup:not(:last-child) > .#{$ns}Button {
border-top-right-radius: 0;
@ -67,7 +72,6 @@
}
}
.#{$ns}ButtonGroup--vertical {
flex-direction: column;
align-items: flex-start;
@ -99,7 +103,6 @@
}
}
.#{$ns}ButtonGroupControl {
display: inline-block;
@ -110,4 +113,4 @@
> .#{$ns}ButtonGroup--xs {
margin-top: ($Form-input-height - $Button--xs-height) / 2;
}
}
}

61
scss/components/_button.scss
View File

@ -1,4 +1,3 @@
.#{$ns}Button {
display: inline-block;
font-weight: $Button-fontWeight;
@ -10,11 +9,18 @@
transition: $Button-transition;
white-space: nowrap;
@if $Button-mimWidth != auto {
@if $Button-mimWidth !=auto {
min-width: $Button-mimWidth;
}
@include button-size($Button-paddingY, $Button-paddingX, $Button-fontSize, $Button-lineHeight, $Button-borderRadius, $Button-height);
@include button-size(
$Button-paddingY,
$Button-paddingX,
$Button-fontSize,
$Button-lineHeight,
$Button-borderRadius,
$Button-height
);
@include hover-focus {
color: $text-color;
@ -67,16 +73,16 @@
line-height: inherit;
}
>.fa,
>.iconfont,
>.glyphicon {
> .fa,
> .iconfont,
> .glyphicon {
font-size: inherit;
}
}
a.#{$ns}Button.is-disabled,
fieldset:disabled a.#{$ns}Button {
pointer-events: none;
pointer-events: none;
}
.#{$ns}Button--primary {
@ -207,10 +213,10 @@ fieldset:disabled a.#{$ns}Button {
.#{$ns}Button--xs {
@include button-size(
$Button--xs-paddingY,
$Button--xs-paddingX,
$Button--xs-fontSize,
$Button--xs-lineHeight,
$Button--xs-paddingY,
$Button--xs-paddingX,
$Button--xs-fontSize,
$Button--xs-lineHeight,
$Button--sm-borderRadius,
$Button--xs-height
);
@ -222,10 +228,10 @@ fieldset:disabled a.#{$ns}Button {
.#{$ns}Button--sm {
@include button-size(
$Button--sm-paddingY,
$Button--sm-paddingX,
$Button--sm-fontSize,
$Button--sm-lineHeight,
$Button--sm-paddingY,
$Button--sm-paddingX,
$Button--sm-fontSize,
$Button--sm-lineHeight,
$Button--sm-borderRadius,
$Button--sm-height
);
@ -237,10 +243,10 @@ fieldset:disabled a.#{$ns}Button {
.#{$ns}Button--md {
@include button-size(
$Button--md-paddingY,
$Button--md-paddingX,
$Button--md-fontSize,
$Button--md-lineHeight,
$Button--md-paddingY,
$Button--md-paddingX,
$Button--md-fontSize,
$Button--md-lineHeight,
$Button-borderRadius,
$Button--md-height
);
@ -252,10 +258,10 @@ fieldset:disabled a.#{$ns}Button {
.#{$ns}Button--lg {
@include button-size(
$Button--lg-paddingY,
$Button--lg-paddingX,
$Button--lg-fontSize,
$Button--lg-lineHeight,
$Button--lg-paddingY,
$Button--lg-paddingX,
$Button--lg-fontSize,
$Button--lg-lineHeight,
$Button--lg-borderRadius,
$Button--lg-height
);
@ -267,7 +273,7 @@ fieldset:disabled a.#{$ns}Button {
.#{$ns}Button--iconOnly {
min-width: $Button-height * $Button--iconOnly-minWidthRate;
&:not(.#{$ns}Button--link) {
> .fa,
> .iconfont {
@ -280,7 +286,6 @@ fieldset:disabled a.#{$ns}Button {
}
}
.#{$ns}Button--link {
width: auto;
min-width: auto;
@ -305,8 +310,8 @@ fieldset:disabled a.#{$ns}Button {
.#{$ns}Button--block {
display: block;
width: 100%;
+.#{$ns}Button--block {
+ .#{$ns}Button--block {
margin-top: $gap-base;
}
}
@ -329,4 +334,4 @@ input[type="button"] {
.#{$ns}Button--disabled-wrap {
display: inline-block !important;
}
}

8
scss/components/_card.scss
View File

@ -134,7 +134,7 @@
border-color: $Card-onChecked-borderColor;
color: $Card-onChecked-color;
.#{$ns}Card-actions,
.#{$ns}Card-actions,
.#{$ns}Card-actions > a {
border-color: $Card-onChecked-borderColor;
color: $Card-onChecked-color;
@ -156,7 +156,7 @@
border-color: $Card-onModified-borderColor;
color: $Card-onModified-color;
.#{$ns}Card-actions,
.#{$ns}Card-actions,
.#{$ns}Card-actions > a {
border-color: $Card-onModified-borderColor;
color: $Card-onModified-color;
@ -173,6 +173,6 @@
}
.is-dragging > & {
opacity: $Card-onDragging-opacity;
opacity: $Card-onDragging-opacity;
}
}
}

23
scss/components/_cards.scss
View File

@ -3,12 +3,11 @@
@include clearfix();
padding: $Cards-toolbar-paddingY $Cards-toolbar-paddingX;
margin-bottom: $gap-base;
}
&-actions {
display: inline-block;
> * {
margin-right: $Crud-toolbar-gap;
}
@ -74,13 +73,14 @@
text-align: center;
height: $Cards-placeholder-height;
line-height: $Cards-placeholder-height;
border: $Card-borderWidth solid $Card-borderColor;
border-radius: $Card-borderRadius;
}
&--masonry {
display: block;
&:after {
content: none;
}
@ -103,18 +103,23 @@
.#{$ns}Cards--masonrySm1 {
column-count: 12;
}
.#{$ns}Cards--masonrySm2 {
column-count: 6;
}
.#{$ns}Cards--masonrySm3 {
column-count: 4;
}
.#{$ns}Cards--masonrySm4 {
column-count: 3;
}
.#{$ns}Cards--masonrySm6 {
column-count: 2;
}
.#{$ns}Cards--masonrySm12 {
column-count: 1;
}
@ -129,18 +134,23 @@
.#{$ns}Cards--masonryMd1 {
column-count: 12;
}
.#{$ns}Cards--masonryMd2 {
column-count: 6;
}
.#{$ns}Cards--masonryMd3 {
column-count: 4;
}
.#{$ns}Cards--masonryMd4 {
column-count: 3;
}
.#{$ns}Cards--masonryMd6 {
column-count: 2;
}
.#{$ns}Cards--masonryMd12 {
column-count: 1;
}
@ -150,19 +160,24 @@
.#{$ns}Cards--masonryLg1 {
column-count: 12;
}
.#{$ns}Cards--masonryLg2 {
column-count: 6;
}
.#{$ns}Cards--masonryLg3 {
column-count: 4;
}
.#{$ns}Cards--masonryLg4 {
column-count: 3;
}
.#{$ns}Cards--masonryLg6 {
column-count: 2;
}
.#{$ns}Cards--masonryLg12 {
column-count: 1;
}
}
}

3
scss/components/_chart.scss
View File

@ -1,10 +1,11 @@
.#{$ns}Chart {
min-height: 300px;
position: relative;
&-placeholder {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}

6
scss/components/_collapse.scss
View File

@ -16,9 +16,9 @@
text-align: center;
margin-left: $gap-xs;
cursor: pointer;
&:before {
content: '';
content: "";
position: relative;
display: inline-block;
width: px2rem(6px);
@ -39,4 +39,4 @@
&--collapsable &-header {
user-select: none;
}
}
}

4
scss/components/_copyable.scss
View File

@ -5,6 +5,6 @@
cursor: pointer;
&:hover {
color: $Copyable-onHover-iconColor
color: $Copyable-onHover-iconColor;
}
}
}

2
scss/components/_crud.scss
View File

@ -127,4 +127,4 @@
margin-left: $Crud-toolbar-gap;
}
}
}
}

2
scss/components/_divider.scss
View File

@ -3,4 +3,4 @@
border-bottom: $borderWidth dashed $borderColor;
height: px2rem(2px);
font-size: 0;
}
}

8
scss/components/_drawer.scss
View File

@ -44,7 +44,8 @@
padding: $Drawer-header-padding;
background-color: $Drawer-header-bg;
@include clearfix();
border-bottom: $Drawer-content-borderWidth solid lighten($Drawer-content-borderColor, 5%);
border-bottom: $Drawer-content-borderWidth solid
lighten($Drawer-content-borderColor, 5%);
border-top-left-radius: $Drawer-content-borderRadius;
border-top-right-radius: $Drawer-content-borderRadius;
}
@ -92,7 +93,8 @@
align-items: flex-end;
justify-content: flex-end;
padding: $Drawer-footer-padding;
border-top: $Drawer-content-borderWidth solid lighten($Drawer-content-borderColor, 5%);
border-top: $Drawer-content-borderWidth solid
lighten($Drawer-content-borderColor, 5%);
border-bottom-left-radius: $Drawer-content-borderRadius;
border-bottom-right-radius: $Drawer-content-borderRadius;
@ -314,4 +316,4 @@
width: px2rem(12px);
height: px2rem(20px);
}
}
}

4
scss/components/_dropdown.scss
View File

@ -1,4 +1,3 @@
.#{$ns}DropDown {
position: relative;
display: inline-block;
@ -68,10 +67,9 @@
display: block;
text-decoration: none;
}
&-popover {
border: none;
box-shadow: none;
}
}
}

6
scss/components/_list.scss
View File

@ -14,7 +14,7 @@
&-actions {
display: inline-block;
> * {
margin-right: $Crud-toolbar-gap;
}
@ -84,7 +84,7 @@
.#{$ns}ListItem {
@include clearfix();
& + & {
border-top: $ListItem-borderWidth solid $ListItem-borderColor;
}
@ -173,4 +173,4 @@
&.is-dragging {
opacity: $ListItem-onDragging-opacity;
}
}
}

15
scss/components/_modal.scss
View File

@ -66,7 +66,7 @@
background-color: $Modal-header-bg;
@include clearfix();
border-bottom: $Modal-body-borderTop;
@if $Modal-content-borderRadius {
border-top-left-radius: $Modal-content-borderRadius;
border-top-right-radius: $Modal-content-borderRadius;
@ -84,6 +84,7 @@
line-height: inherit;
text-decoration: none;
vertical-align: middle;
svg {
width: $Modal-close-width;
height: $Modal-close-width;
@ -96,6 +97,7 @@
&:hover {
text-decoration: none;
color: $Model-close-onHover-color;
svg {
fill: $Model-close-onHover-color;
}
@ -111,7 +113,8 @@
}
&-body {
padding: $Modal-body--noHeader-paddingTop $Modal-body-paddingX $Modal-body-paddingY;
padding: $Modal-body--noHeader-paddingTop $Modal-body-paddingX
$Modal-body-paddingY;
flex-basis: 0;
flex-grow: 1;
}
@ -140,10 +143,12 @@
}
}
@for $i from (2) through 10 {
@for $i from (2) through 10 {
.#{$ns}Modal--#{$i}th {
.#{$ns}Modal-content {
margin-top: $Modal-content-startMarginTop + ($i - 1) * $Modal-content-stepMarginTop;
margin-top: $Modal-content-startMarginTop +
($i - 1) *
$Modal-content-stepMarginTop;
}
}
}
@ -182,4 +187,4 @@
.#{$ns}Dialog-error {
color: $danger;
}
}

57
scss/components/_nav.scss
View File

@ -2,12 +2,15 @@
list-style: none;
margin: 0;
padding: 0;
&--tabs {
border-bottom: $Tabs-borderWidth solid $Tabs-borderColor;
.#{$ns}Nav-item {
margin-bottom: -$Tabs-borderWidth;
display: inline-block;
>a {
> a {
font-size: $Nav-item-fontSize;
display: block;
outline: none;
@ -20,20 +23,23 @@
padding: $gap-sm $gap-base;
cursor: pointer;
}
&:hover>a,
>a:focus {
&:hover > a,
> a:focus {
border-color: $Tabs-onHover-borderColor;
text-decoration: none;
}
&.disabled>a,
&.is-disabled>a {
&.disabled > a,
&.is-disabled > a {
color: $Tabs-onDisabled-color;
background-color: transparent;
border-color: transparent;
pointer-events: none;
}
&.active>a,
&.is-active>a {
&.active > a,
&.is-active > a {
color: $Tabs-onActive-color;
background-color: $Tabs-onActive-bg;
border-color: $Tabs-onActive-borderColor;
@ -41,14 +47,17 @@
border-bottom-width: $Tabs-onActive-borderBottomWidth;
}
}
.#{$ns}Nav-itemIcon {
margin-right: $gap-xs;
}
}
&--stacked {
.#{$ns}Nav-item {
position: relative;
>a {
> a {
display: block;
outline: none;
color: $Nav-item-color;
@ -58,33 +67,39 @@
background-color: $Nav-item-bg;
border-radius: $Nav-item-borderRadius;
}
&:hover>a,
>a:focus {
&:hover > a,
> a:focus {
border-color: $Nav-item-onHover-color;
text-decoration: none;
background-color: $Nav-item-onHover-bg;
}
&.disabled>a,
&.is-disabled>a {
&.disabled > a,
&.is-disabled > a {
color: $Nav-item-onDisabled-color;
background-color: transparent;
pointer-events: none;
}
&.active>a,
&.is-active>a {
&.active > a,
&.is-active > a {
color: $Nav-item-onActive-color;
background-color: $Nav-item-onActive-bg;
border-left: $Nav-item-onActive-borderLeft;
padding-left: px2rem(12px);
}
&.is-unfolded {
.#{$ns}Nav-itemToggler {
transform: rotate(180deg) scale(0.8);
}
.#{$ns}Nav-subItems {
display: block;
}
}
.#{$ns}Nav-itemToggler {
position: absolute;
width: px2rem(30px);
@ -96,17 +111,20 @@
right: px2rem(2px);
cursor: pointer;
transform: scale(0.8);
transition: transform .3s;
transition: transform 0.3s;
}
.#{$ns}Nav-subItems {
display: none;
padding-left: 0;
list-style: none;
}
.#{$ns}Nav-item {
font-size: $Nav-subItem-fontSize;
a:before {
content: '';
content: "";
display: inline-block;
width: px2rem(4px);
height: px2rem(4px);
@ -115,11 +133,12 @@
margin-right: px2rem(8px);
vertical-align: middle;
}
&.active>a:before,
&.is-active>a:before {
&.active > a:before,
&.is-active > a:before {
background-color: $Nav-subItem-onActiveBeforeBg;
}
}
}
}
}
}

14
scss/components/_page.scss
View File

@ -1,12 +1,11 @@
.#{$ns}Page {
&-header {
padding: $Page-header-paddingY $Page-header-paddingX;
}
&-main {
background: $Page-main-bg;
};
}
&-content {
padding: $Page-content-paddingY $Page-content-paddingX;
@ -24,18 +23,18 @@
width: 100%;
border-spacing: 0;
.#{$ns}Page-header,
.#{$ns}Page-header,
.#{$ns}Page-toolbar {
display: table-cell;
vertical-align: middle;
}
.#{$ns}Page-toolbar {
text-align: right;
padding-right: $gap-base;
}
}
&-title {
margin: 0;
padding: 0;
@ -51,7 +50,6 @@
&-asideTplWrapper {
padding: $gap-xs;
}
}
.#{$ns}Page-aside {
@ -78,7 +76,7 @@
height: 100%;
border-spacing: 0;
.#{$ns}Page-aside,
.#{$ns}Page-aside,
.#{$ns}Page-content {
display: table-cell;
vertical-align: top;
@ -93,4 +91,4 @@
.#{$ns}Button + .#{$ns}Button {
margin-left: $gap-xs;
}
}
}

70
scss/components/_pagination.scss
View File

@ -3,10 +3,12 @@
padding-left: 0;
margin-bottom: px2rem(-10px);
border-radius: px2rem(4px);
>li {
> li {
display: inline;
>a,
>span {
> a,
> span {
user-select: none;
position: relative;
float: left;
@ -22,68 +24,80 @@
margin-left: 0;
font-size: $Pagination-fontSize;
}
>a:hover,
>span:hover,
>a:focus,
>span:focus {
> a:hover,
> span:hover,
> a:focus,
> span:focus {
background-color: transparent;
color: $primary;
}
}
>li.disabled {
>span,
>a {
> li.disabled {
> span,
> a {
cursor: not-allowed;
}
>a,
>span,
>a:hover,
>span:hover,
>a:focus,
>span:focus {
> a,
> span,
> a:hover,
> span:hover,
> a:focus,
> span:focus {
color: #cccccc;
}
}
>li.active {
>a,
>span,
>a:hover,
>span:hover,
>a:focus,
>span:focus {
> li.active {
> a,
> span,
> a:hover,
> span:hover,
> a:focus,
> span:focus {
background-color: $primary;
color: $white;
}
}
&-prev,
&-next {
font-family: $Pagination-arrowVendor;
}
&-prev {
>span {
> span {
cursor: pointer;
&::before {
content: $Pagination-prevArrowContent;
}
}
}
&-ellipsis {
>a>span {
> a > span {
position: relative;
top: px2rem(-4px);
}
}
&-next {
>span {
> span {
cursor: pointer;
&::before {
content: $Pagination-nextArrowContent;
}
}
}
&-inputGroup {
display: inline-flex;
flex-wrap: nowrap;
.#{$ns}Pagination-input {
width: px2rem(50px);
height: $Pagination-height;
@ -91,11 +105,13 @@
border-top-left-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
padding: px2rem(5px) px2rem(10px);
&:focus {
outline: none;
border: $borderWidth solid $primary;
}
}
.#{$ns}Button {
height: $Pagination-height;
margin-left: px2rem(-1px);
@ -103,4 +119,4 @@
padding: 0 px2rem(10px);
}
}
}
}

76
scss/components/_panel.scss
View File

@ -22,108 +22,135 @@
/* 主题 */
&--default {
border-color: $borderColor;
>.#{$ns}Panel-heading {
> .#{$ns}Panel-heading {
background-color: $Panel--default-bg;
color: $Panel--default-color;
.badge {
color: $Panel--default-badgeColor;
background-color: $Panel--default-badgeBg;
}
}
>.#{$ns}Panel-heading {
> .#{$ns}Panel-heading {
border-color: $Panel--default-headingBorderColor;
}
}
&--primary {
border-color: $primary;
>.#{$ns}Panel-heading {
> .#{$ns}Panel-heading {
background-color: $primary;
color: $white;
.badge {
color: $primary;
background-color: $white
background-color: $white;
}
}
>.#{$ns}Panel-heading,
>.#{$ns}Panel-footer {
> .#{$ns}Panel-heading,
> .#{$ns}Panel-footer {
border-color: $primary;
}
}
&--success {
border-color: $success;
>.#{$ns}Panel-heading {
> .#{$ns}Panel-heading {
background-color: $success;
color: $white;
.badge {
color: $success;
background-color: $white
background-color: $white;
}
}
>.#{$ns}Panel-heading,
>.#{$ns}Panel-footer {
> .#{$ns}Panel-heading,
> .#{$ns}Panel-footer {
border-color: $success;
}
}
&--info {
border-color: $info;
>.#{$ns}Panel-heading {
> .#{$ns}Panel-heading {
background-color: $info;
color: $white;
.badge {
color: $info;
background-color: $white
background-color: $white;
}
}
>.#{$ns}Panel-heading,
>.#{$ns}Panel-footer {
> .#{$ns}Panel-heading,
> .#{$ns}Panel-footer {
border-color: $info;
}
}
&--warning {
border-color: $warning;
>.#{$ns}Panel-heading {
> .#{$ns}Panel-heading {
background-color: $warning;
color: $white;
.badge {
color: $warning;
background-color: $white
background-color: $white;
}
}
>.#{$ns}Panel-heading,
>.#{$ns}Panel-footer {
> .#{$ns}Panel-heading,
> .#{$ns}Panel-footer {
border-color: $warning;
}
}
&--danger {
border-color: $danger;
>.#{$ns}Panel-heading {
> .#{$ns}Panel-heading {
background-color: $danger;
color: $white;
.badge {
color: $danger;
background-color: $white
background-color: $white;
}
}
>.#{$ns}Panel-heading,
>.#{$ns}Panel-footer {
> .#{$ns}Panel-heading,
> .#{$ns}Panel-footer {
border-color: $danger;
}
}
/* 子组件 */
&-heading {
padding: $Panel-headingPadding;
border-bottom: $Panel-headingBorderBottom;
border-radius: $Panel-headingBorderRadius;
}
&-title {
margin-top: $Panel-titleMarginTop;
margin-bottom: $Panel-titleMarginBottom;
font-size: $Panel-titleFontSize;
color: $Panel-titleColor;
}
&-body {
padding: $Panel-bodyPadding;
}
&-footer {
border-color: $Panel-footerBorderColor;
border-radius: $Panel-footerBorderRadius;
@ -131,14 +158,17 @@
padding: $Panel-footerPadding;
border-style: solid;
border-width: $Panel-borderWidth 0 0 0;
.#{$ns}Button + .#{$ns}Button {
margin-left: $Panel-footerButtomMarginLeft;
}
}
&-btnToolbar {
text-align: $Panel-btnToolbarTextAlign;
.#{$ns}Button {
margin-left: $Panel-footerButtomMarginLeft;
}
}
}
}

9
scss/components/_popover.scss
View File

@ -1,4 +1,3 @@
.#{$ns}PopOver {
position: absolute;
background: $white;
@ -33,10 +32,10 @@
z-index: 1;
bottom: 0;
background: transparent;
& + * {
position: relative;
z-index: 2;
position: relative;
z-index: 2;
}
}
}
}

6
scss/components/_popoverable.scss
View File

@ -6,7 +6,7 @@
cursor: pointer;
&:hover {
color: $PopOverAble-onHover-iconColor
color: $PopOverAble-onHover-iconColor;
}
}
@ -19,8 +19,6 @@
}
}
.#{$ns}PopOverAble-popover {
min-width: px2rem(320px);
max-width: px2rem(640px);
@ -29,4 +27,4 @@
margin-bottom: 0;
border: none;
}
}
}

12
scss/components/_quick-edit.scss
View File

@ -6,7 +6,7 @@
cursor: pointer;
&:hover {
color: $QuickEdit-onHover-iconColor
color: $QuickEdit-onHover-iconColor;
}
}
@ -16,8 +16,9 @@
&:focus {
position: relative;
&:after {
content: '';
content: "";
left: 0;
top: 0;
right: 0;
@ -25,7 +26,8 @@
position: absolute;
pointer-events: none;
z-index: 1;
border: $QuickEdit-onFocus-borderWidth dashed $QuickEdit-onFocus-borderColor;
border: $QuickEdit-onFocus-borderWidth dashed
$QuickEdit-onFocus-borderColor;
}
}
@ -34,8 +36,6 @@
}
}
.#{$ns}QuickEdit-popover {
min-width: px2rem(320px);
max-width: px2rem(640px);
@ -44,4 +44,4 @@
margin-bottom: 0;
border: none;
}
}
}

2
scss/components/_remark.scss
View File

@ -20,4 +20,4 @@
background-color: $Remark-onHover-bg;
border-color: $Remark-onHover-borderColor;
}
}
}

4
scss/components/_service.scss
View File

@ -1,3 +1,3 @@
.#{$ns}Service{
.#{$ns}Service {
position: relative;
}
}

12
scss/components/_spinner.scss
View File

@ -1,9 +1,10 @@
@keyframes rotate {
0% {
transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
transform: rotate(359deg);
}
}
@ -44,13 +45,12 @@
}
}
@include media-breakpoint-up(md) {
.#{$ns}Layout .#{$ns}Page-body>.#{$ns}Spinner-overlay {
.#{$ns}Layout .#{$ns}Page-body > .#{$ns}Spinner-overlay {
left: $Layout-aside-width;
}
.#{$ns}Layout--folded .#{$ns}Page-body>.#{$ns}Spinner-overlay {
.#{$ns}Layout--folded .#{$ns}Page-body > .#{$ns}Spinner-overlay {
left: $Layout-aside--folded-width;
}
}
}

40
scss/components/_status.scss
View File

@ -8,43 +8,50 @@
@keyframes animation-rolling_red {
0% {
left: 0
left: 0;
}
50% {
left: px2rem(13px)
left: px2rem(13px);
}
100% {
left: 0
left: 0;
}
}
@keyframes animation-rolling_blue {
0% {
left: $gap-sm + $gap-base
left: $gap-sm + $gap-base;
}
50% {
left: px2rem(12px)
left: px2rem(12px);
}
100% {
left: $gap-sm + $gap-base
left: $gap-sm + $gap-base;
}
}
.#{$ns}Status-icon {
&--danger, &--primary, &--rolling, &--success, &--warning{
&--danger,
&--primary,
&--rolling,
&--success,
&--warning {
&::before {
font-family: "iconfont";
content: "\e632";
font-style: normal;
}
}
&--rolling {
color: $warning;
position: relative;
left: $gap-md;
&::before {
font-size: inherit;
color: $danger;
@ -55,10 +62,11 @@
animation: animation-rolling_red 2s;
animation-iteration-count: infinite;
}
&::after {
font-family: "iconfont";
content: "\e632";
font-style:normal;
font-style: normal;
font-size: inherit;
color: $primary;
position: absolute;
@ -69,27 +77,32 @@
animation-iteration-count: infinite;
}
}
&--success {
&::before {
color: $success;
}
}
&--danger {
&::before {
color: $danger;
}
}
&--warning {
&::before {
color: $warning;
}
}
&--primary {
&::before {
color: $primary;
}
}
}
.#{$ns}Status-icon--rolling + &-label {
color: $warning;
position: relative;
@ -111,5 +124,4 @@
.#{$ns}Status-icon--primary + &-label {
color: $primary;
}
}

44
scss/components/_table.scss
View File

@ -60,7 +60,8 @@
&-heading {
background: $Table-heading-bg;
border-bottom: $Table-borderWidth solid $Table-borderColor;
padding: ($Table-heading-height - $Table-fontSize * $lineHeightBase) / 2 $Table-toolbar-paddingX;
padding: ($Table-heading-height - $Table-fontSize * $lineHeightBase) / 2
$Table-toolbar-paddingX;
}
&--unsaved &-heading {
@ -124,16 +125,14 @@
&-actions {
display: inline-block;
> * {
margin-right: $Crud-toolbar-gap;
}
}
&-content {
min-height: .01%;
min-height: 0.01%;
overflow-x: auto;
}
@ -147,6 +146,7 @@
> thead > tr {
background-color: $Table-thead-bg;
> th {
padding: $TableCell-paddingY $TableCell-paddingX;
@ -159,8 +159,10 @@
}
&:not(:last-child) {
border-right: $Table-thead-borderWidth solid $Table-thead-borderColor;
border-right: $Table-thead-borderWidth solid
$Table-thead-borderColor;
}
font-size: $Table-thead-fontSize;
color: $Table-thead-color;
font-weight: $fontWeightNormal;
@ -174,7 +176,7 @@
> tbody > tr {
border-top: $Table-borderWidth solid $Table-borderColor;
> td {
padding: $TableCell-paddingY $TableCell-paddingX;
vertical-align: top;
@ -188,8 +190,9 @@
}
}
@if $Table-strip-bg != transparent {
@if $Table-strip-bg !=transparent {
background-color: transparent;
&.#{$ns}Table-tr--odd {
background-color: $Table-strip-bg;
}
@ -260,8 +263,10 @@
position: relative;
right: -20px * ($i - 1);
}
.#{$ns}Table-expandCell + td{
> div, > span {
.#{$ns}Table-expandCell + td {
> div,
> span {
margin-left: 20px * ($i - 1);
}
}
@ -272,6 +277,7 @@
> tbody > tr > td.#{$ns}Table-checkCell {
border-right: 0;
width: px2rem(1px);
.#{$ns}Checkbox {
margin: 0;
}
@ -306,7 +312,7 @@
// reset
> tbody > tr {
@if $Table-strip-bg != transparent {
@if $Table-strip-bg !=transparent {
&.#{$ns}Table-tr--odd {
background-color: transparent;
}
@ -351,7 +357,7 @@
content: $TableCell-sortBtn--default-icon;
font-family: $TableCell-sortBtn--default-iconVendor;
}
&--up,
&--down {
display: none;
@ -466,11 +472,16 @@
pointer-events: all;
position: absolute;
// background: $Table-onHover-bg;
background: linear-gradient(90deg, rgba($Table-onHover-bg, 0) 0%, rgba($Table-onHover-bg,1) 20%, rgba($Table-onHover-bg,1) 100%);
background: linear-gradient(
90deg,
rgba($Table-onHover-bg, 0) 0%,
rgba($Table-onHover-bg, 1) 20%,
rgba($Table-onHover-bg, 1) 100%
);
top: $Table-borderWidth;
bottom: 0;
right: 0;
padding-left: px2rem(50px);
padding-left: px2rem(50px);
padding-right: $TableCell-paddingX;
display: flex;
align-items: center;
@ -520,7 +531,8 @@
}
> tbody > tr:not(:first-child) {
border-top: $Table-borderWidth solid lighten($Table-thead-borderColor, 2.5%);
border-top: $Table-borderWidth solid
lighten($Table-thead-borderColor, 2.5%);
}
}
}
@ -531,4 +543,4 @@
> .#{$ns}Button {
margin: px2rem(3px);
}
}
}

90
scss/components/_tabs.scss
View File

@ -1,10 +1,12 @@
.#{$ns}Tabs {
&-links {
border-bottom: $Tabs-borderWidth solid $Tabs-borderColor;
>.#{$ns}Tabs-link {
> .#{$ns}Tabs-link {
margin-bottom: -$Tabs-borderWidth;
display: inline-block;
>a {
> a {
font-size: $Tabs-linkFontSize;
outline: none;
border: $Tabs-borderWidth solid transparent;
@ -16,20 +18,23 @@
text-decoration: none;
cursor: pointer;
}
&:hover>a,
>a:focus {
&:hover > a,
> a:focus {
border-color: $Tabs-onHover-borderColor;
text-decoration: none;
}
&.disabled>a,
&.is-disabled>a {
&.disabled > a,
&.is-disabled > a {
color: $Tabs-onDisabled-color;
background-color: transparent;
border-color: transparent;
pointer-events: none;
}
&.active>a,
&.is-active>a {
&.active > a,
&.is-active > a {
color: $Tabs-onActive-color;
background-color: $Tabs-onActive-bg;
border-color: $Tabs-onActive-borderColor;
@ -37,30 +42,35 @@
}
}
}
&-content {
background-color: $Tabs-content-bg;
padding: $gap-base;
border-style: solid;
border-width: 0 $Tabs-borderWidth $Tabs-borderWidth;
border-color: $Tabs-borderColor;
}
}
&--line {
>.#{$ns}Tabs-links {
> .#{$ns}Tabs-links {
border-bottom-color: #e2e5ec;
>li {
> li {
&.active {
>a,
>a:hover,
>a:focus {
> a,
> a:hover,
> a:focus {
border-bottom: px2rem(2px) solid $primary;
color: $primary;
background-color: transparent;
border-color: transparent transparent $primary transparent;
border-color: transparent transparent $primary
transparent;
}
}
>a,
>a:hover,
>a:focus {
> a,
> a:hover,
> a:focus {
color: #666;
background-color: transparent;
border-color: transparent;
@ -68,35 +78,40 @@
}
}
}
&--card {
>.#{$ns}Tabs-links {
> .#{$ns}Tabs-links {
background-color: #eceff8;
border-top: px2rem(1px) solid #e2e5ec;
>li {
> li {
&.active {
>a,
>a:hover,
>a:focus {
> a,
> a:hover,
> a:focus {
color: $primary;
background-color: #fff;
margin-left: px2rem(1px);
}
}
>a,
>a:hover,
>a:focus {
> a,
> a:hover,
> a:focus {
color: #666;
background-color: transparent;
}
}
}
}
&--radio {
>.#{$ns}Tabs-links {
> .#{$ns}Tabs-links {
border: 0;
margin-bottom: px2rem(10px);
>li {
>a {
> li {
> a {
font-size: $fontSizeSm;
text-align: center;
margin-right: 0;
@ -104,25 +119,28 @@
height: px2rem(30px);
line-height: px2rem(30px);
}
&.active {
>a,
>a:hover,
>a:focus {
> a,
> a:hover,
> a:focus {
color: #fff;
background-color: $primary;
margin-left: px2rem(1px);
}
}
>a,
>a:hover,
>a:focus {
> a,
> a:hover,
> a:focus {
color: $primary;
background-color: #eaf6fe;
}
}
}
.tab-content {
border-top: $Tabs-borderWidth solid $Tabs-borderColor;
}
}
}
}

38
scss/components/_toast.scss
View File

@ -7,23 +7,29 @@
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
@ -34,11 +40,13 @@
20% {
transform: scale3d(0.9, 0.9, 0.9);
}
50%,
55% {
opacity: 1;
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
@ -55,11 +63,12 @@
width: $Toast-width;
pointer-events: auto;
margin-bottom: $gap-xs;
padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY ($Toast-paddingX + $Toast-paddingL);
padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY
($Toast-paddingX + $Toast-paddingL);
box-shadow: $Toast-box-shadow;
border-radius: $Toast-borderRadius;
border: $Toast-border-width solid;
color: $Toast-color;
color: $Toast-color;
position: relative;
opacity: $Toast-opacity;
cursor: pointer;
@ -67,7 +76,7 @@
&:hover {
opacity: 1;
}
&.in {
animation-duration: 0.75s;
animation-name: bounceIn;
@ -86,9 +95,11 @@
display: $Toast-display;
font-size: $fontSizeMd;
}
&-body {
display: $Toast-display;
}
&::before {
display: inline-block;
font-family: $Toast-iconVendor;
@ -98,13 +109,14 @@
position: absolute;
left: $Toast-paddingX;
top: $Toast-paddingY;
}
}
// colors
&--error {
color: $Toast--danger-color;
border-color: $Toast--danger-borderColor;
background-color: $Toast--danger-bgColor;
&::before {
content: $Toast--error-icon;
}
@ -114,30 +126,34 @@
color: $Toast--warning-color;
border-color: $Toast--warning-borderColor;
background-color: $Toast--warning-bgColor;
&::before {
content: $Toast--warning-icon;
}
}
}
&--info {
color: $Toast--info-color;
border-color: $Toast--info-borderColor;
background-color: $Toast--info-bgColor;
padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY ($Toast-paddingX + $Toast--info-paddingL);
padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY
($Toast-paddingX + $Toast--info-paddingL);
&::before {
content: $Toast--info-icon;
}
}
}
&--success {
color: $Toast--success-color;
border-color: $Toast--success-borderColor;
background-color: $Toast--success-bgColor;
&::before {
content: $Toast--success-icon;
}
}
}
// positions
&-wrap--topRight {
top: $gap-base;
@ -170,4 +186,4 @@
bottom: $gap-base;
right: $gap-base;
}
}
}

30
scss/components/_tooltip.scss
View File

@ -65,17 +65,18 @@
margin-top: -$Tooltip-arrow-width/2;
top: 50%;
}
.#{$ns}Tooltip-arrow::before,
.#{$ns}Tooltip-arrow::after {
border-width: ($Tooltip-arrow-width / 2) $Tooltip-arrow-height ($Tooltip-arrow-width / 2) 0;
border-width: ($Tooltip-arrow-width / 2) $Tooltip-arrow-height
($Tooltip-arrow-width / 2) 0;
}
.#{$ns}Tooltip-arrow::before {
left: 0;
border-right-color: $Tooltip-arrow-outerColor;
}
.#{$ns}Tooltip-arrow::after {
left: $Tooltip-borderWidth;
border-right-color: $Tooltip-arrow-color;
@ -91,7 +92,8 @@
.#{$ns}Tooltip-arrow::before,
.#{$ns}Tooltip-arrow::after {
border-width: 0 ($Tooltip-arrow-width / 2) $Tooltip-arrow-height ($Tooltip-arrow-width / 2);
border-width: 0 ($Tooltip-arrow-width / 2) $Tooltip-arrow-height
($Tooltip-arrow-width / 2);
}
.#{$ns}Tooltip-arrow::before {
@ -128,17 +130,18 @@
margin-top: -$Tooltip-arrow-width/2;
top: 50%;
}
.#{$ns}Tooltip-arrow::before,
.#{$ns}Tooltip-arrow::after {
border-width: ($Tooltip-arrow-width / 2) 0 ($Tooltip-arrow-width / 2) $Tooltip-arrow-height;
border-width: ($Tooltip-arrow-width / 2) 0
($Tooltip-arrow-width / 2) $Tooltip-arrow-height;
}
.#{$ns}Tooltip-arrow::before {
right: 0;
border-left-color: $Tooltip-arrow-outerColor;
}
.#{$ns}Tooltip-arrow::after {
right: $Tooltip-borderWidth;
border-left-color: $Tooltip-arrow-color;
@ -166,9 +169,9 @@
}
}
[data-tooltip] {
position: relative;
&:after {
pointer-events: none;
left: 0;
@ -203,12 +206,13 @@
top: 100%;
transform: translateX(-50%);
}
&[data-position="bottom"]:hover:after {
margin: $Tooltip--attr-gap 0 0 0;
}
&:hover:active:after {
content: '';
display: none!important;
content: "";
display: none !important;
}
}
}

5
scss/components/_video.scss
View File

@ -1,16 +1,19 @@
.#{$ns}Video {
min-width: 200px;
&-cursor {
position: absolute;
border: 2px solid $info;
transition: all 0.5s ease-out;
}
&-frameList {
.#{$ns}Video-frameItem {
cursor: pointer;
}
}
.video-react-paused .video-react-big-play-button.big-play-button-hide {
display: block;
}
}
}

62
scss/components/_wizard.scss
View File

@ -2,9 +2,11 @@
@include clearfix();
position: relative;
&,
&-tabs {
padding: 0;
.Badge {
display: inline-block; // min-width: px2rem(10px);
// padding: px2rem(3px) px2rem(7px);
@ -18,44 +20,56 @@
vertical-align: middle;
background-color: $Wizard-badge-bg;
border-radius: $Wizard-badge-borderRadius; // font-weight: 700;
text-shadow: 0 px2rem(1px) 0 rgba(0, 0, 0, .2);
text-shadow: 0 px2rem(1px) 0 rgba(0, 0, 0, 0.2);
margin-right: $Wizard-badge-marginRight;
&--primary {
background-color: $primary;
}
&--secondary {
background-color: $secondary;
}
&--success {
background-color: $success;
}
&--info {
background-color: $info;
}
&--warning {
background-color: $warning;
}
&--danger {
background-color: $danger;
}
&--light {
background-color: $light;
}
&--dark {
background-color: $dark;
}
}
ul li.active {
color: $info;
}
.#{$ns}Panel-footer>.#{$ns}Form-group,
.#{$ns}Panel-footer>.btn {
.#{$ns}Panel-footer > .#{$ns}Form-group,
.#{$ns}Panel-footer > .btn {
margin-left: px2rem(5px);
}
>ul.nav {
> ul.nav {
padding: 0;
margin: 0;
border: $borderWidth solid $borderColor;
li {
position: relative;
float: left;
@ -65,20 +79,24 @@
cursor: pointer;
height: $Wizard-steps-height;
line-height: $Wizard-steps-height;
a {
border: 0 none !important;
background: transparent !important;
color: inherit;
display: inline;
padding: 0;
div {
display: inline;
}
}
&:first-child {
padding-left: px2rem(15px);
border-radius: px2rem(4px) 0 0 0;
}
&:before,
&:after {
content: "";
@ -91,23 +109,29 @@
z-index: 1;
bottom: 0;
}
&:after {
right: px2rem(-9px);
border-left-color: $Wizard-steps-bg;
z-index: 2;
}
&.is-active {
color: #3a87ad;
background: #fff;
}
&.is-active:after {
border-left-color: #fff;
}
} // .Badge {
}
// .Badge {
// margin-right: px2rem(4px);
// }
}
}
&-steps {
font-size: $fontSizeBase;
padding: $Wizard-steps-padding;
@ -115,11 +139,13 @@
border-bottom: $Wizard-steps-borderWidth solid $borderColor;
text-align: $Wizard-steps-textAlign;
height: $Wizard-steps-height;
ul {
display: $Wizard-steps-ulDisplay;
padding: 0;
margin: 0;
list-style: none outside none;
li {
position: relative;
float: left;
@ -129,10 +155,12 @@
cursor: default;
height: $Wizard-steps-height;
line-height: $Wizard-steps-height;
&:first-child {
padding-left: px2rem(15px);
border-radius: px2rem(4px) 0 0 0;
}
&:before,
&:after {
font-family: $Wizard-steps-liVender;
@ -146,55 +174,70 @@
border-left-color: rgba(0, 0, 0, 0.05);
z-index: 2;
}
&:after {
right: px2rem(-9px);
border-left-color: $Wizard-steps-bg;
z-index: 2;
}
&.is-active {
color: #3a87ad;
background: #fff;
}
&.is-active:after {
border-left-color: #fff;
}
&.is-complete,
&.is-complete:hover {
cursor: pointer;
background: $Wizard-steps-bg--isComplete;
}
&.is-complete:after {
border-left-color: #f1f5f9;
}
} // .Badge {
}
// .Badge {
// margin-right: px2rem(4px);
// }
}
}
&-stepContent {
padding: $Wizard-stepsContent-padding;
& .Step-pane {
display: none;
&.is-active {
display: inherit;
}
}
}
&--vertical {
float: left;
border-bottom: none;
margin-bottom: px2rem(30px); // padding: 0;
&.#{$ns}Wizard-steps {
height: auto;
}
&+.#{$ns}Wizard-stepContent {
& + .#{$ns}Wizard-stepContent {
zoom: 1;
overflow: hidden;
padding-left: px2rem(40px);
}
& li {
background-color: $Wizard-steps-bg;
}
& ul li {
height: px2rem(40px);
line-height: px2rem(40px);
@ -207,8 +250,9 @@
// content: '';
// }
}
&+.#{$ns}Wizard-stepContent+.#{$ns}Panel-footer {
& + .#{$ns}Wizard-stepContent + .#{$ns}Panel-footer {
clear: both;
}
}
}
}

2
scss/components/_wrapper.scss
View File

@ -20,4 +20,4 @@
&--xl {
padding: px2rem(50px);
}
}
}

2
scss/components/form/_chained-select.scss
View File

@ -2,4 +2,4 @@
.#{$ns}Select {
margin-right: $gap-xs;
}
}
}

43
scss/components/form/_checks.scss
View File

@ -1,4 +1,3 @@
.#{$ns}Checkbox {
margin: 0 $gap-sm 0 0;
cursor: pointer;
@ -21,10 +20,10 @@
display: inline-block;
vertical-align: middle;
position: relative;
+ span {
margin-left: $Checkbox-gap;
&:empty {
display: none;
}
@ -44,25 +43,27 @@
&--checkbox {
padding-left: $Checkbox-size;
input {
margin-left: -$Checkbox-size;
&:checked + i {
border-color: $Checkbox-onHover-color;
&:before {
left: ($Checkbox-size - px2rem(2px) - $Checkbox-inner-size) / 2;
top: ($Checkbox-size - px2rem(2px) - $Checkbox-inner-size) / 2;
left: ($Checkbox-size - px2rem(2px) - $Checkbox-inner-size) /
2;
top: ($Checkbox-size - px2rem(2px) - $Checkbox-inner-size) /
2;
width: $Checkbox-inner-size;
height: $Checkbox-inner-size;
background-color: $Checkbox-onHover-color;
}
}
&[disabled] + i {
border-color: lighten($Checkbox-color, 5%);
&:before {
background-color: lighten($Checkbox-color, 5%);
}
@ -87,10 +88,10 @@
&:checked + i {
border-color: $Checkbox-onHover-color;
background-color: $Checkbox-onHover-color;
&:before {
// todo 后面自动计算
@if $ns == 'cxd-' {
@if $ns== "cxd-" {
top: px2rem(2px);
left: px2rem(1px);
} @else {
@ -106,7 +107,7 @@
// &[disabled] + i {
// border-color: lighten($Checkbox-color, 5%);
// &:before {
// background-color: lighten($Checkbox-color, 5%);
// }
@ -139,14 +140,13 @@
&--radio {
padding-left: $Radio-size;
input {
margin-left: -$Radio-size;
&:checked + i {
border-color: $Radio-onHover-color;
&:before {
left: ($Radio-size - px2rem(2px) - $Radio-inner-size) / 2;
top: ($Radio-size - px2rem(2px) - $Radio-inner-size) / 2;
@ -156,10 +156,10 @@
border-radius: 50%;
}
}
&[disabled] + i {
border-color: lighten($Radio-color, 5%);
&:before {
background-color: lighten($Radio-color, 5%);
}
@ -178,7 +178,7 @@
&--sm {
margin-right: px2rem(5px);
input {
&:checked + i {
&:before {
@ -189,6 +189,7 @@
}
}
}
> i {
width: $Checkbox--sm-size;
height: $Checkbox--sm-size;
@ -201,8 +202,8 @@
}
}
.#{$ns}CheckboxControl,
.#{$ns}RadiosControl,
.#{$ns}CheckboxControl,
.#{$ns}RadiosControl,
.#{$ns}CheckboxesControl {
padding-top: ($Form-input-height - $Checkbox-size) / 2;
}
@ -218,4 +219,4 @@
display: inline-block;
margin-right: $gap-md;
}
}
}

4
scss/components/form/_color.scss
View File

@ -42,7 +42,7 @@
background: $ColorPicker-onDisabled-bg;
color: $ColorPicker-onDisabled-color;
pointer-events: none;
> .#{$ns}ColorPicker-input {
color: $ColorPicker-onDisabled-color;
@ -83,4 +83,4 @@
box-shadow: none !important;
border-radius: 0 !important;
border: none !important;
}
}

36
scss/components/form/_combo.scss
View File

@ -1,6 +1,4 @@
.#{$ns}Combo {
&-toolbarBtn {
line-height: $Combo-toolbarBtn-lineHeight;
height: $Combo-toolbarBtn-height;
@ -15,9 +13,16 @@
&-addBtn {
font-size: $Combo-addBtn-fontSize;
@include button-size($Combo-addBtn-paddingY, $Combo-addBtn-paddingX, $Combo-addBtn-fontSize, $Combo-addBtn-lineHeight, $Combo-addBtn-borderRadius, $Combo-addBtn-height);
@include button-size(
$Combo-addBtn-paddingY,
$Combo-addBtn-paddingX,
$Combo-addBtn-fontSize,
$Combo-addBtn-lineHeight,
$Combo-addBtn-borderRadius,
$Combo-addBtn-height
);
@include button-variant(
$Combo-addBtn-bg,
$Combo-addBtn-border,
@ -79,14 +84,18 @@
&--ver:not(&--noBorder) {
> .#{$ns}Combo-items {
margin: (-$Combo--vertical-item-gap*2) (-$Combo--vertical-item-gap*2) 0 (-$Combo--vertical-item-gap*2);
margin: (-$Combo--vertical-item-gap * 2)
(-$Combo--vertical-item-gap * 2) 0
(-$Combo--vertical-item-gap * 2);
}
// 不严格点会命中 combo 里面嵌套 combo 的情况，so sad.
> .#{$ns}Combo-item,
> .#{$ns}Combo-items > .#{$ns}Combo-item {
border: $Combo--vertical-item-borderWidth dashed $Combo--vertical-item-borderColor;
padding: $Combo--vertical-item-paddingY $Combo--vertical-item-paddingX;
border: $Combo--vertical-item-borderWidth dashed
$Combo--vertical-item-borderColor;
padding: $Combo--vertical-item-paddingY
$Combo--vertical-item-paddingX;
position: relative;
}
@ -110,7 +119,9 @@
padding: 0 px2rem(3px);
border-style: solid;
border-color: $Combo--vertical-itemToolbar-borderColor;
border-width: $Combo--vertical-itemToolbar-borderWidth $Combo--vertical-itemToolbar-borderWidth 0 $Combo--vertical-itemToolbar-borderWidth;
border-width: $Combo--vertical-itemToolbar-borderWidth
$Combo--vertical-itemToolbar-borderWidth 0
$Combo--vertical-itemToolbar-borderWidth;
// margin-top: px2rem(-1px);
.#{$ns}Combo-toolbarBtn {
@ -135,15 +146,15 @@
> .#{$ns}Combo-itemToolbar {
top: $Combo--vertical-itemToolbar-positionTop;
opacity: 1;
}
}
}
&-item--dragging {
position: relative;
&:after {
content: '';
content: "";
display: block;
position: absolute;
z-index: 5;
@ -175,9 +186,8 @@
}
}
@include media-breakpoint-up(sm) {
.#{$ns}Combo-form .#{$ns}Form-item:last-child {
margin-bottom: 0;
}
}
}

7
scss/components/form/_date-range.scss
View File

@ -15,6 +15,7 @@
&:not(.is-disabled) {
cursor: pointer;
&:hover {
background-color: $DatePicker-onHover-bg;
}
@ -27,11 +28,12 @@
&.is-disabled {
background: $gray200;
> &-input {
color: $text--muted-color;
}
}
&-placeholder {
color: $DatePicker-placeholderColor;
user-select: none;
@ -49,6 +51,7 @@
&-toggler {
cursor: pointer;
color: $DatePicker-iconColor;
&:hover {
color: $DatePicker-onHover-iconColor;
}
@ -105,4 +108,4 @@
.#{$ns}DateRangeControl:not(.is-inline) > .#{$ns}DateRangePicker {
display: flex;
}
}

34
scss/components/form/_date.scss
View File

@ -1,4 +1,3 @@
.#{$ns}DatePicker {
position: relative;
display: inline-flex;
@ -15,6 +14,7 @@
&:not(.is-disabled) {
cursor: pointer;
&:hover {
background-color: $DatePicker-onHover-bg;
}
@ -27,11 +27,12 @@
&.is-disabled {
background: $gray200;
> &-input {
color: $text--muted-color;
}
}
&-placeholder {
color: $DatePicker-placeholderColor;
user-select: none;
@ -49,6 +50,7 @@
&-toggler {
cursor: pointer;
color: $DatePicker-iconColor;
&:hover {
color: $DatePicker-onHover-iconColor;
}
@ -60,7 +62,7 @@
display: inline-block;
font-size: $DatePicker-toggler-fontSize;
font-family: $DatePicker-toggler-vendor;
}
}
}
&-clear {
@ -90,17 +92,16 @@
font-weight: normal;
}
td.rdtDay,
td.rdtHour,
td.rdtMinute,
td.rdtSecond,
td.rdtDay,
td.rdtHour,
td.rdtMinute,
td.rdtSecond,
.rdtTimeToggle {
background-color: $Calendar-cell-bg;
&:hover {
background-color: $Calendar-cell-onHover-bg;
}
}
td.rdtToday:before {
@ -111,7 +112,7 @@
border-bottom-color: $Calendar-cell-bg;
}
td.rdtActive,
td.rdtActive,
td.rdtActive:hover {
background: $Calendar-cell-onActive-bg;
}
@ -120,16 +121,18 @@
td.rdtDisabled:hover {
background-color: $Calendar-cell-onDisabled-bg;
}
}
thead tr:first-child th {
cursor: default;
text-align: left;
font-weight: normal;
}
thead tr:first-child th:hover {
background: transparent;
}
tfoot {
border-top: 0;
@ -159,7 +162,6 @@
border-color: $Calendar-input-onFocused-borderColor;
box-shadow: none;
}
}
.rdtActions {
@ -174,7 +176,7 @@
height: 30%;
line-height: px2rem(20px);
}
.rdtCount {
height: 40%;
display: flex;
@ -186,7 +188,7 @@
.rdtBtn {
line-height: $Calendar-btn-lineHeight;
padding: $Calendar-btn-paddingY $Calendar-btn-paddingX;
padding: $Calendar-btn-paddingY $Calendar-btn-paddingX;
display: inline-block;
vertical-align: middle;
text-align: center;
@ -204,7 +206,8 @@
pointer-events: none;
}
.fa, .iconfont {
.fa,
.iconfont {
font-size: $fontSizeSm;
}
@ -246,7 +249,7 @@
display: inline-block;
color: inherit;
font-style: normal;
line-height: 1.0;
line-height: 1;
}
.rdtBtnPrev:before {
@ -284,4 +287,3 @@
}
}
}

11
scss/components/form/_editor.scss
View File

@ -3,11 +3,12 @@
.#{$ns}EditorControl {
min-height: px2rem(200px);
max-height: px2rem(400px);
> .#{$ns}MonacoEditor,
> .#{$ns}MonacoEditor > .monaco-diff-editor {
min-height: px2rem(198px);
}
overflow: visible;
height: auto;
border: $Form-input-borderWidth solid $Form-input-borderColor;
@ -19,11 +20,12 @@
}
&.is-focused {
border-color: $Form-input-onFocused-borderColor;
border-color: $Form-input-onFocused-borderColor;
}
&--md {
min-height: 250px;
> .#{$ns}MonacoEditor {
min-height: 250px;
}
@ -54,11 +56,10 @@
}
}
.monaco-inputbox>.wrapper {
.monaco-inputbox > .wrapper {
padding: 0;
}
// @media (min-width: 768px) {
// .amis-editor-control.form-contorl-inline,
@ -66,4 +67,4 @@
// display: inline-block;
// width: 280px;
// }
// }
// }

14
scss/components/form/_fieldset.scss
View File

@ -2,7 +2,7 @@
position: relative;
&:after {
content: '';
content: "";
pointer-events: none;
border: 1px solid lighten($borderColor, 5%);
position: absolute;
@ -13,7 +13,7 @@
right: 0;
}
>legend {
> legend {
position: absolute;
top: 0;
left: 0;
@ -48,7 +48,7 @@ fieldset.#{$ns}Collapse {
@extend %fieldSetBase;
padding: 20px 5px 5px 5px;
>legend {
> legend {
left: 5px;
font-size: $fontSizeXs;
padding: 0 3px;
@ -65,7 +65,7 @@ fieldset.#{$ns}Collapse {
padding: 25px 10px 10px 10px;
>legend {
> legend {
left: 10px;
font-size: $fontSizeSm;
padding: 0 5px;
@ -82,7 +82,7 @@ fieldset.#{$ns}Collapse {
padding: 30px 15px 15px 15px;
>legend {
> legend {
left: 15px;
font-size: $fontSizeBase;
padding: 0 8px;
@ -98,7 +98,7 @@ fieldset.#{$ns}Collapse {
@extend %fieldSetBase;
padding: 30px 20px 20px 20px;
>legend {
> legend {
left: 20px;
font-size: $fontSizeMd;
padding: 0 10px;
@ -114,7 +114,7 @@ fieldset.#{$ns}Collapse {
@extend %fieldSetBase;
padding: 40px 30px 30px 30px;
>legend {
> legend {
left: 30px;
font-size: $fontSizeLg;
padding: 0 15px;

37
scss/components/form/_form.scss
View File

@ -20,7 +20,7 @@
margin-bottom: px2rem(5px);
display: inline-block;
max-width: 100%;
> span {
position: relative;
}
@ -107,21 +107,21 @@
display: inline-block;
vertical-align: top;
}
.#{$ns}Form-control--sizeSm {
min-width: $Form-control-widthSm;
width: auto;
display: inline-block;
vertical-align: top;
}
.#{$ns}Form-control--sizeMd {
min-width: $Form-control-widthMd;
width: auto;
display: inline-block;
vertical-align: top;
}
.#{$ns}Form-control--sizeLg {
min-width: $Form-control-widthLg;
width: auto;
@ -135,19 +135,19 @@
flex-wrap: nowrap;
margin-left: -$Form--horizontal-gutterWidth / 2;
margin-right: -$Form--horizontal-gutterWidth / 2;
> * {
padding-left: $Form--horizontal-gutterWidth / 2;
padding-right: $Form--horizontal-gutterWidth / 2;
}
> .#{$ns}Form-label,
> .#{$ns}Form-value {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
}
.#{$ns}Form-itemColumn--xs,
.#{$ns}Form-itemColumn--sm,
.#{$ns}Form-itemColumn--normal,
@ -157,32 +157,32 @@
flex-basis: unset;
}
>.#{$ns}Form-label {
> .#{$ns}Form-label {
padding-top: $Form-label-paddingTop;
margin-bottom: 0;
}
.#{$ns}Form-itemColumn--xs {
width: $Form--horizontal-label-widthXs;
}
.#{$ns}Form-itemColumn--sm {
width: $Form--horizontal-label-widthSm;
}
.#{$ns}Form-itemColumn--normal {
width: $Form--horizontal-label-widthBase;
}
.#{$ns}Form-itemColumn--md {
width: $Form--horizontal-label-widthMd;
}
.#{$ns}Form-itemColumn--lg {
width: $Form--horizontal-label-widthLg;
}
@for $i from (1) through $Form--horizontal-columns {
@for $i from (1) through $Form--horizontal-columns {
.#{$ns}Form-itemColumn--#{$i} {
flex: 0 0 percentage($i / $Form--horizontal-columns);
max-width: percentage($i / $Form--horizontal-columns);
@ -194,9 +194,8 @@
&--inline {
display: inline-block;
vertical-align: top;
>.#{$ns}Form-label {
> .#{$ns}Form-label {
padding-top: $Form-label-paddingTop;
margin-bottom: 0;
margin-right: $Form-item-gap/2;
@ -206,7 +205,7 @@
}
}
>.#{$ns}Form-value {
> .#{$ns}Form-value {
display: inline;
> .#{$ns}Form-control {
@ -261,4 +260,4 @@
flex-grow: 1;
}
}
}
}

6
scss/components/form/_group.scss
View File

@ -81,8 +81,6 @@
}
}
.#{$ns}Form-groupColumn {
flex-basis: 0;
flex-grow: 1;
@ -90,11 +88,11 @@
max-width: 100%;
}
@for $i from (1) through $Form--horizontal-columns {
@for $i from (1) through $Form--horizontal-columns {
.#{$ns}Form-groupColumn--#{$i} {
flex: 0 0 percentage($i / $Form--horizontal-columns);
max-width: percentage($i / $Form--horizontal-columns);
min-height: 1px;
}
}
}
}

3
scss/components/form/_icon-picker.scss
View File

@ -60,6 +60,7 @@
line-height: $IconPicker-tab-lineHeight;
cursor: pointer;
text-align: center;
&.active {
background: $IconPicker-tab-onActive-bg;
}
@ -99,4 +100,4 @@
margin-right: $IconPicker-selectedIcon-marginRight;
}
}
}
}

30
scss/components/form/_image.scss
View File

@ -5,7 +5,7 @@
}
.drop-zone {
border: $Form-input-borderWidth*2 dashed $Form-input-borderColor;
border: $Form-input-borderWidth * 2 dashed $Form-input-borderColor;
height: 70px;
text-align: center;
display: table;
@ -13,10 +13,12 @@
color: $text--muted-color;
position: relative;
cursor: pointer;
>div:not(.image-list) {
> div:not(.image-list) {
display: table-cell;
vertical-align: middle;
}
&.has-files {
cursor: default;
border: 2px dashed transparent;
@ -25,12 +27,13 @@
.drop-zone-wrapper:focus .drop-zone:not(.disabled) {
color: $text-color;
border: $Form-input-borderWidth*2 dashed $Form-input-onFocused-borderColor;
border: $Form-input-borderWidth * 2 dashed $Form-input-onFocused-borderColor;
height: 90px;
padding-bottom: 20px;
margin-bottom: 10px;
&:after {
content: '温馨提示：当前状态可以粘贴剪切板中的文件。如截屏';
content: "温馨提示：当前状态可以粘贴剪切板中的文件。如截屏";
position: absolute;
left: 10px;
bottom: 3px;
@ -51,25 +54,29 @@
.drop-zone-active.has-files,
.drop-zone:hover:not(.disabled):not(.has-files) {
color: $text-color;
border: $Form-input-borderWidth*2 dashed $Form-input-onFocused-borderColor;
border: $Form-input-borderWidth * 2 dashed $Form-input-onFocused-borderColor;
}
.image-list {
outline: none;
margin: -5px;
.image-item {
position: relative;
margin: 5px;
width: 90px;
.img-wrapper {
width: 90px;
min-height: 50px;
overflow: hidden;
}
img {
display: block;
width: 100%;
}
.fa-spinner {
position: absolute;
left: 50%;
@ -77,6 +84,7 @@
margin: -15px 0 0 -20px;
color: #fff;
}
.image-overlay {
background: rgba(0, 0, 0, 0.3);
border-radius: 5px;
@ -109,16 +117,19 @@
}
}
}
p {
margin: 0;
text-align: center;
}
}
&.image-list-multiple .image-item .img-wrapper {
height: 90px;
display: table-cell;
vertical-align: middle;
}
.image-add-btn {
width: 90px;
height: 110px;
@ -126,17 +137,21 @@
margin: 5px;
cursor: pointer;
float: left;
&:hover .fa {
color: $dark;
}
}
.image-item.uploaded {
.fa-spinner {
display: none;
}
.image-overlay {
display: none;
}
&:hover {
.image-overlay {
display: flex;
@ -147,15 +162,18 @@
.cropper-wrapper {
position: relative;
img {
max-width: 100%;
max-height: 400px;
}
.btn {
position: absolute;
bottom: 0;
right: 0;
}
.btn:nth-child(2n + 1) {
bottom: 40px;
right: 4px;
@ -168,4 +186,4 @@
display: inline-block;
min-width: 280px;
}
}
}

41
scss/components/form/_input-group.scss
View File

@ -17,12 +17,14 @@
&-addOn {
background: $InputGroup-addOn-bg;
border: $InputGroup-addOn-borderWidth solid $InputGroup-addOn-borderColor;
line-height: $InputGroup-height - $InputGroup-paddingY * 2 - $InputGroup-addOn-borderWidth * 2;
border: $InputGroup-addOn-borderWidth solid
$InputGroup-addOn-borderColor;
line-height: $InputGroup-height - $InputGroup-paddingY * 2 -
$InputGroup-addOn-borderWidth * 2;
height: $InputGroup-height;
box-sizing: border-box;
padding: $InputGroup-paddingY $InputGroup-paddingX;
&:not(:last-child) {
border-right: 0;
}
@ -45,21 +47,22 @@
&-btn {
.#{$ns}Button {
border-radius: 0;
border: $InputGroup-button-borderWidth solid $InputGroup-button-borderColor;
border: $InputGroup-button-borderWidth solid
$InputGroup-button-borderColor;
}
&:not(:last-child) .#{$ns}Button {
border-right: 0;
}
&:first-child .#{$ns}Button {
&:first-child .#{$ns}Button {
@if $InputGroup-button-borderRadius {
border-top-left-radius: $InputGroup-button-borderRadius;
border-bottom-left-radius: $InputGroup-button-borderRadius;
}
}
&:last-child .#{$ns}Button {
&:last-child .#{$ns}Button {
@if $InputGroup-button-borderRadius {
border-top-right-radius: $InputGroup-button-borderRadius;
border-bottom-right-radius: $InputGroup-button-borderRadius;
@ -87,9 +90,11 @@
@if $InputGroup-select-borderWidth {
.#{$ns}Select {
background-color: $InputGroup-select-bg;
border: $InputGroup-select-borderWidth solid $InputGroup-select-borderColor;
@if $InputGroup-select-color != $Form-select-color {
border: $InputGroup-select-borderWidth
solid
$InputGroup-select-borderColor;
@if $InputGroup-select-color !=$Form-select-color {
color: $InputGroup-select-color;
}
}
@ -97,14 +102,14 @@
&:not(:last-child) .#{$ns}Select {
border-right: 0;
}
&:first-child .#{$ns}Select {
@if $InputGroup-select-borderRadius {
border-top-left-radius: $InputGroup-select-borderRadius;
border-bottom-left-radius: $InputGroup-select-borderRadius;
}
}
&:last-child .#{$ns}Select {
@if $InputGroup-select-borderRadius {
border-top-right-radius: $InputGroup-select-borderRadius;
@ -113,7 +118,6 @@
}
}
&:not(:first-child) .#{$ns}Select {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
@ -126,12 +130,11 @@
}
}
@if $InputGroup-select-arrowColor != $Form-select-caret-iconColor {
@if $InputGroup-select-arrowColor !=$Form-select-caret-iconColor {
.#{$ns}Select-arrow {
color: $InputGroup-select-arrowColor;
}
}
&.is-focused {
.#{$ns}InputGroup-addOn,
@ -141,19 +144,21 @@
border-color: $InputGroup-addOn-onFocused-borderColor;
}
@if $InputGroup-select-onFocused-bg != $InputGroup-select-bg {
@if $InputGroup-select-onFocused-bg !=$InputGroup-select-bg {
.#{$ns}Select {
background-color: $InputGroup-select-onFocused-bg;
}
}
@if $InputGroup-select-onFocused-color != $InputGroup-select-color {
@if $InputGroup-select-onFocused-color !=$InputGroup-select-color {
.#{$ns}Select {
color: $InputGroup-select-onFocused-color;
}
}
@if $InputGroup-select-onFocused-arrowColor != $Form-select-caret-iconColor {
@if $InputGroup-select-onFocused-arrowColor
!=$Form-select-caret-iconColor
{
.#{$ns}Select-arrow {
color: $InputGroup-select-onFocused-arrowColor;
}
@ -163,4 +168,4 @@
.#{$ns}InputGroup:not(.is-inline) {
display: flex;
}
}

38
scss/components/form/_list.scss
View File

@ -1,4 +1,3 @@
.#{$ns}ListControl {
&-items {
display: block;
@ -16,18 +15,23 @@
display: inline-block;
vertical-align: middle;
margin: $ListControl-gutterWidth/2;
border: $ListControl-item-borderWidth solid $ListControl-item-borderColor;
border: $ListControl-item-borderWidth solid
$ListControl-item-borderColor;
background-color: $ListControl-item-bg;
padding: $ListControl-item-paddingY $ListControl-item-paddingX;
color: $ListControl-item-color;
transition: $ListControl-item-transition;
max-width: px2rem(200px) + 2*$ListControl-item-paddingX;
max-width: px2rem(200px) + 2 * $ListControl-item-paddingX;
&:not(.is-disabled) {
cursor: pointer;
}
.b-t, .b-l, .b-r, .b-b, .b-a {
.b-t,
.b-l,
.b-r,
.b-b,
.b-a {
border-color: $ListControl-item-color;
}
@ -36,7 +40,11 @@
border-color: $ListControl-item-onHover-borderColor;
color: $ListControl-item-onHover-color;
.b-t, .b-l, .b-r, .b-b, .b-a {
.b-t,
.b-l,
.b-r,
.b-b,
.b-a {
border-color: $ListControl-item-onHover-borderColor;
}
}
@ -53,7 +61,11 @@
color: $ListControl-item-onDisabled-color;
}
.b-t, .b-l, .b-r, .b-b, .b-a {
.b-t,
.b-l,
.b-r,
.b-b,
.b-a {
border-color: $ListControl-item-onDisabled-borderColor;
}
}
@ -70,12 +82,16 @@
}
}
.b-t, .b-l, .b-r, .b-b, .b-a {
.b-t,
.b-l,
.b-r,
.b-b,
.b-a {
border-color: $ListControl-item-onActive-color;
}
&:before {
content: '';
content: "";
position: absolute;
width: px2rem(14px);
height: px2rem(14px);
@ -85,7 +101,7 @@
}
&:after {
content: '';
content: "";
position: absolute;
width: px2rem(10px);
height: px2rem(5px);
@ -101,6 +117,7 @@
&-itemImage {
margin: $ListControl-item-paddingY * -1 $ListControl-item-paddingX * -1;
img {
display: block;
max-width: 100%;
@ -115,8 +132,7 @@
margin-top: $ListControl-item-paddingY;
}
&-placeholder {
color: $Form-input-placeholderColor;
}
}
}

2
scss/components/form/_matrix.scss
View File

@ -2,4 +2,4 @@
&-error {
margin-bottom: 0;
}
}
}

18
scss/components/form/_nested-select.scss
View File

@ -7,7 +7,10 @@
background: $Form-select-bg;
border-radius: $Form-select-borderRadius;
height: $Form-selectOption-height;
$paddingY: ($Form-selectOption-height - $Form-input-lineHeight * $Form-input-fontSize - $Form-select-borderWidth*2)/2;
$paddingY: (
$Form-selectOption-height - $Form-input-lineHeight *
$Form-input-fontSize - $Form-select-borderWidth * 2
)/2;
padding: $paddingY 0 $paddingY $Form-select-paddingX;
cursor: pointer;
color: $Form-select-color;
@ -74,7 +77,7 @@
line-height: $Form-input-height;
cursor: pointer;
float: right;
text-align: center
text-align: center;
}
&-menuOuter,
@ -83,7 +86,8 @@
position: absolute;
background: $Form-select-menu-bg;
color: $Form-select-menu-color;
border: $Form-select-outer-borderWidth solid $Form-input-onFocused-borderColor;
border: $Form-select-outer-borderWidth solid
$Form-input-onFocused-borderColor;
z-index: 10;
box-shadow: $Form-select-outer-boxShadow;
@ -103,7 +107,7 @@
background-color: $Form-select-menu-onHover-bg;
}
&:hover>.#{$ns}NestedSelect-childrenOuter {
&:hover > .#{$ns}NestedSelect-childrenOuter {
display: block;
}
@ -115,9 +119,7 @@
&.checkall {
border-bottom: px2rem(1px) solid #eceff8;
}
}
}
&-childrenOuter {
@ -131,7 +133,7 @@
}
&-optionArrowRight:before {
content: '\e63b';
content: "\e63b";
font-family: "iconfont" !important;
}
}
}

17
scss/components/form/_number.scss
View File

@ -20,6 +20,7 @@
overflow: hidden;
display: block;
touch-action: none;
&-active {
background: #ddd;
}
@ -33,6 +34,7 @@
&:hover {
border-color: $Form-input-onFocused-borderColor;
.#{$ns}Number-handler-up,
.#{$ns}Number-handler-wrap {
border-color: $Form-input-onFocused-borderColor;
@ -41,6 +43,7 @@
&-disabled:hover {
border-color: $Form-input-borderColor;
.#{$ns}Number-handler-up,
.#{$ns}Number-handler-wrap {
border-color: $Form-input-borderColor;
@ -54,7 +57,7 @@
&-input {
width: 100%;
background-color: transparent;
background-color: transparent;
text-align: left;
vertical-align: top;
outline: 0;
@ -98,7 +101,7 @@
}
}
@if $Number-handler-mode == vertical {
@if $Number-handler-mode==vertical {
&-handler-wrap {
float: right;
border-left: px2rem(1px) solid $Form-input-borderColor;
@ -110,14 +113,14 @@
line-height: ($Form-input-height - px2rem(6px)) / 2;
height: ($Form-input-height - $Number-borderWidth * 2) / 2;
}
&-handler-up {
border-bottom: px2rem(1px) solid $Form-input-borderColor;
padding-top: px2rem(1px);
}
} @else {
position: relative;
&-input {
text-align: center;
}
@ -139,8 +142,6 @@
}
}
&-handler-down-disabled,
&-handler-up-disabled {
background-color: $Number-handler-onDisabled-bg;
@ -154,8 +155,10 @@
cursor: not-allowed;
background-color: $gray200;
}
.#{$ns}Number-handler {
opacity: 0.72;
&:hover {
color: $text--muted-color;
border-color: $Form-input-borderColor;
@ -166,4 +169,4 @@
.#{$ns}NumberControl:not(.is-inline) > .#{$ns}Number {
display: block;
}
}

8
scss/components/form/_picker.scss
View File

@ -1,9 +1,11 @@
.#{$ns}Picker {
&-values {
display: inline-block;
margin-top: -$gap-xs;
padding: ($Form-input-height - $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px))/2 0;
padding: (
$Form-input-height - $Form-input-lineHeight *
$Form-input-fontSize - px2rem(2px)
)/2 0;
}
&-value {
@ -46,4 +48,4 @@
.#{$ns}PickerControl {
padding-top: $Form-input-height - px2rem(30px);
}
}

2
scss/components/form/_qr-code.scss
View File

@ -1,4 +1,4 @@
.#{$ns}QrCode {
min-height: $Form-input-height;
padding: px2rem(7px) 0;
}
}

30
scss/components/form/_range.scss
View File

@ -2,17 +2,19 @@
position: relative;
@include clearfix();
padding-top: 1.0rem;
padding-top: 1rem;
padding-bottom: 1.1rem;
&--withInput {
.#{$ns}InputRange {
width: calc(100% - 120px);
}
.#{$ns}InputRange-label--mid {
left: calc(50% - 60px);
}
}
.#{$ns}InputRange {
&-input {
font-size: $fontSizeSm;
@ -21,30 +23,35 @@
right: px2rem(26px);
top: px2rem(12px);
height: px2rem(30px);
input {
padding: px2rem(10px);
width: 100%;
height: 100%;
&:focus {
outline: none;
border: $borderWidth solid $info;
}
}
}
&-unit {
position: absolute;
right: px2rem(10px);
top: px2rem(7px);
}
&-clear {
position: absolute;
top: px2rem(18px);
right: 0;
cursor: pointer;
svg {
height: px2rem(16px);
width: px2rem(16px);
fill: #999
fill: #999;
}
}
}
@ -66,27 +73,29 @@
width: $InputRange-slider-width;
height: $InputRange-slider-height;
margin-left: $InputRange-slider-width / -2;
margin-top: $InputRange-slider-height / -2 + $InputRange-track-height / -2;
margin-top: $InputRange-slider-height / -2 + $InputRange-track-height /
-2;
outline: none;
position: absolute;
z-index: 2;
top: 50%;
transition: $InputRange-slider-transition;
&:active {
transform: $InputRange-slider-onActive-transform;
}
&:focus {
box-shadow: $InputRange-slider-onFocus-boxShadow
box-shadow: $InputRange-slider-onFocus-boxShadow;
}
.input-range--disabled & {
background: $InputRange-slider-onDisabled-bg;
border: $InputRange-slider-onDisabled-border;
box-shadow: none;
transform: none;
}
&:before {
content: "||";
color: #fff;
@ -143,7 +152,7 @@
// .#{$ns}InputRange-label--max & {
// left: 50%;
// }
// }
// }
// track
&-track {
@ -154,6 +163,7 @@
height: $InputRange-track-height;
position: relative;
transition: $InputRange-track-transition;
.#{$ns}InputRange.is-disabled & {
background: $InputRange-track-onDisabled-bg;
}
@ -168,7 +178,7 @@
&::before,
&::after {
content: '';
content: "";
width: 0.5rem;
height: 100%;
position: absolute;
@ -189,6 +199,4 @@
&-track--active {
background: $InputRange-track-onActive-bg;
}
}

2
scss/components/form/_rating.scss
View File

@ -3,7 +3,7 @@
overflow: hidden;
display: block;
float: left;
font-size: px2rem(24px);;
font-size: px2rem(24px);
color: $dark;
cursor: pointer;

35
scss/components/form/_repeat.scss
View File

@ -13,30 +13,29 @@
margin-top: 0;
}
// .InputRange-label--value {
// top: -25px;
// .InputRange-label--value {
// top: -25px;
// .InputRange-labelContainer {
// font-size: 14px;
// }
// }
// .InputRange-labelContainer {
// font-size: 14px;
// }
// }
// .InputRange-slider {
// z-index: 2;
// }
// .InputRange-slider {
// z-index: 2;
// }
// .InputRange-track--active, .InputRange-slider {
// background-color: #23b7e5;
// border-color: #23b7e5;
// }
// .InputRange-track--active, .InputRange-slider {
// background-color: #23b7e5;
// border-color: #23b7e5;
// }
}
@media (min-width: 768px) {
.repeat-control.form-contorl-inline,
.form-group-inline .repeat-control {
display: inline-block;
min-width: 280px;
width: auto;
display: inline-block;
min-width: 280px;
width: auto;
}
}
}

152
scss/components/form/_rich-text.scss
View File

@ -1,7 +1,7 @@
// todo
.fr-popup {
z-index: $zindex-popover !important;
z-index: $zindex-popover !important;
}
.#{$ns}RichTextControl {
@ -10,79 +10,91 @@
border: $Form-input-borderWidth solid $Form-input-borderColor;
width: 100%;
.fr-toolbar.fr-top {
box-shadow: none;
border: 0;
position: relative;
}
.fr-box.fr-basic.fr-top:not(.fr-fullscreen) .fr-wrapper {
min-height: 150px;
max-height: 400px;
box-shadow: none;
overflow: auto;
border-top: 1px solid $Form-input-borderColor;
}
.fr-toolbar .fr-command.fr-btn, .fr-popup .fr-command.fr-btn {
color: $Button--default-color;
}
.fr-toolbar .fr-command.fr-btn.fr-active, .fr-popup .fr-command.fr-btn.fr-active {
color: $info;
}
.fr-desktop .fr-command:hover, .fr-desktop .fr-command:focus {
background-color: $light;
}
.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active, .fr-popup .fr-command.fr-btn.fr-dropdown.fr-active {
background-color: $light;
}
.fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-active {
background-color: $info;
color: #fff;
}
&.is-focused {
border: $Form-input-borderWidth solid $Form-input-onFocused-borderColor;
.fr-box.fr-basic.fr-top .fr-wrapper {
border-top: $Form-input-borderWidth solid $Form-input-onFocused-borderColor;
.fr-toolbar.fr-top {
box-shadow: none;
border: 0;
position: relative;
}
}
.fr-box.fr-basic .fr-element {
min-height: 150px;
}
.fr-sticky-dummy {
position: absolute;
}
&.is-disabled {
border-color: $Form-input-onDisabled-borderColor;
pointer-events: none;
opacity: 0.6;
.fr-box.fr-basic.fr-top .fr-wrapper {
border-color: $Form-input-onDisabled-borderColor;
.fr-box.fr-basic.fr-top:not(.fr-fullscreen) .fr-wrapper {
min-height: 150px;
max-height: 400px;
box-shadow: none;
overflow: auto;
border-top: 1px solid $Form-input-borderColor;
}
}
// &.amis-rich-text-control-md {
// .fr-box.fr-basic .fr-element,
// .fr-box.fr-basic.fr-top .fr-wrapper {
// min-height: 250px;
// }
// }
.fr-toolbar .fr-command.fr-btn,
.fr-popup .fr-command.fr-btn {
color: $Button--default-color;
}
// &.amis-rich-text-control-lg {
// .fr-box.fr-basic .fr-element,
// .fr-box.fr-basic.fr-top .fr-wrapper {
// min-height: 300px;
// }
// }
.fr-toolbar .fr-command.fr-btn.fr-active,
.fr-popup .fr-command.fr-btn.fr-active {
color: $info;
}
.fr-desktop .fr-command:hover,
.fr-desktop .fr-command:focus {
background-color: $light;
}
.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active,
.fr-popup .fr-command.fr-btn.fr-dropdown.fr-active {
background-color: $light;
}
.fr-command.fr-btn
+ .fr-dropdown-menu
.fr-dropdown-wrapper
.fr-dropdown-content
ul.fr-dropdown-list
li
a.fr-active {
background-color: $info;
color: #fff;
}
&.is-focused {
border: $Form-input-borderWidth solid $Form-input-onFocused-borderColor;
.fr-box.fr-basic.fr-top .fr-wrapper {
border-top: $Form-input-borderWidth solid
$Form-input-onFocused-borderColor;
}
}
.fr-box.fr-basic .fr-element {
min-height: 150px;
}
.fr-sticky-dummy {
position: absolute;
}
&.is-disabled {
border-color: $Form-input-onDisabled-borderColor;
pointer-events: none;
opacity: 0.6;
.fr-box.fr-basic.fr-top .fr-wrapper {
border-color: $Form-input-onDisabled-borderColor;
}
}
// &.amis-rich-text-control-md {
// .fr-box.fr-basic .fr-element,
// .fr-box.fr-basic.fr-top .fr-wrapper {
// min-height: 250px;
// }
// }
// &.amis-rich-text-control-lg {
// .fr-box.fr-basic .fr-element,
// .fr-box.fr-basic.fr-top .fr-wrapper {
// min-height: 300px;
// }
// }
}
// @media (min-width: 768px) {
@ -92,4 +104,4 @@
// display: inline-block;
// width: 280px;
// }
// }
// }

34
scss/components/form/_select.scss
View File

@ -1,4 +1,3 @@
.#{$ns}Select {
display: inline-flex;
vertical-align: middle;
@ -8,7 +7,10 @@
background: $Form-select-bg;
border-radius: $Form-select-borderRadius;
height: $Form-selectOption-height;
$paddingY: ($Form-selectOption-height - $Form-input-lineHeight * $Form-input-fontSize - $Form-select-borderWidth*2)/2;
$paddingY: (
$Form-selectOption-height - $Form-input-lineHeight *
$Form-input-fontSize - $Form-select-borderWidth * 2
)/2;
padding: $paddingY 0 $paddingY $Form-select-paddingX;
cursor: pointer;
color: $Form-select-color;
@ -82,7 +84,8 @@
.#{$ns}Select-value {
position: static;
user-select: none;
line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px);
line-height: $Form-input-lineHeight * $Form-input-fontSize -
px2rem(2px);
display: inline-block;
vertical-align: middle;
font-size: $Form-selectValue-fontSize;
@ -99,8 +102,6 @@
}
}
&-valueIcon {
cursor: pointer;
border-right: px2rem(1px) solid $Form-selectValue-borderColor;
@ -121,7 +122,7 @@
line-height: 1;
&:before {
transition: transform .3s;
transition: transform 0.3s;
content: $Form-select-caret-icon;
font-family: $Form-select-caret-vender;
font-size: $Form-select-caret-fontSize;
@ -138,7 +139,8 @@
position: absolute;
background: $Form-select-menu-bg;
color: $Form-select-menu-color;
border: $Form-select-outer-borderWidth solid $Form-input-onFocused-borderColor;
border: $Form-select-outer-borderWidth solid
$Form-input-onFocused-borderColor;
left: px2rem(-1px);
right: px2rem(-1px);
min-width: 100%;
@ -153,8 +155,11 @@
}
&-option {
padding: ($Form-select-menu-height - $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px))/2 $Form-select-paddingX;
padding: (
$Form-select-menu-height - $Form-input-lineHeight *
$Form-input-fontSize - px2rem(2px)
)/2 $Form-select-paddingX;
&.is-active {
color: $Form-select-menu-onActive-color;
background-color: $Form-select-menu-onActive-bg;
@ -164,7 +169,7 @@
color: $Form-select-menu-onHover-color;
background-color: $Form-select-menu-onHover-bg;
}
&.is-disabled {
color: $Form-select-menu-onDisabled-color;
background-color: $Form-select-menu-onDisabled-bg;
@ -182,8 +187,8 @@
&.is-focused,
&.is-opened {
border-color: $Form-input-onFocused-borderColor;
@if ($Form-select-onFocused-color != $Form-select-color) {
@if ($Form-select-onFocused-color !=$Form-select-color) {
color: $Form-select-onFocused-color;
}
}
@ -217,7 +222,8 @@
margin-top: -$Form-select-borderWidth;
background: $Form-select-menu-bg;
color: $Form-select-menu-color;
border: $Form-select-outer-borderWidth solid $Form-input-onFocused-borderColor;
border: $Form-select-outer-borderWidth solid
$Form-input-onFocused-borderColor;
box-shadow: $Form-select-outer-boxShadow;
border-top-left-radius: 0;
border-top-right-radius: 0;
@ -237,4 +243,4 @@
min-width: 100%;
display: inline-flex !important;
}
}
}

21
scss/components/form/_sub-form.scss
View File

@ -1,9 +1,11 @@
.#{$ns}SubForm {
&-values {
display: inline-block;
margin-top: -$gap-xs;
padding: ($Form-input-height - $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px))/2 0;
padding: (
$Form-input-height - $Form-input-lineHeight *
$Form-input-fontSize - px2rem(2px)
)/2 0;
}
&-value {
@ -45,9 +47,16 @@
&-addBtn {
font-size: $SubForm--addBtn-fontSize;
@include button-size($SubForm--addBtn-paddingY, $SubForm--addBtn-paddingX, $SubForm--addBtn-fontSize, $SubForm--addBtn-lineHeight, $SubForm--addBtn-borderRadius, $SubForm--addBtn-height);
@include button-size(
$SubForm--addBtn-paddingY,
$SubForm--addBtn-paddingX,
$SubForm--addBtn-fontSize,
$SubForm--addBtn-lineHeight,
$SubForm--addBtn-borderRadius,
$SubForm--addBtn-height
);
@include button-variant(
$SubForm--addBtn-bg,
$SubForm--addBtn-border,
@ -69,4 +78,4 @@
.#{$ns}SubFormControl {
padding-top: $Form-input-height - $SubForm--addBtn-height;
}
}

10
scss/components/form/_switch.scss
View File

@ -1,4 +1,3 @@
.#{$ns}Switch {
cursor: pointer;
position: relative;
@ -11,11 +10,10 @@
margin: 0;
vertical-align: middle;
text-align: left;
&.is-disabled {
background-color: $Switch-onDisabled-bgColor;
}
i {
&:before {
@ -37,6 +35,7 @@
border-radius: px2rem(30px);
transition: all 0.2s;
}
&:after {
content: "";
position: absolute;
@ -59,7 +58,7 @@
& + i {
&:before {
color: $Switch-onDisabled-color;
background-color: $Switch-onDisabled-bgColor
background-color: $Switch-onDisabled-bgColor;
}
&:after {
@ -74,9 +73,10 @@
left: 100%;
border-width: 0;
}
&:after {
margin-left: $Switch-width - $Switch-height;
content: "On";
color: $white;
text-indent: px2rem(-20px); // todo

16
scss/components/form/_tag.scss
View File

@ -1,4 +1,3 @@
.#{$ns}TagControl {
@include input-text();
@ -82,9 +81,16 @@
cursor: pointer;
user-select: none;
border: $TagControl-sugBtn-borderWidth solid transparent;
@include button-size($TagControl-sugBtn-paddingY, $TagControl-sugBtn-paddingX, $TagControl-sugBtn-fontSize, $TagControl-sugBtn-lineHeight, $TagControl-sugBtn-borderRadius, $TagControl-sugBtn-height);
@include button-size(
$TagControl-sugBtn-paddingY,
$TagControl-sugBtn-paddingX,
$TagControl-sugBtn-fontSize,
$TagControl-sugBtn-lineHeight,
$TagControl-sugBtn-borderRadius,
$TagControl-sugBtn-height
);
@include button-variant(
$TagControl-sugBtn-bg,
$TagControl-sugBtn-border,
@ -103,4 +109,4 @@
}
}
}
}
}

30
scss/components/form/_text.scss
View File

@ -18,6 +18,7 @@
@mixin input-text {
position: relative;
&.is-inline {
display: inline-block;
}
@ -60,7 +61,7 @@
border-color: $Form-input-onFocused-borderColor;
box-shadow: $Form-input-boxShadow;
@if $Form-input-onFocused-bg != $Form-input-bg {
@if $Form-input-onFocused-bg !=$Form-input-bg {
background-color: $Form-input-onFocused-bg;
}
}
@ -141,16 +142,16 @@
border-radius: 0;
&:first-child {
border-top-left-radius: $Form-input-borderRadius;
border-top-left-radius: $Form-input-borderRadius;
border-bottom-left-radius: $Form-input-borderRadius;
}
&:last-child {
border-top-right-radius: $Form-input-borderRadius;
border-top-right-radius: $Form-input-borderRadius;
border-bottom-right-radius: $Form-input-borderRadius;
}
@if $Form-input-addOnDividerBorderWidth == 0 {
@if $Form-input-addOnDividerBorderWidth==0 {
&:not(:last-child) {
border-right-width: 0;
}
@ -175,38 +176,39 @@
&:last-child {
border-right-width: px2rem(1px);
border-top-right-radius: $Form-input-borderRadius;
border-top-right-radius: $Form-input-borderRadius;
border-bottom-right-radius: $Form-input-borderRadius;
}
}
&--withAddOn > &-button {
> .#{$ns}Button {
position: relative;
border-radius: 0;
margin-left: px2rem(-1px);
border: $InputGroup-button-borderWidth solid $InputGroup-button-borderColor;
border: $InputGroup-button-borderWidth solid
$InputGroup-button-borderColor;
}
&:not(:last-child) .#{$ns}Button {
border-right: 0;
}
&:first-child .#{$ns}Button {
&:first-child .#{$ns}Button {
@if $InputGroup-button-borderRadius {
border-top-left-radius: $InputGroup-button-borderRadius;
border-bottom-left-radius: $InputGroup-button-borderRadius;
}
}
&:last-child .#{$ns}Button {
&:last-child .#{$ns}Button {
@if $InputGroup-button-borderRadius {
border-top-right-radius: $InputGroup-button-borderRadius;
border-bottom-right-radius: $InputGroup-button-borderRadius;
}
}
}
&--withAddOn.is-focused > &-button .#{$ns}Button {
border-color: $Form-input-onFocused-borderColor;
}
@ -246,7 +248,10 @@
}
&-sugItem {
padding: ($Form-selectOption-height - $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px))/2 px2rem(12px);
padding: (
$Form-selectOption-height - $Form-input-lineHeight *
$Form-input-fontSize - px2rem(2px)
)/2 px2rem(12px);
svg {
width: px2rem(16px);
@ -254,7 +259,7 @@
float: right;
fill: darken($color: $Form-input-iconColor, $amount: 20%);
}
&:not(.is-disabled) {
cursor: pointer;
}
@ -281,6 +286,7 @@
white-space: normal;
margin-bottom: -$gap-xs;
> input {
margin-bottom: $gap-xs;
}
@ -310,4 +316,4 @@
&-input--multiple &-valueLabel {
padding: 0 $gap-xs;
}
}
}

11
scss/components/form/_textarea.scss
View File

@ -2,7 +2,11 @@
border: 1px solid $Form-input-borderColor;
border-radius: $Form-input-borderRadius;
line-height: $Form-input-lineHeight;
padding: px2rem(6px) ($Form-input-height - $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px));
padding: px2rem(6px)
(
$Form-input-height - $Form-input-lineHeight * $Form-input-fontSize -
px2rem(2px)
);
font-size: $Form-input-fontSize;
outline: none;
resize: none;
@ -13,7 +17,8 @@
border-color: $Form-input-onError-borderColor;
}
&:focus, &.is-focused {
&:focus,
&.is-focused {
border-color: $Form-input-onFocused-borderColor;
box-shadow: $Form-input-boxShadow;
}
@ -23,4 +28,4 @@
background: $gray200;
color: $text--muted-color;
}
}
}

18
scss/components/form/_transfer-select.scss
View File

@ -1,6 +1,7 @@
.#{$ns}TransferSelectControl {
display: flex;
height: px2rem(300px);
.#{$ns}TransferSelect {
&-allOptions,
&-selectedOptions {
@ -8,6 +9,7 @@
flex: 1;
border: $borderWidth solid $borderColor;
overflow: auto;
.#{$ns}TransferSelect-heading {
position: relative;
height: px2rem(40px);
@ -15,16 +17,19 @@
padding-left: px2rem(20px);
border-bottom: $TransferSelect-heading-borderBottom;
}
.#{$ns}TransferSelect-body {
table tbody tr td,
ul li {
position: relative;
}
ul {
margin: 0;
padding: 0;
padding-top: px2rem(10px);
}
li {
height: px2rem(30px);
line-height: px2rem(30px);
@ -32,6 +37,7 @@
padding-left: px2rem(20px);
}
}
.#{$ns}TransferSelect-selectAll,
.#{$ns}TransferSelect-clearAll {
position: absolute;
@ -39,6 +45,7 @@
cursor: pointer;
color: $primary;
}
.#{$ns}TransferSelect-searchWrapper {
i {
height: px2rem(17px);
@ -46,12 +53,14 @@
}
}
}
&-allOptions {
&--table {
.#{$ns}TransferSelect-heading {
background-color: $TransferSelect--table-heading-bg;
display: flex;
}
.#{$ns}TransferSelect-searchWrapper {
display: inline-block;
padding: px2rem(3px) px2rem(10px);
@ -59,27 +68,32 @@
margin-left: px2rem(30px);
}
}
&--normal {
.#{$ns}TransferSelect-heading {
background-color: $TransferSelect--normal-heading-bg;
}
.#{$ns}TransferSelect-searchWrapper {
padding: px2rem(10px) px2rem(20px);
}
}
}
&-selectedOptions {
&--table {
.#{$ns}TransferSelect-heading {
background-color: $TransferSelect--table-heading-bg;
}
}
&--normal {
.#{$ns}TransferSelect-heading {
background-color: $TransferSelect--normal-heading-bg;
}
}
}
&-option-close {
width: px2rem(12px);
height: px2rem(12px);
@ -87,8 +101,10 @@
right: px2rem(20px);
cursor: pointer;
}
&-action {
padding: 0 px2rem(20px);
.#{$ns}TransferSelect-actionIcon {
display: inline-block;
width: 0;
@ -101,4 +117,4 @@
}
}
}
}
}

17
scss/components/form/_tree-select.scss
View File

@ -11,7 +11,7 @@
border-color: $Form-input-onFocused-borderColor;
box-shadow: $Form-input-boxShadow;
@if $Form-input-onFocused-bg != $Form-input-bg {
@if $Form-input-onFocused-bg !=$Form-input-bg {
background-color: $Form-input-onFocused-bg;
}
}
@ -64,7 +64,8 @@
user-select: none;
white-space: nowrap;
vertical-align: middle;
line-height: $Form-input-lineHeight * $Form-input-fontSize - px2rem(2px);
line-height: $Form-input-lineHeight * $Form-input-fontSize -
px2rem(2px);
display: inline-block;
font-size: $Form-selectValue-fontSize;
color: $Form-selectValue-color;
@ -73,23 +74,23 @@
border-radius: 2px;
margin-right: $gap-xs;
margin-bottom: $gap-xs;
&.is-disabled {
pointer-events: none;
opacity: $Button-onDisabled-opacity;
}
}
.#{$ns}TreeSelect-valueIcon {
cursor: pointer;
border-right: px2rem(1px) solid $Form-selectValue-borderColor;
padding: 1px 5px;
&:hover {
background-color: darken($Form-selectValue-bg, 5%);
}
}
.#{$ns}TreeSelect-valueLabel {
padding: 0 $gap-xs;
}
@ -104,7 +105,7 @@
justify-content: center;
&:before {
content: '';
content: "";
border-color: $Form-input-iconColor transparent transparent;
border-style: solid;
border-width: px2rem(5px) px2rem(5px) px2rem(2.5px);
@ -131,4 +132,4 @@
max-height: 400px;
overflow: auto;
}
}
}

176
scss/components/form/_tree.scss
View File

@ -15,104 +15,104 @@
}
}
.#{$ns}Tree {
&-list, &-sublist {
list-style: none;
padding: 0;
margin: 0;
}
&-sublist {
padding-left: $Tree-indent;
&.is-folded {
display: none;
}
}
&-item {
line-height: px2rem(30px);
position: relative;
> a {
color: inherit;
&:hover {
text-decoration: none;
}
&-list,
&-sublist {
list-style: none;
padding: 0;
margin: 0;
}
&--isLeaf > a {
padding-left: $Tree-itemArrowWidth + $gap-xs;
}
}
&-sublist {
padding-left: $Tree-indent;
&-rootItem > a > i {
margin-left: 0 !important;
}
&-itemArrow {
cursor: pointer;
width: $Tree-itemArrowWidth;
margin-right: $gap-xs;
display: inline-block;
&:before {
font-style: normal;
font-family: $Tree-arrowVendor;
content: $Tree-unfoldedArrowContent;
&.is-folded {
display: none;
}
}
&.is-folded:before {
content: $Tree-foldedArrowContent;
}
}
&-item {
line-height: px2rem(30px);
position: relative;
&-itemIcon {
display: inline-block;
margin-right: $gap-xs;
}
> a {
color: inherit;
&-rootIcon {
&:before {
font-style: normal;
font-family: $Tree-rootIconVendor;
content: $Tree-rootIconContent;
}
}
&:hover {
text-decoration: none;
}
}
&-leafIcon {
&:before {
font-style: normal;
font-family: $Tree-leafIconVendor;
content: $Tree-leafIconContent;
}
}
&-folderIcon {
&:before {
font-style: normal;
font-family: $Tree-folderIconVendor;
content: $Tree-folderIconContent;
}
}
&-itemText {
user-select: none;
cursor: pointer;
&.is-checked,
&.is-children-checked {
color: $Tree-itemText--onChecked-color;
&--isLeaf > a {
padding-left: $Tree-itemArrowWidth + $gap-xs;
}
}
&.is-disabled {
color: $text--muted-color;
&-rootItem > a > i {
margin-left: 0 !important;
}
}
&-placeholder {
color: $text--muted-color;
}
}
&-itemArrow {
cursor: pointer;
width: $Tree-itemArrowWidth;
margin-right: $gap-xs;
display: inline-block;
&:before {
font-style: normal;
font-family: $Tree-arrowVendor;
content: $Tree-unfoldedArrowContent;
}
&.is-folded:before {
content: $Tree-foldedArrowContent;
}
}
&-itemIcon {
display: inline-block;
margin-right: $gap-xs;
}
&-rootIcon {
&:before {
font-style: normal;
font-family: $Tree-rootIconVendor;
content: $Tree-rootIconContent;
}
}
&-leafIcon {
&:before {
font-style: normal;
font-family: $Tree-leafIconVendor;
content: $Tree-leafIconContent;
}
}
&-folderIcon {
&:before {
font-style: normal;
font-family: $Tree-folderIconVendor;
content: $Tree-folderIconContent;
}
}
&-itemText {
user-select: none;
cursor: pointer;
&.is-checked,
&.is-children-checked {
color: $Tree-itemText--onChecked-color;
}
&.is-disabled {
color: $text--muted-color;
}
}
&-placeholder {
color: $text--muted-color;
}
}

35
scss/layout/_aside.scss
View File

@ -1,4 +1,3 @@
.#{$ns}AsideNav {
@include clearfix();
@ -17,15 +16,12 @@
margin: 0;
}
&-itemArrow {
float: right;
display: block;
width: px2rem(20px);
text-align: center;
line-height: px2rem(17px);
&::before {
content: $Layout-asideLink-arrowIcon;
@ -35,7 +31,7 @@
color: $Layout-asideLink-arrowColor;
font-size: $Layout-asideLink-arrowFontSize;
}
.#{$ns}AsideNav-item.is-active > a > &::before {
transform: rotate(90deg);
color: $Layout-asideLink-onActive-arrowColor;
@ -58,7 +54,10 @@
}
&-itemIcon {
margin: ($Layout-nav-height - $lineHeightBase * $Layout-asideLink-fontSize)/-2 px2rem(-10px);
margin: (
$Layout-nav-height - $lineHeightBase *
$Layout-asideLink-fontSize
)/-2 px2rem(-10px);
line-height: $Layout-nav-height;
width: $Layout-nav-height;
vertical-align: middle;
@ -83,12 +82,12 @@
height: 0;
overflow: hidden;
margin-left: px2rem(-20px);
transition: all .2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
background-color: $Layout-aside-onAcitve-bg;
.is-active > &,
.#{$ns}Layout--folded .#{$ns}AsideNav-item:hover > &,
.#{$ns}Layout--folded .#{$ns}AsideNav-item:focus > &,
.#{$ns}Layout--folded .#{$ns}AsideNav-item:hover > &,
.#{$ns}Layout--folded .#{$ns}AsideNav-item:focus > &,
.#{$ns}Layout--folded .#{$ns}AsideNav-item:active > & {
opacity: 1;
margin-left: 0;
@ -111,13 +110,15 @@
text-transform: none;
display: block;
font-size: $Layout-asideLink-fontSize;
padding: ($Layout-nav-height - $lineHeightBase*$Layout-asideLink-fontSize)/2 px2rem(15px);
padding: (
$Layout-nav-height - $lineHeightBase *
$Layout-asideLink-fontSize
)/2 px2rem(15px);
position: relative;
transition: background-color .2s ease-in-out 0s;
transition: background-color 0.2s ease-in-out 0s;
color: $Layout-asideLink-color;
text-decoration: none;
user-select: none;
&:hover {
color: $Layout-asideLink-onHover-color;
@ -145,7 +146,7 @@
a {
padding-left: $Layout-nav-height + px2rem(5px);
}
.#{$ns}AsideNav-item a {
padding-left: $Layout-nav-height + px2rem(35px);
}
@ -162,7 +163,6 @@
display: block;
}
}
}
&-subHeader {
@ -172,7 +172,10 @@
cursor: default;
background: transparent;
color: darken($Layout-aside-color, 10%);
padding: ($Layout-nav--folded-height - $lineHeightBase * $Layout-asideLink-fontSize)/2 px2rem(20px);
padding: (
$Layout-nav--folded-height - $lineHeightBase *
$Layout-asideLink-fontSize
)/2 px2rem(20px);
&:hover {
color: darken($Layout-aside-color, 10%);
@ -286,4 +289,4 @@
width: $Layout-aside--lg-width;
}
}
}
}

5
scss/layout/_grid.scss
View File

@ -38,7 +38,6 @@
// }
// }
// @mixin calc-grid-column($index, $class, $type) {
// @if ($type==width) and ($index > 0) {
// .#{$ns}Grid-col--#{$class}#{$index} {
@ -141,8 +140,6 @@
// @include container-fixed;
// }
// @include make-grid-columns;
@include make-grid(xs);
@ -151,7 +148,7 @@
.#{$ns}Grid {
@include make-row;
}
@include make-grid(sm);
}

33
scss/layout/_hbox.scss
View File

@ -4,7 +4,8 @@
border-spacing: 0;
width: 100%;
height: 100%;
&>.#{$ns}Hbox-col {
& > .#{$ns}Hbox-col {
display: table-cell;
vertical-align: top;
height: 100%;
@ -15,30 +16,37 @@
.#{$ns}FormHbox {
margin-left: -15px;
margin-right: -15px;
>.#{$ns}Hbox>.#{$ns}Hbox-col {
> .#{$ns}Hbox > .#{$ns}Hbox-col {
padding-left: 15px;
padding-right: 15px;
vertical-align: top;
>.#{$ns}Form-group {
> .#{$ns}Form-group {
margin-left: 0;
margin-right: 0;
}
>.#{$ns}Form-group:last-child {
> .#{$ns}Form-group:last-child {
margin-bottom: 0;
}
}
&.#{$ns}Hbox--xs {
margin-left: -5px;
margin-right: -5px;
>.#{$ns}Hbox>.#{$ns}Hbox-col {
> .#{$ns}Hbox > .#{$ns}Hbox-col {
padding-left: 5px;
padding-right: 5px;
}
}
&.#{$ns}Hbox--sm {
margin-left: -10px;
margin-right: -10px;
>.#{$ns}Hbox>.#{$ns}Hbox-col {
> .#{$ns}Hbox > .#{$ns}Hbox-col {
padding-left: 10px;
padding-right: 10px;
}
@ -48,17 +56,21 @@
@include media-breakpoint-down(md) {
.#{$ns}Hbox--autoSm {
display: block;
&>.#{$ns}Hbox-col {
& > .#{$ns}Hbox-col {
width: auto;
height: auto;
display: block;
&.show {
display: block !important;
}
}
& .#{$ns}Vbox {
height: auto;
}
& .cell-inner {
position: static !important;
}
@ -68,16 +80,19 @@
@include media-breakpoint-down(sm) {
.#{$ns}Hbox--autoXs {
display: block;
&>.#{$ns}Hbox-col {
& > .#{$ns}Hbox-col {
width: auto;
height: auto;
display: block;
}
& .#{$ns}Vbox {
height: auto;
}
& .cell-inner {
position: static !important;
}
}
}
}

70
scss/layout/_layout.scss
View File

@ -1,27 +1,29 @@
html, body {
html,
body {
width: 100%;
height: 100%;
}
body {
overflow-x: hidden;
}
.#{$ns}Layout {
height: auto;
min-height: 100%;
width: 100%;
min-height: 100%;
width: 100%;
position: relative;
&:before{
content: "";
position: absolute;
width: inherit;
top: 0;
bottom: 0;
z-index: -1;
background-color: $body-bg;
border: inherit;
display: block;
&:before {
content: "";
position: absolute;
width: inherit;
top: 0;
bottom: 0;
z-index: -1;
background-color: $body-bg;
border: inherit;
display: block;
}
.#{$ns}Layout-header {
@ -44,7 +46,6 @@ body {
&-brandBar {
background: $Layout-brand-bg;
color: $Layout-brandBar-color;
> button {
padding: px2rem(10px) px2rem(17px);
@ -70,16 +71,17 @@ body {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover{
&:hover {
text-decoration: none;
}
img{
img {
max-height: $Layout-header-height / 2;
// margin-top: px2rem(-4px);
vertical-align: middle;
display: inline;
}
}
}
&-headerBar {
@ -87,13 +89,13 @@ body {
min-height: $Layout-header-height;
padding: 0 $gap-sm;
}
&-aside {
float: left;
background: $Layout-aside-bg;
color: $Layout-aside-color;
&:before{
&:before {
content: "";
position: absolute;
width: inherit;
@ -109,19 +111,20 @@ body {
position: absolute;
bottom: 0;
width: 100%;
z-index: $zindex-fixed;;
z-index: $zindex-fixed;
max-width: $Layout-aside-width;
// .app-aside-folded & {
// max-width: @app-aside-folded-width;
// }
~ div{
~ div {
padding-bottom: px2rem(50px);
}
}
&-content {
height: 100%;
@include clearfix();
@include clearfix();
}
// &-content--full {
@ -183,7 +186,7 @@ body {
@include media-breakpoint-up(md) {
.#{$ns}Layout {
&-brand,
&-brand,
&-brandBar,
&-aside {
width: $Layout-aside-width;
@ -209,7 +212,7 @@ body {
.visible-folded {
display: inherit;
}
.hidden-folded {
display: none !important;
}
@ -281,9 +284,11 @@ body {
&::-webkit-scrollbar {
-webkit-appearance: none;
}
&::-webkit-scrollbar:vertical {
width: $scrollbar-width;
}
& > * {
width: $Layout-aside-width;
}
@ -316,7 +321,7 @@ body {
}
&--sm:not(.#{$ns}Layout--folded) {
.#{$ns}Layout-brand,
.#{$ns}Layout-brand,
.#{$ns}Layout-brandBar,
.#{$ns}Layout-aside {
width: $Layout-aside--sm-width;
@ -346,7 +351,7 @@ body {
}
&--md:not(.#{$ns}Layout--folded) {
.#{$ns}Layout-brand,
.#{$ns}Layout-brand,
.#{$ns}Layout-brandBar,
.#{$ns}Layout-aside {
width: $Layout-aside--md-width;
@ -376,7 +381,7 @@ body {
}
&--lg:not(.#{$ns}Layout--folded) {
.#{$ns}Layout-brand,
.#{$ns}Layout-brand,
.#{$ns}Layout-brandBar,
.#{$ns}Layout-aside {
width: $Layout-aside--lg-width;
@ -405,7 +410,6 @@ body {
}
}
}
}
@include media-breakpoint-down(sm) {
@ -414,7 +418,7 @@ body {
}
.#{$ns}Layout-content {
transition: transform .2s ease;
transition: transform 0.2s ease;
}
.#{$ns}Layout-aside {
@ -456,6 +460,4 @@ body {
padding-top: px2rem(50px);
}
}
}
}

7
scss/layout/_vbox.scss
View File

@ -5,20 +5,25 @@
width: 100%;
height: 100%;
min-height: 240px;
& .row-row {
display: table-row;
height: 100%;
& .#{$ns}Vbox-cell {
position: relative;
height: 100%;
width: 100%;
.ie & {
display: table-cell;
overflow: auto;
& .cell-inner {
overflow: visible !important;
}
}
& .cell-inner {
position: absolute;
top: 0;
@ -30,4 +35,4 @@
}
}
}
}
}

71
scss/themes/cxd.scss
View File

@ -1,7 +1,7 @@
@import "../functions";
$remFactor: 16px;
$ns: 'cxd-';
$ns: "cxd-";
$info: #108cee;
$primary: #108cee;
@ -12,32 +12,32 @@ $light: #eaf6fe;
$white: #fff;
$info-bg: #eaf6fe;
$success-bg: #F1FDEB;
$warning-bg: #FCF7F1;
$danger-bg: #FFF5F5;
$success-bg: #f1fdeb;
$warning-bg: #fcf7f1;
$danger-bg: #fff5f5;
$body-bg: #E8ECF0;
$body-bg: #e8ecf0;
$text-color: #666;
$text--muted-color: #999;
$text--loud-color: #333;
$borderColor: #E8EBEE;
$borderColor: #e8ebee;
$link-onHover-decoration: none;
$Layout-header-boxShadow: none;
$Layout-aside-width: px2rem(180px);
$Layout-aside-bg: #19233c;
$Layout-brand-bg: #121A2C;
$Layout-brand-bg: #121a2c;
$Layout-brand-color: #fff;
$Layout-asideLink-color: #fff;
$Layout-asideLink-onHover-iconSize: px2rem(16px);
$Layout-asideLink-onHover-iconColor: #42AAFA;
$Layout-asideLink-onHover-iconColor: #42aafa;
$Layout-asideLink-fontSize: px2rem(12px);
$Layout-asideLink-arrowFontSize: px2rem(12px);
$Layout-asideLink-arrowVendor: "iconfont";
$Layout-asideLink-arrowIcon: "\e63b";
$Layout-asideLink-arrowColor: #8D99b0;
$Layout-asideLink-onHover-arrowColor: #FFF;
$Layout-asideLink-arrowColor: #8d99b0;
$Layout-asideLink-onHover-arrowColor: #fff;
$Layout-headerBar-borderBottom: px2rem(1px) solid $body-bg;
$Layout-asideDivider-margin: 0 px2rem(10px);
@ -48,7 +48,6 @@ $Page-content-paddingX: px2rem(20px);
$Page-main-bg: #fff;
$Page-header-paddingY: px2rem(18px);
$Form-item-gap: px2rem(20px);
$Form-input-height: px2rem(30px);
$Form-input-onFocused-bg: #f8fbfe;
@ -81,7 +80,8 @@ $Form-select-caret-icon: "\e605";
$Form-select-caret-iconColor: inherit;
$Form-select-caret-fontSize: px2rem(12px);
$Form-select-outer-borderWidth: 0;
$Form-select-outer-boxShadow: px2rem(2px) px2rem(4px) px2rem(8px) rgba(0, 0, 0, 0.2);
$Form-select-outer-boxShadow: px2rem(2px) px2rem(4px) px2rem(8px)
rgba(0, 0, 0, 0.2);
$Form-select-menu-color: #333;
$InputGroup-select-borderWidth: px2rem(1px);
@ -144,7 +144,7 @@ $DatePicker-toggler-fontSize: px2rem(12px);
$DatePicker-toggler-icon: "\e7b1";
$DatePicker-prevBtn-vendor: "iconfont";
$DatePicker-prevBtn-fontSize: px2rem(14px);
$DatePicker-prevBtn-icon: "\e854" ;
$DatePicker-prevBtn-icon: "\e854";
$DatePicker-nextBtn-vendor: "iconfont";
$DatePicker-nextBtn-fontSize: px2rem(14px);
$DatePicker-nextBtn-icon: "\e63b";
@ -187,7 +187,7 @@ $ButtonGroup-divider-color: #fff;
$Button--link-color: $Button--default-color;
$Button--link-onHover-color: $Button--default-color;
$Spinner-bg: url('./spinner-cxd.svg');
$Spinner-bg: url("./spinner-cxd.svg");
$Crud-toolbar-gap: px2rem(10px);
@ -251,7 +251,7 @@ $Modal-title-color: #333;
$Modal-body-paddingY: px2rem(30px);
$Modal-body-paddingX: px2rem(30px);
$Modal-body-borderTop: none;
$Modal-body-borderBottom: px2rem(1px) solid #ECEFF8;
$Modal-body-borderBottom: px2rem(1px) solid #eceff8;
$Modal-footer-marginX: px2rem(30px);
$Modal-footer-padding: px2rem(15px) 0;
@ -291,7 +291,6 @@ $Tabs-onHover-borderColor: transparent;
$Tabs-onActive-borderBottomColor: $info;
$Tabs-onActive-borderBottomWidth: px2rem(2px);
// Pagination
$Pagination-arrowVendor: "iconfont";
$Pagination-prevArrowContent: "\e759";
@ -323,7 +322,7 @@ $Alert-xs: px2rem(5px);
$Alert-md: px2rem(20px);
$Alert-height: px2rem(30px);
$Alert-fontSize: px2rem(12px) ;
$Alert-fontSize: px2rem(12px);
$Alert-paddingX: $Alert-md;
$Alert-paddingY: $Alert-xs;
$Alert-borderRadius: 0;
@ -341,7 +340,6 @@ $Alert--success-borderColor: $success-bg;
$Alert--warning-color: $warning;
$Alert--warning-borderColor: $warning-bg;
// Toast
$Toast-xs: px2rem(5px);
@ -401,12 +399,12 @@ $TagControl-sugTip-color: $primary;
@import "../layout/aside";
@import "../layout/hbox";
@import "../layout/vbox";
@import"../components/modal";
@import"../components/drawer";
@import "../components/modal";
@import "../components/drawer";
@import "../components/tooltip";
@import "../components/popover";
@import"../components/toast";
@import"../components/alert";
@import "../components/toast";
@import "../components/alert";
@import "../components/tabs";
@import "../components/nav";
@import "../components/page";
@ -420,20 +418,20 @@ $TagControl-sugTip-color: $primary;
@import "../components/button";
@import "../components/button-group";
@import "../components/dropdown";
@import"../components/collapse";
@import"../components/wizard";
@import"../components/crud";
@import"../components/table";
@import"../components/list";
@import"../components/cards";
@import"../components/card";
@import"../components/quick-edit";
@import"../components/popoverable";
@import"../components/copyable";
@import"../components/divider";
@import"../components/pagination";
@import"../components/wrapper";
@import"../components/status";
@import "../components/collapse";
@import "../components/wizard";
@import "../components/crud";
@import "../components/table";
@import "../components/list";
@import "../components/cards";
@import "../components/card";
@import "../components/quick-edit";
@import "../components/popoverable";
@import "../components/copyable";
@import "../components/divider";
@import "../components/pagination";
@import "../components/wrapper";
@import "../components/status";
@import "../components/form/fieldset";
@import "../components/form/group";
@ -468,5 +466,4 @@ $TagControl-sugTip-color: $primary;
@import "../components/form/nested-select";
@import "../components/form/icon-picker";
@import "../utilities";

40
scss/themes/default.scss
View File

@ -1,5 +1,4 @@
$ns: 'a-';
$ns: "a-";
$primary: #7266ba;
$info: #23b7e5;
@ -27,12 +26,12 @@ $Form-input-borderColor: #cfdadd;
@import "../layout/aside";
@import "../layout/hbox";
@import "../layout/vbox";
@import"../components/modal";
@import"../components/drawer";
@import "../components/modal";
@import "../components/drawer";
@import "../components/tooltip";
@import "../components/popover";
@import"../components/toast";
@import"../components/alert";
@import "../components/toast";
@import "../components/alert";
@import "../components/tabs";
@import "../components/nav";
@import "../components/page";
@ -46,20 +45,20 @@ $Form-input-borderColor: #cfdadd;
@import "../components/button";
@import "../components/button-group";
@import "../components/dropdown";
@import"../components/collapse";
@import"../components/wizard";
@import"../components/crud";
@import"../components/table";
@import"../components/list";
@import"../components/cards";
@import"../components/card";
@import"../components/quick-edit";
@import"../components/popoverable";
@import"../components/copyable";
@import"../components/divider";
@import"../components/pagination";
@import"../components/wrapper";
@import"../components/status";
@import "../components/collapse";
@import "../components/wizard";
@import "../components/crud";
@import "../components/table";
@import "../components/list";
@import "../components/cards";
@import "../components/card";
@import "../components/quick-edit";
@import "../components/popoverable";
@import "../components/copyable";
@import "../components/divider";
@import "../components/pagination";
@import "../components/wrapper";
@import "../components/status";
@import "../components/form/fieldset";
@import "../components/form/group";
@ -94,5 +93,4 @@ $Form-input-borderColor: #cfdadd;
@import "../components/form/nested-select";
@import "../components/form/icon-picker";
@import "../utilities";