/// 全局组件注册表映射
/// @type List
/// @access private
$_sim-components: () !default;
// 使用的默认动画曲线
$sim-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 0.1) !default;
$sim-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;
$sim-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;
$sim-ease-in-out-curve-function: cubic-bezier(0.35, 0, 0.25, 1) !default;
$sim-swift-ease-out-duration: 400ms !default;
$sim-swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
$sim-swift-ease-out: all $sim-swift-ease-out-duration $sim-swift-ease-out-timing-function !default;
$sim-swift-ease-in-duration: 300ms !default;
$sim-swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
$sim-swift-ease-in: all $sim-swift-ease-in-duration $sim-swift-ease-in-timing-function !default;
$sim-swift-ease-in-out-duration: 500ms !default;
$sim-swift-ease-in-out-timing-function: $sim-ease-in-out-curve-function !default;
$sim-swift-ease-in-out: all $sim-swift-ease-in-out-duration $sim-swift-ease-in-out-timing-function !default;
$sim-swift-linear-duration: 80ms !default;
$sim-swift-linear-timing-function: linear !default;
$sim-swift-linear: all $sim-swift-linear-duration $sim-swift-linear-timing-function !default;
/// 将组件注册到已知组件列表中
/// @access private
/// @param {String} $name - 要注册的组件名称
@mixin sim-register-component($name) {
$component: map-get($_sim-components, $name);
@if $component == null {
$component: unique-id();
$_sim-components: map-merge($_sim-components, (#{$name}: $component)) !global;
}
}
/// 测试组件或组件列表是否在已知组件列表中。
/// @access private
/// @param {String|List} $excludes - 要检入的组件列表
/// @return {List} - 传递的项的列表
@function sim-is-component($items) {
$register: map-keys($_sim-components);
@each $item in $items {
@if not(index($register, $item)) {
@error unquote('Can\'t exclude "#{$item}" because it is not in the list of known components.');
} @else {
$_sim-components: map-remove($_sim-components, $item);
}
}
@return $items;
}
/// @access private
/// @param {String|List} $theme - 要检入的组件列表
/// @param {String} $id - 要检查的组件id
@mixin sim-check-component-theme($theme, $id) {
@if (map-has-key($_sim-components, $id)) {
@content;
}
}
/// @access private
/// 检查给定值是否解析为主题对象。主题对象始终是类型为“map”，
/// 可以选择只指定“color”、“density”或“typography”。
@function _sim-is-theme-object($value) {
@return type-of($value) == 'map' and
(map_has_key($value, color) or map_has_key($value, density) or map_has_key($value, typography) or length($value) == 0);
}
/// 从给定的主题或配置中获取颜色配置
@function sim-get-color-config($theme, $default: null) {
// 如果已经传递了配置，则直接返回配置
@if not _sim-is-theme-object($theme) {
@return $theme;
}
// 如果主题已经通过，如果存在，提取配置，或者退回到默认的颜色配置
@if map_has_key($theme, color) {
@return map_get($theme, color);
}
@return $default;
}
/// 从给定的主题或配置中获取密度配置
@function sim-get-density-config($theme-or-config, $default: 0) {
// 如果已经传递了配置，则直接返回配置
@if not _sim-is-theme-object($theme-or-config) {
@return $theme-or-config;
}
// 如果主题已经通过，如果存在，提取配置，或者退回到默认的密度配置
@if map_has_key($theme-or-config, density) {
@return map_get($theme-or-config, density);
}
@return $default;
}
/// 从给定的主题或配置中获取排版配置
@function sim-get-typography-config($theme-or-config, $default: null) {
// 如果已经传递了配置，则直接返回配置。
@if not _sim-is-theme-object($theme-or-config) {
@return $theme-or-config;
}
// 如果主题已经通过，如果存在，则提取配置，或者返回到默认的排版配置。
@if (map_has_key($theme-or-config, typography)) {
@return map_get($theme-or-config, typography);
}
@return $default;
}
/// Converts pixels to relative values (em).
/// @access public
/// @param {number|string} $pixels - The pixel value to be converted.
/// @param {number|string} $context [$browser-context] - The base context to convert against.
@function sim-em($pixels, $context: $browser-context) {
@if (unitless($pixels)) {
$pixels: $pixels * 1px;
}
@if (unitless($context)) {
$context: $context * 1px;
}
@return ($pixels / $context) * 1em;
}
/// Pixels to root relative values (rem).
/// @access public
/// @param {number|string} $pixels - The pixel value to be converted.
/// @param {number|string} $context [$browser-context] - The base context to convert against.
@function sim-rem($pixels, $context: $browser-context) {
@if (unitless($pixels)) {
$pixels: $pixels * 1px;
}
@if (unitless($context)) {
$context: $context * 1px;
}
@return ($pixels / $context) * 1rem;
}
/// Relative value(em/rem) to pixel.
/// @access public
/// @param {number|string} $num - The relative value to be converted.
/// @param {number|string} $context [$browser-context] - The base context to convert against.
@function sim-px($num, $context: $browser-context) {
@if type-of $num == 'number' {
@return ($num / ($num * 0 + 1)) * 16px;
}
@return $num;
}
// 这个混合确保一个元素跨越用定义的定位填充最近的祖先元素
@mixin sim-fill {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
@mixin sim-optionally-nest-content() {
@at-root {
$selector-context: #{&};
@if ($selector-context == '') {
@content;
} @else {
#{$selector-context} {
@content;
}
}
}
}
// 确保溢出容器的行将隐藏溢出并使用省略号整齐地截断。
@mixin sim-truncate-line() {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* stylelint-disable property-no-vendor-prefix,selector-no-vendor-prefix,value-no-vendor-prefix */
@mixin sim-user-select($value) {
-webkit-user-select: $value;
-moz-user-select: $value;
-ms-user-select: $value;
user-select: $value;
}
@mixin sim-input-placeholder {
&::placeholder {
@content;
}
&::-moz-placeholder {
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
opacity: 1;
@content;
}
&::-webkit-input-placeholder {
@content;
}
&:-ms-input-placeholder {
-ms-user-select: text;
@content;
}
&:placeholder-shown {
text-overflow: ellipsis;
}
}
@mixin sim-cursor-grab {
cursor: -webkit-grab;
cursor: grab;
}
@mixin sim-cursor-grabbing {
cursor: -webkit-grabbing;
cursor: grabbing;
}
@mixin sim-backface-visibility($value) {
-webkit-backface-visibility: $value;
backface-visibility: $value;
}
/* stylelint-enable */
// 用于从排版配置中获取嵌套值的实用程序.
@function _sim-get-type-value($config, $level, $name) {
@return map-get(map-get($config, $level), $name);
}
// 获取排版配置中某个级别的字体大小
@function sim-font-size($config, $level) {
@return _sim-get-type-value($config, $level, font-size);
}
// 获取排版配置内某个级别的行高
@function sim-line-height($config, $level) {
@return _sim-get-type-value($config, $level, line-height);
}
// 获取排版配置内某个级别的字体权重
@function sim-font-weight($config, $level) {
@return _sim-get-type-value($config, $level, font-weight);
}
// 获取排版配置内某个级别的字间距
@function sim-letter-spacing($config, $level) {
@return _sim-get-type-value($config, $level, letter-spacing);
}
// 从排版配置中获取字体族并删除围绕它的引号
@function sim-font-family($config, $level: null) {
$font-family: map-get($config, font-family);
@if $level != null {
$font-family: _sim-get-type-value($config, $level, font-family);
}
// 防止不引用非字符串值，因为它是不赞成的
@return if(type-of($font-family) == string, unquote($font-family), $font-family);
}
// 根据一组排版值输出font属性简写。如果传入了简写中不允许的值，则返回到各个属性。
@mixin sim-typography-font-shorthand($font-size, $font-weight, $line-height, $font-family) {
// 如果任何一个值被设置为“inherit”，那么我们就不能使用简写，所以只能返回到传递单个属性
@if (
$font-weight ==
inherit or
$font-weight ==
null or
$font-size ==
inherit or
$font-size ==
null or
$line-height ==
inherit or
$font-family ==
inherit or
$line-height ==
null or
$font-family ==
null
) {
font-weight: $font-weight;
font-size: $font-size;
font-family: $font-family;
line-height: $line-height;
} @else {
// 否则使用缩写“字体”，因为它的字节数最少。
// 请注意，我们需要对‘font-size/line-height’使用插值表达式，以防止Sass分割两个值。
font: $font-weight #{$font-size}/#{$line-height} $font-family;
}
}
// 将排版级别转换为CSS样式。
@mixin sim-typography-level-to-styles($config, $level) {
$font-size: sim-font-size($config, $level);
$font-weight: sim-font-weight($config, $level);
$line-height: sim-line-height($config, $level);
$font-family: sim-font-family($config, $level);
@include sim-typography-font-shorthand($font-size, $font-weight, $line-height, $font-family);
letter-spacing: sim-letter-spacing($config, $level);
}
// 默认字体
$sim-font-family: -apple-system, 'Blinkmacsystemfont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
// 默认代码字体
$sim-code-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace;
// 表示来自设计规范的排版级别
@function sim-typography-level($font-size, $line-height: $font-size, $font-weight: 400, $font-family: null, $letter-spacing: null) {
@return (
font-size: $font-size,
line-height: $line-height,
font-weight: $font-weight,
font-family: $font-family,
letter-spacing: $letter-spacing
);
}
// 表示版式层次的集合
// 注意:规范中没有提到字母间距
// 行高必须是字体大小的无单元部分
@function sim-typography-config(
$font-family: $sim-font-family,
$display4: sim-typography-level(56px, 1.14, 300, $letter-spacing: -0.05em),
$display3: sim-typography-level(46px, 1.17, 400, $letter-spacing: -0.02em),
$display2: sim-typography-level(38px, 1.21, 400, $letter-spacing: -0.005em),
$display1: sim-typography-level(30px, 1.26, 400),
$headline: sim-typography-level(24px, 1.33, 400),
$title: sim-typography-level(20px, 1.4, 500),
$subheading: sim-typography-level(16px, 1.5, 400),
$subtitle: sim-typography-level(14px, 1.57, 400),
$body2: sim-typography-level(14px, 1.57, 500),
$body1: sim-typography-level(14px, 1.57, 400),
$button: sim-typography-level(14px, 1.57, 500),
$caption: sim-typography-level(12px, 1.125, 400),
$overline: sim-typography-level(inherit, 1.125, 400)
) {
$config: (
display4: $display4,
display3: $display3,
display2: $display2,
display1: $display1,
headline: $headline,
title: $title,
subheading: $subheading,
subtitle: $subtitle,
body2: $body2,
body1: $body1,
button: $button,
caption: $caption,
overline: $overline
);
// 循环遍历所有级别，并将没有字体的字体家族设置为基础。
// 请注意，Sass不能修改现有的映射，这意味着我们需要合并和重新分配
@each $key, $level in $config {
@if map-get($level, font-family) == null {
$new-level: map-merge(
$level,
(
font-family: $font-family
)
);
$config: map-merge(
$config,
(
$key: $new-level
)
);
}
}
// 将基本字体系列添加到配置中
@return map-merge(
$config,
(
font-family: $font-family
)
);
}
// 根据配置添加基本的字体样式
@mixin sim-base-typography($config, $selector: '.sim-typography') {
.sim-h1,
.sim-headline,
#{$selector} h1 {
@include sim-typography-level-to-styles($config, headline);
margin: 0 0 16px;
}
.sim-h2,
.sim-title,
#{$selector} h2 {
@include sim-typography-level-to-styles($config, title);
margin: 0 0 16px;
}
.sim-h3,
.sim-subheading,
#{$selector} h3 {
@include sim-typography-level-to-styles($config, subheading);
margin: 0 0 16px;
}
.sim-h4,
.sim-subtitle,
#{$selector} h4 {
@include sim-typography-level-to-styles($config, subtitle);
margin: 0 0 16px;
}
// 注意：规范中没有与h5和h6相对应的任何内容，但是为了保持一致性，我们添加了这些内容。
// 字体大小来自Chrome用户代理样式，h5为0.83em，h6为0.67em。
.sim-h5,
#{$selector} h5 {
@include sim-typography-font-shorthand(
// 这里使用calc来支持css变量
calc(#{sim-font-size($config, body1)} * 0.83),
sim-font-weight($config, body1),
sim-line-height($config, body1),
sim-font-family($config, body1)
);
margin: 0 0 12px;
}
.sim-h6,
#{$selector} h6 {
@include sim-typography-font-shorthand(
// 这里使用calc来支持css变量
calc(#{sim-font-size($config, body1)} * 0.67),
sim-font-weight($config, body1),
sim-line-height($config, body1),
sim-font-family($config, body1)
);
margin: 0 0 12px;
}
.sim-body-strong,
.sim-body2 {
@include sim-typography-level-to-styles($config, body2);
}
.sim-body,
.sim-body1,
#{$selector} {
@include sim-typography-level-to-styles($config, body1);
p {
margin: 0 0 12px;
}
}
.sim-small,
.sim-caption {
@include sim-typography-level-to-styles($config, caption);
}
.sim-overline {
@include sim-typography-level-to-styles($config, overline);
}
.sim-display4,
#{$selector} .sim-display4 {
@include sim-typography-level-to-styles($config, display4);
margin: 0 0 56px;
}
.sim-display3,
#{$selector} .sim-display3 {
@include sim-typography-level-to-styles($config, display3);
margin: 0 0 64px;
}
.sim-display2,
#{$selector} .sim-display2 {
@include sim-typography-level-to-styles($config, display2);
margin: 0 0 64px;
}
.sim-display1,
#{$selector} .sim-display1 {
@include sim-typography-level-to-styles($config, display1);
margin: 0 0 64px;
}
}
$_sim-density-interval: 4px !default;
$_sim-density-minimum-scale: minimum !default;
$_sim-density-maximum-scale: maximum !default;
$_sim-density-supported-scales: (default, minimum, maximum) !default;
$_sim-density-default-scale: 0 !default;
$_sim-density-supported-special: special !default;
/// @param {Map} $density-config - 组分的密度配置
/// @param {String|Number} $density-scale - 组件的密度标度值。例如:' -3 '，' 0 '或' minimum '
/// @param {String} $property-name - 组件的密度目标属性名称
/// @returns {String} 返回基于给定密度配置和密度比例的组件属性值
@function sim-density-prop-value($density-config, $density-scale: default, $property-name) {
/// 优先获取特殊密度配置
$special: _sim-get-density-scale-special($density-config, $property-name);
/// 验证标度值如果是字符串，那么和预设支持的标度值进行匹配，如果不匹配，直接抛出异常。
@if (
type-of($density-scale) ==
'string' and
(($special == null) and (index($list: $_sim-density-supported-scales, $value: $density-scale) == null))
) {
@error 'sim-density: Supported density scales #{$_sim-density-supported-scales}, but received #{$density-scale}.';
}
/// 如果有特殊密度配置 直接返回对应的密度值
@if ($special != null) {
@if not map-has-key($special, $density-scale) {
@error 'sim-density: Supported density scales #{map-keys($special)}, but received #{$density-scale}.';
}
@return map-get($special, $density-scale);
}
$value: null;
/// 根据对应的目标属性名称获取，对应的密度配置值
$property-scale-map: map-get($density-config, $property-name);
/// 如果取不到属性值，直接抛出异常
@if ($property-scale-map == null) {
@error 'sim-density: Supported density properties #{map-keys($density-config)}, but received #{$property-name}.';
}
@if map-has-key($property-scale-map, $density-scale) {
$value: map-get($property-scale-map, $density-scale);
}
/* prettier-ignore */
@else {
$value: map-get($property-scale-map, default) + $density-scale * $_sim-density-interval;
}
$min-value: map-get($property-scale-map, $_sim-density-minimum-scale);
$max-value: map-get($property-scale-map, $_sim-density-maximum-scale);
@if ($value < $min-value or $value > $max-value) {
@error 'sim-density: #{$property-name} must be between #{$min-value} and ' +
'#{$max-value} (inclusive), but received #{$value}.';
}
@return $value;
}
@function sim-is-density-scale-object($value) {
@debug (map-get($value, special)) or
(map-has-key($value, default) and map-has-key($value, minimum) and map-has-key($value, maximum) and length($value) >= 3);
@return type-of($value) == 'map' and
(
(map-get($value, special)) or
(map-has-key($value, default) and map-has-key($value, minimum) and map-has-key($value, maximum) and length($value) >= 3)
);
}
/// @access private
@function _sim-get-density-scale-special($object, $name) {
$value: map-get($object, $name);
@if ($value == null) {
@return null;
}
@if (map-has-key($value, $_sim-density-supported-special)) {
@return $value;
}
@return null;
}
/// 自定义显示密度
/// @param {String} $name - 要注册的组件名称
@function sim-density-config($density-config: null) {
@if $density-config == null {
@return $sim-density-cosy;
}
$density-properties: map-keys($sim-density-cosy);
@each $name in $density-properties {
/// 如果取不到属性值，直接抛出异常
@if (map-get($density-config, $name) == null) {
@error 'sim-density: Supported density properties #{$density-properties}, but the lack of #{$name}.';
}
}
// 验证自定义设置是否符合标准 density-supported-scales：(default, minimum, maximum)
@each $name, $value in $density-config {
@if not sim-is-density-scale-object($value) {
@error 'sim-density: Supported density scales (default, minimum, maximum), But #{$name} is not legit.';
}
}
@return $density-config;
}
$sim-dark-primary-text: rgba(black, 0.87);
$sim-dark-secondary-text: rgba(black, 0.54);
$sim-dark-disabled-text: rgba(black, 0.38);
$sim-dark-dividers: rgba(black, 0.12);
$sim-dark-focused: rgba(black, 0.12);
$sim-light-primary-text: white;
$sim-light-secondary-text: rgba(white, 0.7);
$sim-light-disabled-text: rgba(white, 0.5);
$sim-light-dividers: rgba(white, 0.12);
$sim-light-focused: rgba(white, 0.12);
/// 灰度调色板
$sim-palette-greys: (
50: #fafafa,
100: #f5f5f5,
200: #eee,
300: #e0e0e0,
400: #bdbdbd,
500: #9e9e9e,
600: #757575,
700: #616161,
800: #424242,
900: #212121,
A100: #fff,
A200: #eee,
A400: #bdbdbd,
A700: #616161,
contrast: (
50: $sim-dark-primary-text,
100: $sim-dark-primary-text,
200: $sim-dark-primary-text,
300: $sim-dark-primary-text,
400: $sim-dark-primary-text,
500: $sim-dark-primary-text,
600: $sim-light-primary-text,
700: $sim-light-primary-text,
800: $sim-light-primary-text,
900: $sim-light-primary-text,
A100: $sim-dark-primary-text,
A200: $sim-dark-primary-text,
A400: $sim-dark-primary-text,
A700: $sim-light-primary-text
)
);
/// 主色调色板
$sim-palette-primary: (
50: #e8eaf6,
100: #c5cae9,
200: #9fa8da,
300: #7986cb,
400: #5c6bc0,
500: #3f51b5,
600: #3949ab,
700: #303f9f,
800: #283593,
900: #1a237e,
A100: #8c9eff,
A200: #536dfe,
A400: #3d5afe,
A700: #304ffe,
contrast: (
50: $sim-dark-primary-text,
100: $sim-dark-primary-text,
200: $sim-dark-primary-text,
300: $sim-light-primary-text,
400: $sim-light-primary-text,
500: $sim-light-primary-text,
600: $sim-light-primary-text,
700: $sim-light-primary-text,
800: $sim-light-primary-text,
900: $sim-light-primary-text,
A100: $sim-dark-primary-text,
A200: $sim-light-primary-text,
A400: $sim-light-primary-text,
A700: $sim-light-primary-text
)
);
/// 辅色调色板
$sim-palette-secondary: (
50: #fce4ec,
100: #f8bbd0,
200: #f48fb1,
300: #f06292,
400: #ec407a,
500: #e91e63,
600: #d81b60,
700: #c2185b,
800: #ad1457,
900: #880e4f,
A100: #ff80ab,
A200: #ff4081,
A400: #f50057,
A700: #c51162,
contrast: (
50: $sim-dark-primary-text,
100: $sim-dark-primary-text,
200: $sim-dark-primary-text,
300: $sim-dark-primary-text,
400: $sim-dark-primary-text,
500: $sim-light-primary-text,
600: $sim-light-primary-text,
700: $sim-light-primary-text,
800: $sim-light-primary-text,
900: $sim-light-primary-text,
A100: $sim-dark-primary-text,
A200: $sim-light-primary-text,
A400: $sim-light-primary-text,
A700: $sim-light-primary-text
)
);
$sim-palette-info: (
50: #e3f2fd,
100: #bbdefb,
200: #90caf9,
300: #64b5f6,
400: #42a5f5,
500: #2196f3,
600: #1e88e5,
700: #1976d2,
800: #1565c0,
900: #0d47a1,
A100: #82b1ff,
A200: #448aff,
A400: #2979ff,
A700: #2962ff,
contrast: (
50: $sim-dark-primary-text,
100: $sim-dark-primary-text,
200: $sim-dark-primary-text,
300: $sim-dark-primary-text,
400: $sim-dark-primary-text,
500: $sim-light-primary-text,
600: $sim-light-primary-text,
700: $sim-light-primary-text,
800: $sim-light-primary-text,
900: $sim-light-primary-text,
A100: $sim-dark-primary-text,
A200: $sim-light-primary-text,
A400: $sim-light-primary-text,
A700: $sim-light-primary-text
)
);
$sim-palette-danger: (
50: #ffebee,
100: #ffcdd2,
200: #ef9a9a,
300: #e57373,
400: #ef5350,
500: #f44336,
600: #e53935,
700: #d32f2f,
800: #c62828,
900: #b71c1c,
A100: #ff8a80,
A200: #ff5252,
A400: #ff1744,
A700: #d50000,
contrast: (
50: $sim-dark-primary-text,
100: $sim-dark-primary-text,
200: $sim-dark-primary-text,
300: $sim-dark-primary-text,
400: $sim-dark-primary-text,
500: $sim-light-primary-text,
600: $sim-light-primary-text,
700: $sim-light-primary-text,
800: $sim-light-primary-text,
900: $sim-light-primary-text,
A100: $sim-dark-primary-text,
A200: $sim-light-primary-text,
A400: $sim-light-primary-text,
A700: $sim-light-primary-text
)
);
$sim-palette-success: (
50: #e8f5e9,
100: #c8e6c9,
200: #a5d6a7,
300: #81c784,
400: #66bb6a,
500: #4caf50,
600: #43a047,
700: #388e3c,
800: #2e7d32,
900: #1b5e20,
A100: #b9f6ca,
A200: #69f0ae,
A400: #00e676,
A700: #00c853,
contrast: (
50: $sim-dark-primary-text,
100: $sim-dark-primary-text,
200: $sim-dark-primary-text,
300: $sim-dark-primary-text,
400: $sim-dark-primary-text,
500: $sim-dark-primary-text,
600: $sim-light-primary-text,
700: $sim-light-primary-text,
800: $sim-light-primary-text,
900: $sim-light-primary-text,
A100: $sim-dark-primary-text,
A200: $sim-dark-primary-text,
A400: $sim-dark-primary-text,
A700: $sim-dark-primary-text
)
);
$sim-palette-warning: (
50: #fff3e0,
100: #ffe0b2,
200: #ffcc80,
300: #ffb74d,
400: #ffa726,
500: #ff9800,
600: #fb8c00,
700: #f57c00,
800: #ef6c00,
900: #e65100,
A100: #ffd180,
A200: #ffab40,
A400: #ff9100,
A700: #ff6d00,
contrast: (
50: $sim-dark-primary-text,
100: $sim-dark-primary-text,
200: $sim-dark-primary-text,
300: $sim-dark-primary-text,
400: $sim-dark-primary-text,
500: $sim-dark-primary-text,
600: $sim-dark-primary-text,
700: $sim-dark-primary-text,
800: $sim-light-primary-text,
900: $sim-light-primary-text,
A100: $sim-dark-primary-text,
A200: $sim-dark-primary-text,
A400: $sim-dark-primary-text,
A700: black
)
);
// 高亮主题的背景调色板
$sim-light-theme-background: (
status-bar: map_get($sim-palette-greys, 300),
app-bar: map_get($sim-palette-greys, 100),
background: map_get($sim-palette-greys, 50),
disabled-background: #f5f5f5,
hover: rgba(black, 0.04),
active: rgba(black, 0.1),
dialog: white,
card: white,
disabled-button: rgba(black, 0.12),
raised-button: white,
focused-button: $sim-dark-focused,
selected-button: map_get($sim-palette-greys, 300),
selected-disabled-button: map_get($sim-palette-greys, 400),
disabled-button-toggle: map_get($sim-palette-greys, 200),
unselected-chip: map_get($sim-palette-greys, 300),
disabled-list-option: map_get($sim-palette-greys, 200),
list-option-group: white,
tooltip: rgba(black, 0.78)
);
// 高亮主题的前景调色板
$sim-light-theme-foreground: (
base: black,
divider: $sim-dark-dividers,
disabled: $sim-dark-disabled-text,
disabled-button: rgba(black, 0.26),
disabled-text: $sim-dark-disabled-text,
elevation: black,
hint-text: $sim-dark-disabled-text,
secondary-text: $sim-dark-secondary-text,
icon: $sim-dark-secondary-text,
text: $sim-dark-primary-text,
slider-min: rgba(black, 0.87),
slider-off: rgba(black, 0.26),
slider-off-active: rgba(black, 0.38)
);
// 黑暗主题的背景调色板
$sim-dark-theme-background: (
status-bar: black,
app-bar: map_get($sim-palette-greys, 900),
background: #303030,
disabled-background: #f5f5f5,
hover: rgba(white, 0.3),
active: rgba(white, 0.4),
dialog: map_get($sim-palette-greys, 800),
card: map_get($sim-palette-greys, 800),
disabled-button: rgba(white, 0.12),
raised-button: map-get($sim-palette-greys, 800),
focused-button: $sim-light-focused,
selected-button: map_get($sim-palette-greys, 900),
selected-disabled-button: map_get($sim-palette-greys, 800),
disabled-button-toggle: black,
unselected-chip: map_get($sim-palette-greys, 700),
disabled-list-option: black,
list-option-group: black,
tooltip: rgba(white, 0.78)
);
// 黑暗主题的前景调色板
$sim-dark-theme-foreground: (
base: white,
divider: $sim-light-dividers,
disabled: $sim-light-disabled-text,
disabled-button: rgba(white, 0.3),
disabled-text: $sim-light-disabled-text,
elevation: white,
secondary-text: $sim-light-secondary-text,
icon: white,
text: white,
slider-min: white,
slider-off: rgba(white, 0.3),
slider-off-active: rgba(white, 0.4)
);
/// This lookup table is needed since there is no `pow` in SASS.
/// Pre-computed linear color channel values, for use in contrast calculations.
/// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
///
/// @example javascript - Algorithm, for c in 0 to 255:
/// f(c) {
/// c = c / 255;
/// return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
/// }
///
/// @type List
$_sim-linear-channel-values: 0 0.0003035269835488375 0.000607053967097675 0.0009105809506465125 0.00121410793419535 0.0015176349177441874
0.001821161901293025 0.0021246888848418626 0.0024282158683907 0.0027317428519395373 0.003035269835488375 0.003346535763899161
0.003676507324047436 0.004024717018496307 0.004391442037410293 0.004776953480693729 0.005181516702338386 0.005605391624202723
0.006048833022857054 0.006512090792594475 0.006995410187265387 0.007499032043226175 0.008023192985384994 0.008568125618069307
0.009134058702220787 0.00972121732023785 0.010329823029626936 0.010960094006488246 0.011612245179743885 0.012286488356915872
0.012983032342173012 0.013702083047289686 0.014443843596092545 0.01520851442291271 0.01599629336550963 0.016807375752887384
0.017641954488384078 0.018500220128379697 0.019382360956935723 0.0202885630566524 0.021219010376003555 0.022173884793387385
0.02315336617811041 0.024157632448504756 0.02518685962736163 0.026241221894849898 0.027320891639074894 0.028426039504420793
0.0295568344378088 0.030713443732993635 0.03189603307301153 0.033104766570885055 0.03433980680868217 0.03560131487502034
0.03688945040110004 0.0382043715953465 0.03954623527673284 0.04091519690685319 0.042311410620809675 0.043735029256973465
0.04518620438567554 0.046665086336880095 0.04817182422688942 0.04970656598412723 0.05126945837404324 0.052860647023180246
0.05448027644244237 0.05612849004960009 0.05780543019106723 0.0595112381629812 0.06124605423161761 0.06301001765316767 0.06480326669290577
0.06662593864377289 0.06847816984440017 0.07036009569659588 0.07227185068231748 0.07421356838014963 0.07618538148130785
0.07818742180518633 0.08021982031446832 0.0822827071298148 0.08437621154414882 0.08650046203654976 0.08865558628577294 0.09084171118340768
0.09305896284668745 0.0953074666309647 0.09758734714186246 0.09989872824711389 0.10224173308810132 0.10461648409110419 0.10702310297826761
0.10946171077829933 0.1119324278369056 0.11443537382697373 0.11697066775851084 0.11953842798834562 0.12213877222960187 0.12477181756095049
0.12743768043564743 0.1301364766903643 0.13286832155381798 0.13563332965520566 0.13843161503245183 0.14126329114027164 0.14412847085805777
0.14702726649759498 0.14995978981060856 0.15292615199615017 0.1559264637078274 0.1589608350608804 0.162029375639111 0.1651321945016676
0.16826940018969075 0.1714411007328226 0.17464740365558504 0.17788841598362912 0.18116424424986022 0.184474994500441 0.18782077230067787
0.19120168274079138 0.1946178304415758 0.19806931955994886 0.20155625379439707 0.20507873639031693 0.20863687014525575 0.21223075741405523
0.21586050011389926 0.2195261997292692 0.2232279573168085 0.22696587351009836 0.23074004852434915 0.23455058216100522 0.238397573812271
0.24228112246555486 0.24620132670783548 0.25015828472995344 0.25415209433082675 0.2581828529215958 0.26225065752969623 0.26635560480286247
0.2704977910130658 0.27467731206038465 0.2788942634768104 0.2831487404299921 0.2874408377269175 0.29177064981753587 0.2961382707983211
0.3005437944157765 0.3049873140698863 0.30946892281750854 0.31398871337571754 0.31854677812509186 0.32314320911295075 0.3277780980565422
0.33245153634617935 0.33716361504833037 0.3419144249086609 0.3467040563550296 0.35153259950043936 0.3564001441459435 0.3613067797835095
0.3662525955988395 0.3712376804741491 0.3762621229909065 0.38132601143253014 0.386429433787049 0.39157247774972326 0.39675523072562685
0.4019777798321958 0.4072402119017367 0.41254261348390375 0.4178850708481375 0.4232676699860717 0.4286904966139066 0.43415363617474895
0.4396571738409188 0.44520119451622786 0.45078578283822346 0.45641102318040466 0.4620769996544071 0.467783796112159 0.47353149614800955
0.4793201831008268 0.4851499400560704 0.4910208498478356 0.4969329950608704 0.5028864580325687 0.5088813208549338 0.5149176653765214
0.5209955732043543 0.5271151257058131 0.5332764040105052 0.5394794890121072 0.5457244613701866 0.5520114015120001 0.5583403896342679
0.5647115057049292 0.5711248294648731 0.5775804404296506 0.5840784178911641 0.5906188409193369 0.5972017883637634 0.6038273388553378
0.6104955708078648 0.6172065624196511 0.6239603916750761 0.6307571363461468 0.6375968739940326 0.6444796819705821 0.6514056374198242
0.6583748172794485 0.665387298282272 0.6724431569576875 0.6795424696330938 0.6866853124353135 0.6938717612919899 0.7011018919329731
0.7083757798916868 0.7156935005064807 0.7230551289219693 0.7304607400903537 0.7379104087727308 0.7454042095403874 0.7529422167760779
0.7605245046752924 0.768151147247507 0.7758222183174236 0.7835377915261935 0.7912979403326302 0.799102738014409 0.8069522576692516
0.8148465722161012 0.8227857543962835 0.8307698767746546 0.83879901174074 0.846873231509858 0.8549926081242338 0.8631572134541023
0.8713671191987972 0.8796223968878317 0.8879231178819663 0.8962693533742664 0.9046611743911496 0.9130986517934192 0.9215818562772946
0.9301108583754237 0.938685728457888 0.9473065367331999 0.9559733532492861 0.9646862478944651 0.9734452903984125 0.9822505503331171
0.9911020971138298 1;
/// 计算给定颜色的亮度
/// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests.
///
/// @param {Color} $color - The color to calculate luminance for.
@function _sim-gen-luminance($color) {
@if type-of($color) == 'color' {
$red: nth($_sim-linear-channel-values, red($color) + 1);
$green: nth($_sim-linear-channel-values, green($color) + 1);
$blue: nth($_sim-linear-channel-values, blue($color) + 1);
@return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
}
@return $color;
}
/// 算两种颜色之间的对比度
/// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
///
/// @param {Color} $background - The background color.
/// @param {Color} $foreground - The foreground color.
/// @returns {Number} - The contrast ratio between the background and foreground colors.
@function _sim-gen-contrast($background, $foreground) {
$backLum: _sim-gen-luminance($background) + 0.05;
$foreLum: _sim-gen-luminance($foreground) + 0.05;
@return max($backLum, $foreLum) / min($backLum, $foreLum);
}
/// 生成一个颜色阴影从基本颜色和饱和度等级
/// @access private
/// @group Palettes
/// @param {Color} $color - 用于生成色度的基本色
/// @param {number|string} $saturation - 用于创建颜色阴影的饱和等级
@function _sim-gen-color($color, $saturation) {
@if ($saturation == 50) {
@return lighten(saturate($color, 10.4), 37.7);
} @else if ($saturation == 100) {
@return lighten(desaturate($color, 10.4), 31.8);
} @else if ($saturation == 200) {
@return lighten(desaturate($color, 17), 18.7);
} @else if ($saturation == 300) {
@return lighten(desaturate($color, 12.9), 9.1);
} @else if ($saturation == 400) {
@return lighten(desaturate($color, 6.6), 4.1);
} @else if ($saturation == 500) {
@return $color;
} @else if ($saturation == 600) {
@return darken(saturate($color, 12.4), 5.1);
} @else if ($saturation == 700) {
@return darken(saturate($color, 24.5), 8.8);
} @else if ($saturation == 800) {
@return darken(saturate($color, 23.2), 12.7);
} @else if ($saturation == 900) {
@return darken(saturate($color, 16.1), 17);
} @else if ($saturation == 'A100') {
@return lighten(saturate($color, 10.4), 16.7);
} @else if ($saturation == 'A200') {
@return lighten(saturate($color, 10.4), 7.7);
} @else if ($saturation == 'A400') {
@return darken(saturate($color, 10.4), 3.9);
} @else if ($saturation == 'A700') {
@return darken(saturate($color, 10.4), 16.6);
}
}
/// 为传递的颜色返回一个对比色
/// @group Palettes
/// @param {Color} $background - 用于返回对比/底色的背景色
/// @param {Color} $foreground - 前景色在与背景有足够对比的情况下使用
/// @param {String} $contrast - The contrast level according to WCAG 2.0 standards.
/// @returns {Color} - Returns either white or black depending on the luminance of the input color.
/// @link https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
@function _sim-gen-text-contrast($background, $foreground: white, $contrast: 'AAA') {
@if type-of($foreground) == 'color' and type-of($background) == 'color' {
$level: map-get(
(
'A': 3,
'AA': 4.5,
'AAA': 7
),
$contrast
);
@if $level == null {
@error "$contrast must be 'A', 'AA', or 'AAA'";
}
@if _sim-gen-contrast($background, $foreground) >= $level {
@return $foreground;
} @else {
$lightContrast: _sim-gen-contrast($background, white);
$darkContrast: _sim-gen-contrast($background, black);
@if ($lightContrast > $darkContrast) {
@return white;
} @else {
@return rgba(black, 0.87);
}
}
} @else {
@error 'Expected color for $background/$foreground but got #{$background}/#{$foreground}';
}
}
// 为主题创建色调到颜色的映射。这是用来定义一个主题调色板的设计色调
// @param $color-map
// @param $primary
/// @param $lighter
@function sim-palette($base-palette, $default: 500, $lighter: 100, $darker: 700, $text: $default) {
$result: $base-palette;
$contrast: map-get($base-palette, contrast);
// 对于调色板中的每个色相，向map添加一个“对比度”颜色
@each $hue, $color in $base-palette {
@if $hue != contrast {
@if map-has-key($result, '#{$hue}-contrast') == false {
$result: map_merge(
$result,
(
'#{$hue}-contrast': map-get($contrast, $hue)
)
);
}
}
}
@return map-merge(
$result,
(
default: map-get($base-palette, $default),
lighter: map-get($base-palette, $lighter),
darker: map-get($base-palette, $darker),
text: map-get($base-palette, $text),
default-contrast: map-get($contrast, $darker),
lighter-contrast: map-get($contrast, $lighter),
darker-contrast: map-get($contrast, $darker)
)
);
}
/// 为单一颜色生成类似于材料的调色板
/// @access private
/// @group Palettes
/// @requires {function} sim-gen-color
/// @param {Color} $color - 用于生成调色板的基本颜色
/// @param {Boolean} $debug - 用于调试生成调色板
/// @returns {Map} - 由26种颜色变化组成的地图
@function sim-generate-palette($color, $debug: false) {
$saturations: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 'A100', 'A200', 'A400', 'A700');
$results: ();
$contrasts: ();
@each $saturation in $saturations {
$shade: _sim-gen-color($color, $saturation);
$results: map-merge(
$results,
(
$saturation: $shade
)
);
$contrast: _sim-gen-text-contrast($shade);
$contrasts: map-merge(
$contrasts,
(
$saturation: $contrast
)
);
}
$results: map-merge(
$results,
(
contrast: $contrasts
)
);
@if ($debug == true) {
@debug 'Customize Colors Generate Palette：';
@debug $results;
@return null;
}
@return sim-palette($results);
}
// 从主题调色板(sim-palette的输出)获取颜色。色相可以是标准值之一(500,A400，等等)，四个预先配置的色相之一(default，lighter，darker， text)，或者任何前面提到的“-contrast”前缀（text除外）。
//
// @param $color-map 主题调色板(sim-palette的输出)
// @param $hue 从调色板的色相来使用。如果这个值在0和1之间，它将被视为不透明度。
// @param $opacity 颜色的alpha通道值
@function sim-color($palette, $hue: default, $opacity: null) {
// 如果hueKey是一个介于0和1之间的数字，那么它实际上包含一个不透明度值，因此回想一下这个函数的默认色调和给定的不透明度。
@if type-of($hue) == number and $hue >= 0 and $hue <= 1 {
@return sim-color($palette, default, $hue);
}
$color: map-get($palette, $hue);
@if (type-of($color) != color) {
// 如果$color被解析成不同于颜色的东西(例如CSS变量)，我们就不能应用不透明度，所以我们就返回原来的值，否则Sass会抛出一个错误或输出一些无效的东西。
@return $color;
}
@return rgba($color, if($opacity == null, opacity($color), $opacity));
}
// 创建一个容器对象，该对象用于将高亮主题指定给各个组件主题混合
@function sim-light-theme(
$primary,
$secondary,
$danger: #ef0f30,
$info: #3591fe,
$success: #59c520,
$warning: #f6ac1e,
$grays: sim-palette($sim-palette-greys),
$foreground: $sim-light-theme-foreground,
$background: $sim-light-theme-background
) {
$info-palette: _sim-get-config-palette($info, null, $sim-palette-info);
$success-palette: _sim-get-config-palette($success, null, $sim-palette-success);
$warning-palette: _sim-get-config-palette($warning, null, $sim-palette-warning);
$danger-palette: _sim-get-config-palette($danger, null, $sim-palette-danger);
$grays-palette: _sim-get-config-palette($grays, null, $sim-palette-greys);
$foreground-palette: _sim-get-config-palette($foreground, foreground, $sim-light-theme-foreground);
$background-palette: _sim-get-config-palette($background, background, $sim-light-theme-background);
@return (
primary: $primary,
secondary: $secondary,
info: $info-palette,
success: $success-palette,
warning: $warning-palette,
danger: $danger-palette,
grays: $grays-palette,
is-dark: false,
foreground: $foreground-palette,
background: $background-palette
);
}
// 创建一个容器对象，用于将暗主题指定给各个组件主题混合。
@function sim-dark-theme(
$primary,
$secondary,
$info: #3591fe,
$success: #59c520,
$warning: #f6ac1e,
$danger: #ef0f30,
$grays: sim-palette($sim-palette-greys),
$foreground: $sim-dark-theme-foreground,
$background: $sim-dark-theme-background
) {
$info-palette: _sim-get-config-palette($info, null, $sim-palette-info);
$success-palette: _sim-get-config-palette($success, null, $sim-palette-success);
$warning-palette: _sim-get-config-palette($warning, null, $sim-palette-warning);
$danger-palette: _sim-get-config-palette($danger, null, $sim-palette-danger);
$grays-palette: _sim-get-config-palette($grays, null, $sim-palette-greys);
$foreground-palette: _sim-get-config-palette($foreground, foreground, $sim-light-theme-foreground);
$background-palette: _sim-get-config-palette($background, background, $sim-light-theme-background);
@return (
primary: $primary,
secondary: $secondary,
info: $info-palette,
success: $success-palette,
warning: $warning-palette,
danger: $danger-palette,
grays: $grays-palette,
is-dark: true,
foreground: $foreground-palette,
background: $background-palette
);
}
// 抹平传递进来的主题色差异。
@function _sim-get-config-palette($theme, $palette, $default) {
@if ($palette != null) {
/// 处理前景色
@if ($palette == 'foreground') {
// 允许的必须前景主题属性
$foregrounds: (
base,
divider,
disabled,
disabled-button,
disabled-text,
elevation,
text,
hint-text,
secondary-text,
icon,
slider-min,
slider-off,
slider-off-active
);
$theme: if(type-of($theme) != 'map', (), $theme);
@each $foreground in $foregrounds {
@if (not map-has-key($theme, $foreground)) {
$theme: map-merge(
$theme,
(
$foreground: map-get($default, $foreground)
)
);
}
@if (not map-has-key($theme, $foreground)) {
@error 'sim-light-theme-foreground: Lack of support #{$foreground}';
}
}
@return $theme;
}
/// 处理背景色
@if ($palette == 'background') {
// 允许的必须背景主题属性
$backgrounds: (
background,
disabled-background,
status-bar,
app-bar,
hover,
active,
card,
dialog,
disabled-button,
elevation,
raised-button,
focused-button,
selected-button,
selected-disabled-button,
disabled-button-toggle,
unselected-chip,
disabled-list-option,
list-option-group,
tooltip
);
$theme: if(type-of($theme) != 'map', (), $theme);
@each $background in $backgrounds {
@if (not map-has-key($theme, $background)) {
$theme: map-merge(
$theme,
(
$background: map-get($default, $background)
)
);
}
@if (not map-has-key($theme, $background)) {
@error 'sim-light-theme-background: Lack of support #{$background}';
}
}
@return $theme;
}
/// 处理其他主题色
@if (type-of($theme) != 'map' or map-get($theme, $palette) == null) {
@return sim-palette($default);
}
} @else {
@if (type-of($theme) != 'map') {
@return sim-palette($default);
}
}
@if (type-of($theme) == 'color') {
@return sim-generate-palette($theme);
}
@return sim-palette($theme);
}
// 创建一个容器对象，用于将主题指定给各个组件主题混合。
@function sim-color-theme($theme-config: (), $schema: 'light') {
$primary-palette: _sim-get-config-palette($theme-config, primary, $sim-palette-primary);
$secondary-palette: _sim-get-config-palette($theme-config, secondary, $sim-palette-secondary);
@return if(
$schema == 'light',
sim-light-theme(
$primary: $primary-palette,
$secondary: $secondary-palette,
$info: map-get($theme-config, info),
$success: map-get($theme-config, success),
$warning: map-get($theme-config, warning),
$danger: map-get($theme-config, danger),
$grays: map-get($theme-config, grays),
$foreground: map-get($theme-config, foreground),
$background: map-get($theme-config, background)
),
sim-dark-theme(
$primary: $primary-palette,
$secondary: $secondary-palette,
$info: map-get($theme-config, info),
$success: map-get($theme-config, success),
$warning: map-get($theme-config, warning),
$danger: map-get($theme-config, danger),
$grays: map-get($theme-config, grays),
$foreground: map-get($theme-config, foreground),
$background: map-get($theme-config, background)
)
);
}
/// 全局组件注册表映射
/// @type List
/// @access private
$_sim-components: () !default;
// 使用的默认动画曲线
$sim-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 0.1) !default;
$sim-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;
$sim-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;
$sim-ease-in-out-curve-function: cubic-bezier(0.35, 0, 0.25, 1) !default;
$sim-swift-ease-out-duration: 400ms !default;
$sim-swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
$sim-swift-ease-out: all $sim-swift-ease-out-duration $sim-swift-ease-out-timing-function !default;
$sim-swift-ease-in-duration: 300ms !default;
$sim-swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
$sim-swift-ease-in: all $sim-swift-ease-in-duration $sim-swift-ease-in-timing-function !default;
$sim-swift-ease-in-out-duration: 500ms !default;
$sim-swift-ease-in-out-timing-function: $sim-ease-in-out-curve-function !default;
$sim-swift-ease-in-out: all $sim-swift-ease-in-out-duration $sim-swift-ease-in-out-timing-function !default;
$sim-swift-linear-duration: 80ms !default;
$sim-swift-linear-timing-function: linear !default;
$sim-swift-linear: all $sim-swift-linear-duration $sim-swift-linear-timing-function !default;
// mixin 和CSS类的集合，设置元素box-shadow
// See: https://simerial.io/design/environment/elevation.html
// Examples:
// 添加投影
// .sim-foo {
// @include $sim-elevation(2);
//
// &:active {
// @include $sim-elevation(8);
// }
// }
// 添加投影class
//
//
// 颜色的本影，半影，和周围的阴影。
// 设计文档中描述,每个标高创建使用一组3阴影值,
// 一个阴影(表示空间的阴影完全被一个对象相对于其光源),
// 一个用于半影(空间部分被一个对象),和一个环境(包含对象本身的空间)。
// 有关这些术语及其含义的进一步解释，请参见https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra。
// 映射不同阴影集及其在每个z空间中的值。这些值是通过使用谷歌的设计人员创建的一些参考阴影集并在它们之间插入所有值来创建的。
@function _sim-get-umbra-map($color, $opacity) {
$shadow-color: if(type-of($color) == color, rgba($color, $opacity * 0.2), $color);
@return (
0: '0px 0px 0px 0px #{$shadow-color}',
1: '0px 2px 1px -1px #{$shadow-color}',
2: '0px 3px 1px -2px #{$shadow-color}',
3: '0px 3px 3px -2px #{$shadow-color}',
4: '0px 2px 4px -1px #{$shadow-color}',
5: '0px 3px 5px -1px #{$shadow-color}',
6: '0px 3px 5px -1px #{$shadow-color}',
7: '0px 4px 5px -2px #{$shadow-color}',
8: '0px 5px 5px -3px #{$shadow-color}',
9: '0px 5px 6px -3px #{$shadow-color}',
10: '0px 6px 6px -3px #{$shadow-color}',
11: '0px 6px 7px -4px #{$shadow-color}',
12: '0px 7px 8px -4px #{$shadow-color}',
13: '0px 7px 8px -4px #{$shadow-color}',
14: '0px 7px 9px -4px #{$shadow-color}',
15: '0px 8px 9px -5px #{$shadow-color}',
16: '0px 8px 10px -5px #{$shadow-color}',
17: '0px 8px 11px -5px #{$shadow-color}',
18: '0px 9px 11px -5px #{$shadow-color}',
19: '0px 9px 12px -6px #{$shadow-color}',
20: '0px 10px 13px -6px #{$shadow-color}',
21: '0px 10px 13px -6px #{$shadow-color}',
22: '0px 10px 14px -6px #{$shadow-color}',
23: '0px 11px 14px -7px #{$shadow-color}',
24: '0px 11px 15px -7px #{$shadow-color}'
);
}
@function _sim-get-penumbra-map($color, $opacity) {
$shadow-color: if(type-of($color) ==color, rgba($color, $opacity * 0.14), $color);
@return (
0: '0px 0px 0px 0px #{$shadow-color}',
1: '0px 1px 1px 0px #{$shadow-color}',
2: '0px 2px 2px 0px #{$shadow-color}',
3: '0px 3px 4px 0px #{$shadow-color}',
4: '0px 4px 5px 0px #{$shadow-color}',
5: '0px 5px 8px 0px #{$shadow-color}',
6: '0px 6px 10px 0px #{$shadow-color}',
7: '0px 7px 10px 1px #{$shadow-color}',
8: '0px 8px 10px 1px #{$shadow-color}',
9: '0px 9px 12px 1px #{$shadow-color}',
10: '0px 10px 14px 1px #{$shadow-color}',
11: '0px 11px 15px 1px #{$shadow-color}',
12: '0px 12px 17px 2px #{$shadow-color}',
13: '0px 13px 19px 2px #{$shadow-color}',
14: '0px 14px 21px 2px #{$shadow-color}',
15: '0px 15px 22px 2px #{$shadow-color}',
16: '0px 16px 24px 2px #{$shadow-color}',
17: '0px 17px 26px 2px #{$shadow-color}',
18: '0px 18px 28px 2px #{$shadow-color}',
19: '0px 19px 29px 2px #{$shadow-color}',
20: '0px 20px 31px 3px #{$shadow-color}',
21: '0px 21px 33px 3px #{$shadow-color}',
22: '0px 22px 35px 3px #{$shadow-color}',
23: '0px 23px 36px 3px #{$shadow-color}',
24: '0px 24px 38px 3px #{$shadow-color}'
);
}
@function _sim-get-ambient-map($color, $opacity) {
$shadow-color: if(type-of($color) ==color, rgba($color, $opacity * 0.12), $color);
@return (
0: '0px 0px 0px 0px #{$shadow-color}',
1: '0px 1px 3px 0px #{$shadow-color}',
2: '0px 1px 5px 0px #{$shadow-color}',
3: '0px 1px 8px 0px #{$shadow-color}',
4: '0px 1px 10px 0px #{$shadow-color}',
5: '0px 1px 14px 0px #{$shadow-color}',
6: '0px 1px 18px 0px #{$shadow-color}',
7: '0px 2px 16px 1px #{$shadow-color}',
8: '0px 3px 14px 2px #{$shadow-color}',
9: '0px 3px 16px 2px #{$shadow-color}',
10: '0px 4px 18px 3px #{$shadow-color}',
11: '0px 4px 20px 3px #{$shadow-color}',
12: '0px 5px 22px 4px #{$shadow-color}',
13: '0px 5px 24px 4px #{$shadow-color}',
14: '0px 5px 26px 4px #{$shadow-color}',
15: '0px 6px 28px 5px #{$shadow-color}',
16: '0px 6px 30px 5px #{$shadow-color}',
17: '0px 6px 32px 5px #{$shadow-color}',
18: '0px 7px 34px 6px #{$shadow-color}',
19: '0px 7px 36px 6px #{$shadow-color}',
20: '0px 8px 38px 7px #{$shadow-color}',
21: '0px 8px 40px 7px #{$shadow-color}',
22: '0px 8px 42px 7px #{$shadow-color}',
23: '0px 9px 44px 8px #{$shadow-color}',
24: '0px 9px 46px 8px #{$shadow-color}'
);
}
// 动画默认持续时间值
$sim-elevation-transition-duration: 280ms !default;
// 动画默认缓动值
$sim-elevation-transition-timing-function: $sim-fast-out-slow-in-timing-function;
// 阴影的默认颜色
$sim-elevation-color: black !default;
// 阴影的默认不透明度缩放值
$sim-elevation-opacity: 1 !default;
// 与阴影相关的选择器的前缀
$_sim-elevation-prefix: 'sim-elevation-z';
// 将正确的css规则应用于元素，使其具有由$zValue指定的高度。
// $zValue必须在1到24之间。
// .foo {
// @include sim-elevation(2);
// }
@mixin sim-elevation($zValue, $color: $sim-elevation-color, $opacity: $sim-elevation-opacity) {
@if type-of($zValue) !=number or not unitless($zValue) {
@error '$zValue must be a unitless number';
}
@if $zValue<0 or $zValue>24 {
@error '$zValue must be between 0 and 24';
}
@if $zValue == 0 {
box-shadow: none;
} @else {
box-shadow: #{map-get(_sim-get-umbra-map($color, $opacity), $zValue)}, #{map-get(_sim-get-penumbra-map($color, $opacity), $zValue)},
#{map-get(_sim-get-ambient-map($color, $opacity), $zValue)};
}
}
@mixin sim-theme-elevation($zValue, $config, $opacity: $sim-elevation-opacity) {
$foreground: map-get($config, foreground);
$elevation-color: map-get($foreground, elevation);
$elevation-color-or-default: if($elevation-color == null, $sim-elevation-color, $elevation-color);
@include sim-elevation($zValue, $elevation-color-or-default, $opacity);
}
// 以允许使用者通过`sim-elevation-z*`类覆盖元素的方式向元素应用阴影。
// .foo {
// @include sim-overridable-elevation(2);
// }
//
// sim-elevation-z0 相当于取消box-shadow; 如果不需要阴影可以使用
@mixin sim-overridable-elevation($zValue, $color: $sim-elevation-color, $opacity: $sim-elevation-opacity) {
&:not([class*='#{$_sim-elevation-prefix}']) {
@include sim-elevation($zValue, $color, $opacity);
}
}
@mixin sim-theme-overridable-elevation($zValue, $theme, $opacity: $sim-elevation-opacity) {
$foreground: map-get($theme, foreground);
$elevation-color: map-get($foreground, elevation);
$elevation-color-or-default: if($elevation-color == null, $sim-elevation-color, $elevation-color);
@include sim-overridable-elevation($zValue, $elevation-color-or-default, $opacity);
}
@function _sim-get-overridable-elevation-hover-value($zValue) {
@each $value in (8, 12, 16) {
@if $zValue <= ($value - 4) {
@return $value;
}
}
@return $zValue;
}
@mixin sim-overridable-elevation-hover($zValue, $hValue: null, $color: $sim-elevation-color, $opacity: $sim-elevation-opacity) {
$hValue-default: if($hValue == null, _sim-get-overridable-elevation-hover-value($zValue), $hValue);
@debug $hValue-default;
&:not([class*='#{$_sim-elevation-prefix}']) {
@include sim-elevation($zValue, $color, $opacity);
@include sim-elevation-transition();
&:hover {
@include sim-elevation($hValue-default, $color, $opacity);
}
}
}
// 返回一个字符串，该字符串可以用作海拔过渡属性的值。在组件需要转换多个属性的情况下，直接调用此函数非常有用。
//
// .foo {
// transition: sim-elevation-transition-property-value(), opacity 100ms ease;
// }
@function sim-elevation-transition-property-value(
$duration: $sim-elevation-transition-duration,
$easing: $sim-elevation-transition-timing-function
) {
@return box-shadow #{$duration} #{$easing};
}
// 应用正确的css规则，以便在标高之间进行元素转换。这个mixin应该应用于那些仰角值将根据上下文而变化的元素(例如，在active 或 disabled时)。
// 这个mixin和上面的函数都使用默认参数，因此用户可以以相同的方式使用它们。
// .foo {
// @include sim-elevation-transition;
// }
@mixin sim-elevation-transition($duration: $sim-elevation-transition-duration, $easing: $sim-elevation-transition-timing-function) {
transition: sim-elevation-transition-property-value($duration, $easing);
}
@mixin sim-a11y() {
.cdk-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
border: 0;
outline: 0;
-webkit-appearance: none;
-moz-appearance: none;
clip: rect(0 0 0 0);
}
}
$sim-z-index-overlay-container: 1000;
$sim-z-index-overlay: 1000;
$sim-z-index-overlay-backdrop: 1000;
$sim-overlay-dark-backdrop-background: rgba(0, 0, 0, 0.32);
$sim-backdrop-animation-duration: 400ms !default;
$sim-backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
@mixin sim-overlay() {
.cdk-overlay-container,
.cdk-global-overlay-wrapper {
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.cdk-overlay-container {
position: fixed;
z-index: $sim-z-index-overlay-container;
&:empty {
display: none;
}
}
.cdk-global-overlay-wrapper {
position: absolute;
z-index: $sim-z-index-overlay;
display: flex;
}
.cdk-overlay-pane {
position: absolute;
z-index: $sim-z-index-overlay;
display: flex;
box-sizing: border-box;
max-width: 100%;
max-height: 100%;
pointer-events: auto;
}
.cdk-overlay-backdrop {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $sim-z-index-overlay-backdrop;
opacity: 0;
transition: opacity $sim-backdrop-animation-duration $sim-backdrop-animation-timing-function;
pointer-events: auto;
-webkit-tap-highlight-color: transparent;
&.cdk-overlay-backdrop-showing {
opacity: 1;
@media screen and (-ms-high-contrast: active) {
opacity: 0.6;
}
}
}
.cdk-overlay-dark-backdrop {
background: $sim-overlay-dark-backdrop-background;
}
.cdk-overlay-transparent-backdrop {
&,
&.cdk-overlay-backdrop-showing {
opacity: 0;
}
}
.cdk-overlay-connected-position-bounding-box {
position: absolute;
z-index: $sim-z-index-overlay;
display: flex;
flex-direction: column;
min-width: 1px;
min-height: 1px;
}
.cdk-global-scrollblock {
position: fixed;
width: 100%;
overflow-y: scroll;
}
}
@mixin simple-ui-core-theme($config-or-theme) {
$theme: sim-get-color-config($config-or-theme);
@include sim-a11y();
@include sim-overlay();
// 生成主题字体颜色
@each $type in primary, secondary, success, info, warning, danger {
$color: map-get($theme, $type);
.sim-text-#{$type} {
color: sim-color($color, $type);
}
}
// 为每个提升值提供外部CSS类。每个CSS类都被格式化为“sim-elevation-z$zValue”，其中“$zValue”对应元素被提升到的z空间。
@for $zValue from 1 through 24 {
.#{$_sim-elevation-prefix}#{$zValue} {
@include sim-elevation($zValue);
}
}
}
/// Do not edit this file
/// 组件开始
// Density configuration for the divider. Captures the margin for both divider.
$sim-divider-density-config: (
margin: (
default: 16px,
maximum: 24px,
minimum: 16px
)
) !default;
$sim-divider: unquote(sim-divider);
// 注册组件
@include sim-register-component($sim-divider);
@mixin sim-divider-color($config-or-theme) {
$theme: sim-get-color-config($config-or-theme);
$foreground: map-get($theme, foreground);
$divider: sim-color($foreground, divider);
.sim-divider {
border-top-color: $divider;
}
.sim-divider-vertical {
border-right-color: $divider;
}
.sim-divider-text {
color: sim-color($foreground, text);
&::before,
&::after {
border-top-color: $divider;
}
}
}
@mixin sim-divider-typography($config-or-theme) {
$config: sim-get-typography-config($config-or-theme);
.sim-divider-text {
$font-size: sim-font-size($config, body1);
font: {
size: $font-size;
weight: sim-font-weight($config, body1);
}
$line-height: sim-line-height($config, body1);
// 要保证这个是偶数不然边框就是显示2px样子
$line-height: if(unitless($line-height), round($font-size * $line-height), $line-height);
// 要保证这个是偶数不然边框就是显示2px样子
line-height: if($line-height % 2 == 0px, $line-height, $line-height + 1);
}
}
@mixin sim-divider-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
$margin: sim-density-prop-value($sim-divider-density-config, $density-scale, $property-name: margin);
.sim-divider.sim-divider-outset {
margin: $margin 0;
}
.sim-divider.sim-divider-vertical {
margin: 0 $margin / 2;
&.sim-divider-outset {
margin: 0 $margin;
}
}
}
@mixin sim-divider-theme($theme-or-color-config) {
@include sim-check-component-theme($theme-or-color-config, $sim-divider) {
$color: sim-get-color-config($theme-or-color-config);
$density: sim-get-density-config($theme-or-color-config);
$typography: sim-get-typography-config($theme-or-color-config);
@if $color != null {
@include sim-divider-color($color);
}
@if $density != null {
@include sim-divider-density($density);
}
@if $typography != null {
@include sim-divider-typography($typography);
}
}
}
/// 根据父类的大小为嵌入分隔符提供了正确的偏移量
@mixin sim-inset-divider-offset($offset, $padding) {
$sim-inset-divider-offset: #{(2 * $padding) + $offset};
width: calc(100% - #{$sim-inset-divider-offset});
margin-left: $sim-inset-divider-offset;
}
// Density configuration for the button.
$sim-button-density-config: (
radius: (
default: 4px,
minimum: 4px,
maximum: 6px
),
height: (
default: 32px,
minimum: 24px,
maximum: 40px
),
padding: (
default: 16px,
minimum: 8px,
maximum: 18px
)
) !default;
$sim-button: unquote(sim-button);
/// 注册组件
@include sim-register-component($sim-button);
/// 主题风格
@mixin sim-button-theme($config-or-theme) {
@include sim-check-component-theme($config-or-theme, $sim-button) {
$color: sim-get-color-config($config-or-theme);
$density: sim-get-density-config($config-or-theme);
$typography: sim-get-typography-config($config-or-theme);
@if $color != null {
@include sim-button-color($color);
}
@if $density != null {
@include sim-button-density($density);
}
@if $typography != null {
@include sim-button-typography($typography);
}
}
}
// 为每个受支持的调色板的按钮元素应用焦点样式
@mixin _sim-button-focus-overlay-color($theme) {
@each $type in (primary, secondary, info, success, warning, danger) {
$color: map-get($theme, $type);
&.sim-#{$type} .sim-button-focus-overlay {
background-color: sim-color($color);
}
}
&.sim-button-disabled .sim-button-focus-overlay {
background-color: transparent;
}
}
@mixin _sim-button-hover-overlay-color($theme, $hue) {
$foreground: map-get($theme, foreground);
@each $type in (primary, secondary, info, success, warning, danger) {
$color: map-get($theme, $type);
&.sim-#{$type} .sim-button-focus-overlay {
background-color: sim-color($color, $hue);
}
&.sim-#{$type}:active .sim-button-focus-overlay {
background-color: map-get($foreground, base);
}
}
}
// 为每个受支持的调色板的按钮元素应用一个属性
@mixin _sim-button-theme-property($theme, $property, $hue) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
@each $type in (primary, secondary, info, success, warning, danger) {
$color: map-get($theme, $type);
&.sim-#{$type} {
#{$property}: sim-color($color, $hue);
}
}
&.sim-button-disabled {
$palette: if($property == 'color', $foreground, $background);
#{$property}: sim-color($palette, disabled-button);
}
}
@mixin _sim-outlined-button($config) {
$foreground: map-get($config, foreground);
$primary: map-get($config, primary);
&:hover {
color: sim-color($primary);
border-color: sim-color($primary);
}
&:active {
box-shadow: 0 0 10px sim-color($primary, lighter) inset;
}
@each $type in (primary, secondary, info, success, warning, danger) {
$color: map-get($config, $type);
&.sim-#{$type} {
color: sim-color($color);
border-color: sim-color($color);
&:hover {
color: sim-color($color, default-contrast);
background-color: sim-color($color);
}
&:active {
background-color: sim-color($color);
}
}
}
&.sim-button-disabled {
color: sim-color($foreground, disabled-button);
}
}
/// 主题颜色配置
@mixin sim-button-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
$is-dark: map-get($config, is-dark);
.sim-button-focus-overlay {
background-color: map-get($foreground, base);
}
.sim-button,
.sim-icon-button,
.sim-fab-button,
.sim-stroked-button,
.sim-outlined-button {
color: inherit;
background: transparent;
}
.sim-button,
.sim-icon-button,
.sim-fab-button,
.sim-stroked-button {
@include _sim-button-theme-property($config, 'color', text);
@include _sim-button-focus-overlay-color($config);
}
.sim-stroked-button:not(.sim-button-disabled) {
border-color: map-get($foreground, divider);
}
.sim-outlined-button {
&:not(.sim-button-disabled) {
border-color: map-get($foreground, divider);
}
@include _sim-outlined-button($config);
}
.sim-flat-button,
.sim-raised-button {
color: sim-color($foreground, text);
background-color: sim-color($background, raised-button);
@include _sim-button-theme-property($config, 'color', default-contrast);
@include _sim-button-theme-property($config, 'background-color', default);
@include _sim-button-hover-overlay-color($config, default-contrast);
}
.sim-raised-button {
$elevation: map-get($foreground, elevation);
@include sim-overridable-elevation(2, $elevation);
&:not(.sim-button-disabled):active {
@include sim-overridable-elevation(8, $elevation);
}
&.sim-button-disabled {
@include sim-overridable-elevation(0, $elevation);
}
}
.sim-button-loading {
@include _sim-button-loading-color($config-or-theme);
}
.sim-link-button {
@include _sim-button-link-color($config-or-theme);
}
}
@mixin _sim-button-loading-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$foreground: map-get($config, foreground);
$background: map-get($config, background);
border-color: transparent;
.sim-button-loading {
color: map-get($foreground, text);
}
@each $type in (primary, secondary, info, success, warning, danger) {
$color: map-get($config, $type);
&.sim-#{$type} {
border-color: transparent;
&.sim-button-loading {
color: sim-color($color, text);
}
&.sim-flat-button,
&.sim-raised-button {
&.sim-button-loading {
color: sim-color($color, default-contrast);
}
}
}
}
}
/// link button color
@mixin _sim-button-link-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$foreground: map-get($config, foreground);
$primary: map-get($config, primary);
color: sim-color($primary);
&:hover {
color: sim-color($primary, 300);
}
&:active {
color: sim-color($primary, darker);
}
&::before {
background-color: sim-color($primary, 300);
}
@each $type in (primary, secondary, info, success, warning, danger) {
$color: map-get($config, $type);
&.sim-#{$type} {
color: sim-color($color);
&:hover {
color: sim-color($color, 300);
}
&:active {
color: sim-color($color, darker);
}
&::before {
background-color: sim-color($color, 300);
}
}
}
&.sim-button-disabled {
color: map-get($foreground, disabled-button);
}
}
/// 字体排版配置
@mixin sim-button-typography($config-or-theme) {
$typography: sim-get-typography-config($config-or-theme);
.sim-button,
.sim-outlined-button,
.sim-icon-button,
.sim-raised-button,
.sim-stroked-button,
.sim-fab-button,
.sim-link-button {
font-weight: sim-font-weight($typography, button);
@include _sim-font-size($typography, button);
}
}
@mixin _sim-font-size($typography, $scale) {
$button: sim-font-size($typography, $scale);
@each $size, $scale in (small: -2, medium: 0, large: 2) {
&.sim-#{$size} {
font-size: $button + $scale;
}
}
}
/// 密度配置
@mixin sim-button-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
.sim-button,
.sim-raised-button,
.sim-stroked-button,
.sim-broken-button,
.sim-flat-button,
.sim-outlined-button {
@include _sim-button-size($density-scale);
}
.sim-icon-button {
@include _sim-button-size($density-scale, $property-name-map: (width: height, height: height, line-height: height, padding: null));
}
.sim-button-base {
@include _sim-button-radius($density-scale);
}
}
/// 按钮圆角
@mixin _sim-button-radius($density-scale) {
@each $size, $scale in (small: minimum, medium: $density-scale, large: maximum) {
&.sim-#{$size} {
border-radius: sim-density-prop-value($sim-button-density-config, $scale, $property-name: radius);
}
}
}
/// 按钮尺寸
@mixin _sim-button-size($density-scale, $property-name-map: (height: height, padding: padding, line-height: height)) {
@each $size, $scale in (small: minimum, medium: $density-scale, large: maximum) {
&.sim-#{$size} {
@include _sim-button-size-property($sim-button-density-config, $scale, $property-name-map);
}
}
}
@mixin _sim-button-size-property($config, $scale, $property-name-map) {
@each $attr in map-keys($property-name-map) {
$property-name: map-get($property-name-map, $attr);
@if $attr == 'padding' {
@if not $property-name {
padding: 0;
} @else {
padding: 0 sim-density-prop-value($config, $scale, $property-name);
}
} @else {
#{$attr}: sim-density-prop-value($config, $scale, $property-name);
}
}
}
// Density configuration for the card.
$sim-card-density-config: (
margin: (
default: 16px,
maximum: 24px,
minimum: 16px
),
padding: (
default: 16px,
maximum: 24px,
minimum: 16px
),
radius: (
default: 4px,
minimum: 4px,
maximum: 6px
)
) !default;
$sim-card: unquote(sim-card);
/// 注册组件
@include sim-register-component($sim-card);
/// 主题风格
@mixin sim-card-theme($config-or-theme) {
@include sim-check-component-theme($config-or-theme, $sim-card) {
$color: sim-get-color-config($config-or-theme);
$density: sim-get-density-config($config-or-theme);
$typography: sim-get-typography-config($config-or-theme);
@if $color != null {
@include sim-card-color($color);
}
@if $density != null {
@include sim-card-density($density);
}
@if $typography != null {
@include sim-card-typography($typography);
}
}
}
/// 主题颜色配置
@mixin sim-card-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
$is-dark: map-get($config, is-dark);
.sim-card {
color: sim-color($foreground, text);
background: sim-color($background, card);
@include sim-theme-overridable-elevation(1, $config);
&.sim-card-flat {
@include sim-theme-overridable-elevation(0, $config);
}
&.sim-card-hoverable:not(.sim-card-flat):hover {
@include sim-theme-overridable-elevation(4, $config);
}
}
.sim-card-reveal {
color: sim-color($foreground, text);
background: sim-color($background, card);
}
.sim-card-subtitle {
color: sim-color($foreground, secondary-text);
}
}
/// 字体排版配置
@mixin sim-card-typography($config-or-theme) {
$config: sim-get-typography-config($config-or-theme);
.sim-card {
font-family: sim-font-family($config);
}
.sim-card-title {
font: {
size: sim-font-size($config, headline);
weight: sim-font-weight($config, title);
}
}
.sim-card-header .sim-card-title {
font-size: sim-font-size($config, title);
}
.sim-card-subtitle,
.sim-card-content {
font-size: sim-font-size($config, body1);
}
}
/// 密度配置
@mixin sim-card-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
$padding: sim-density-prop-value($sim-card-density-config, $density-scale, padding);
$margin: sim-density-prop-value($sim-card-density-config, $density-scale, margin);
.sim-card-subtitle,
.sim-card-content {
margin-bottom: $margin;
}
.sim-card,
.sim-card-reveal {
padding: $padding;
border-radius: sim-density-prop-value($sim-card-density-config, $density-scale, radius);
.sim-divider-horizontal {
& ~ .sim-card-content {
padding-top: $padding;
}
}
}
.sim-card-header-text {
margin: 0 $margin;
}
.sim-card-actions {
margin-right: -padding / 2;
margin-left: -padding / 2;
}
.sim-card-footer {
// 负边距会拉出元素，与填充相反，使页脚与card的侧面齐平
margin: 0 -$margin -$margin -$margin;
}
.sim-card-image {
width: calc(100% + #{$padding * 2});
margin: 0 (-$padding) 16px (-$padding);
&:first-child {
margin-top: -$padding;
}
}
.sim-card > .sim-card-image:last-child {
margin-bottom: -$padding;
}
}
// Density configuration for the skeleton.
$sim-skeleton-density-config: (
margin: (
default: 16px,
maximum: 24px,
minimum: 16px
)
) !default;
$sim-skeleton: unquote(sim-skeleton);
/// 注册组件
@include sim-register-component($sim-skeleton);
/// 主题风格
@mixin sim-skeleton-theme($config-or-theme) {
@include sim-check-component-theme($config-or-theme, $sim-skeleton) {
$color: sim-get-color-config($config-or-theme);
$density: sim-get-density-config($config-or-theme);
$typography: sim-get-typography-config($config-or-theme);
@if $color != null {
@include sim-skeleton-color($color);
}
@if $density != null {
@include sim-skeleton-density($density);
}
@if $typography != null {
@include sim-skeleton-typography($typography);
}
}
}
/// 主题颜色配置
@mixin sim-skeleton-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
$is-dark: map-get($config, is-dark);
.sim-skeleton-bar:not(.sim-skeleton-empty) {
background: sim-color($foreground, divider);
}
.sim-skeleton-animate .sim-skeleton-bar:not(.sim-skeleton-empty)::before {
background: sim-color($foreground, divider);
}
}
/// 字体排版配置
@mixin sim-skeleton-typography($config-or-theme) {
$config: sim-get-typography-config($config-or-theme);
}
/// 密度配置
@mixin sim-skeleton-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
}
// 注册组件
$sim-tabs: unquote(sim-tabs);
/// 注册组件
@include sim-register-component($sim-tabs);
/// 主题风格
@mixin sim-tabs-theme($config-or-theme) {
@include sim-check-component-theme($config-or-theme, $sim-tabs) {
$color: sim-get-color-config($config-or-theme);
$density: sim-get-density-config($config-or-theme);
$typography: sim-get-typography-config($config-or-theme);
@if $color != null {
@include sim-tabs-color($color);
}
@if $density != null {
@include sim-tabs-density($density);
}
@if $typography != null {
@include sim-tabs-typography($typography);
}
}
}
// 主题风格
@mixin sim-tabs-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
$is-dark: map-get($config, is-dark);
$primary: map-get($config, primary);
$header-border: 1px solid sim-color($foreground, divider);
.sim-tabset {
color: map-get($foreground, secondary-text);
}
.sim-tab-label,
.sim-tab-link {
color: map-get($foreground, text);
}
.sim-tab-links,
.sim-tab-header {
border-bottom: $header-border;
}
.sim-tab-label.sim-tab-label-disabled {
color: map-get($foreground, disabled-text);
}
@each $type in (primary, secondary, info, success, warning, danger) {
$color: map-get($config, $type);
.sim-tabset.sim-#{$type} {
.sim-tab-ink-bar {
background-color: sim-color($color);
}
.sim-tab-label-active {
color: sim-color($color);
}
}
.sim-tab-nav-bar.sim-#{$type} {
.sim-tab-ink-bar {
background-color: sim-color($color);
}
.sim-tab-link-active {
color: sim-color($color);
}
}
}
.sim-tab-header-pagination-chevron {
border-color: map-get($foreground, text);
.sim-tab-header-pagination-disabled & {
border-color: map-get($foreground, disabled-text);
}
}
}
// 排版风格
@mixin sim-tabs-typography($config-or-theme) {
$typography: sim-get-typography-config($config-or-theme);
.sim-tabset {
@include sim-typography-level-to-styles($typography, body2);
}
}
/// 密度配置
@mixin sim-tabs-density($config-or-theme) {
$config: sim-get-density-config($config-or-theme);
}
$sim-icon: unquote(sim-icon);
/// 注册组件
@include sim-register-component($sim-icon);
/// 主题风格
@mixin sim-icon-theme($config-or-theme) {
@include sim-check-component-theme($config-or-theme, $sim-icon) {
$color: sim-get-color-config($config-or-theme);
$density: sim-get-density-config($config-or-theme);
$typography: sim-get-typography-config($config-or-theme);
@if $color != null {
@include sim-icon-color($color);
}
@if $density != null {
@include sim-icon-density($density);
}
@if $typography != null {
@include sim-icon-typography($typography);
}
}
}
// 主题风格
@mixin sim-icon-color($config-or-theme) {
$theme: sim-get-color-config($config-or-theme);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$is-dark: map-get($theme, is-dark);
.sim-icon {
color: inherit;
@each $type in (primary, secondary, info, success, warning, danger) {
$color: map-get($theme, $type);
&.sim-#{$type} {
color: sim-color($color, default);
}
}
}
}
/// 字体排版配置
@mixin sim-icon-typography($config-or-theme) {
$typography: sim-get-typography-config($config-or-theme);
}
/// 密度配置
@mixin sim-icon-density($config-or-theme) {
$density: sim-get-density-config($config-or-theme);
}
// 注册组件
$sim-tooltip: unquote(sim-tooltip);
/// 注册组件
@include sim-register-component($sim-tooltip);
/// 主题风格
@mixin sim-tooltip-theme($config-or-theme) {
@include sim-check-component-theme($config-or-theme, $sim-tooltip) {
$color: sim-get-color-config($config-or-theme);
$density: sim-get-density-config($config-or-theme);
$typography: sim-get-typography-config($config-or-theme);
@if $color != null {
@include sim-tooltip-color($color);
}
@if $density != null {
@include sim-tooltip-density($density);
}
@if $typography != null {
@include sim-tooltip-typography($typography);
}
}
}
// 主题风格
@mixin sim-tooltip-color($config-or-theme) {
$theme: sim-get-color-config($config-or-theme);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$is-dark: map-get($theme, is-dark);
$tooltip: map-get($background, tooltip);
.sim-tooltip-arrow {
border-color: $tooltip;
}
.sim-tooltip-inner {
color: #fff;
background: $tooltip;
}
}
// 排版风格
@mixin sim-tooltip-typography($config-or-theme) {
$typography: sim-get-typography-config($config-or-theme);
.sim-tooltip {
@include sim-typography-level-to-styles($typography, caption);
}
}
/// 密度配置
@mixin sim-tooltip-density($config-or-theme) {
$density: sim-get-density-config($config-or-theme);
}
// Density configuration for the button-toggle.
$sim-button-toggle-density-config: (
height: (
default: 32px,
minimum: 24px,
maximum: 40px
)
) !default;
$sim-button-toggle: unquote(sim-button-toggle);
/// 注册组件
@include sim-register-component($sim-button-toggle);
/// 主题风格
@mixin sim-button-toggle-theme($config-or-theme) {
@include sim-check-component-theme($config-or-theme, $sim-button-toggle) {
$color: sim-get-color-config($config-or-theme);
$density: sim-get-density-config($config-or-theme);
$typography: sim-get-typography-config($config-or-theme);
@if $color != null {
@include sim-button-toggle-color($color);
}
@if $density != null {
@include sim-button-toggle-density($density);
}
@if $typography != null {
@include sim-button-toggle-typography($typography);
}
}
}
/// 主题颜色配置
@mixin sim-button-toggle-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
$is-dark: map-get($config, is-dark);
$divider-color: sim-color($foreground, divider);
.sim-button-toggle-appearance-standard {
@include _sim-button-toggle-appearance-standard($config);
}
.sim-button-toggle-appearance-outline {
@include _sim-button-toggle-appearance-outline($config);
}
}
@mixin _sim-button-toggle-appearance-standard($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$divider-color: sim-color($foreground, divider);
& {
color: sim-color($foreground, hint-text);
border-color: $divider-color;
border-style: solid;
border-width: 1px 1px 1px 0;
.sim-button-toggle-focus-overlay {
background-color: sim-color($background, focused-button, 1);
}
&:first-child {
border-left: 1px solid $divider-color;
}
&:hover {
color: sim-color($foreground, secondary-text);
}
}
&.sim-button-toggle-checked {
color: sim-color($foreground, secondary-text);
background-color: sim-color($background, selected-button);
&:not(:first-child)::before {
background-color: $divider-color;
}
}
@each $type in (primary, secondary, info, success, warning, danger) {
$color: map-get($theme, $type);
&.sim-#{$type} {
.sim-button-toggle-focus-overlay {
background-color: sim-color($color);
}
&:not(.sim-button-toggle-disabled):hover {
color: sim-color($color, text);
}
&.sim-button-toggle-checked {
color: sim-color($color, default-contrast);
background-color: sim-color($color);
&:not(.sim-button-toggle-disabled):hover {
color: sim-color($color, default-contrast);
}
&:not(:first-child)::before {
background-color: $divider-color;
}
}
}
}
.sim-button-toggle-group-vertical & {
border-color: $divider-color;
border-style: solid;
border-width: 0 1px 1px;
&:first-child {
border-top: 1px solid $divider-color;
}
}
&.sim-button-toggle-disabled {
color: sim-color($foreground, disabled-button);
background-color: sim-color($background, disabled-button-toggle);
&.sim-button-toggle-checked {
background-color: sim-color($background, selected-disabled-button);
}
}
}
@mixin _sim-button-toggle-appearance-outline($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$divider-color: sim-color($foreground, divider);
.sim-button-toggle-group-vertical & {
border-color: $divider-color;
border-style: solid;
border-width: 0 1px 1px;
&:first-child {
border-top: 1px solid $divider-color;
}
}
& {
color: sim-color($foreground, hint-text);
border-color: $divider-color;
border-style: solid;
border-width: 1px 1px 1px 0;
&:first-child {
border-left: 1px solid $divider-color;
}
&:not(.sim-button-toggle-disabled):hover {
color: sim-color($foreground, text);
}
}
&.sim-button-toggle-checked {
color: sim-color($foreground, text);
border-color: sim-color($foreground, hint-text);
&:not(:first-child)::before {
background-color: sim-color($foreground, hint-text);
}
}
@each $type in (primary, secondary, info, success, warning, danger) {
$color: map-get($theme, $type);
&.sim-#{$type} {
&:hover {
color: sim-color($color, text);
}
&.sim-button-toggle-checked {
color: sim-color($color, text);
border-color: sim-color($color);
&:not(:first-child)::before {
background-color: sim-color($color);
}
}
}
}
&.sim-button-toggle-disabled {
color: sim-color($foreground, disabled-button);
background-color: sim-color($background, disabled-button-toggle);
&.sim-button-toggle-checked {
background-color: sim-color($background, selected-disabled-button);
}
}
}
/// 字体排版配置
@mixin sim-button-toggle-typography($config-or-theme) {
$config: sim-get-typography-config($config-or-theme);
}
/// 密度配置
@mixin sim-button-toggle-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
.sim-button-toggle {
@each $size, $scale in (small: minimum, medium: $density-scale, large: maximum) {
&.sim-#{$size} .sim-button-toggle-content {
line-height: sim-density-prop-value($sim-button-toggle-density-config, $scale, height);
}
}
}
}
// Density configuration for the alert.
$sim-alert-density-config: (
margin: (
default: 16px,
maximum: 24px,
minimum: 16px
)
) !default;
$sim-alert: unquote(sim-alert);
/// 注册组件
@include sim-register-component($sim-alert);
/// 主题风格
@mixin sim-alert-theme($config-or-theme) {
@include sim-check-component-theme($config-or-theme, $sim-alert) {
$color: sim-get-color-config($config-or-theme);
$density: sim-get-density-config($config-or-theme);
$typography: sim-get-typography-config($config-or-theme);
@if $color != null {
@include sim-alert-color($color);
}
@if $density != null {
@include sim-alert-density($density);
}
@if $typography != null {
@include sim-alert-typography($typography);
}
}
}
/// 主题颜色配置
@mixin sim-alert-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
$is-dark: map-get($config, is-dark);
.sim-alert {
// 从前景色对象获取text属性
color: sim-color($foreground, secondary-text);
// 从背景色对象获取background属性
background: sim-color($background, background);
// 循环获取调色板对象
@each $type in (info, success, warning, danger) {
$color: map-get($config, $type);
&.sim-alert-#{$type} {
background-color: sim-color($color, 0.08);
border-color: sim-color($color, 0.24);
}
}
}
.sim-alert-heading {
color: sim-color($foreground, text);
}
.sim-alert-actions-standard .sim-alert-close {
color: sim-color($foreground, hint-text);
&:hover {
color: sim-color($foreground, text);
}
}
}
/// 字体排版配置
@mixin sim-alert-typography($config-or-theme) {
$config: sim-get-typography-config($config-or-theme);
.sim-alert {
font: {
family: sim-font-family($config, body2);
size: sim-font-size($config, body2);
}
}
.sim-alert-heading {
font-size: sim-font-size($config, subheading);
}
}
/// 密度配置
@mixin sim-alert-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
.sim-alert {
margin-bottom: sim-density-prop-value($sim-card-density-config, $density-scale, margin);
}
}
// Density configuration for the dialog.
$sim-dialog-density-config: (
margin: (
default: 16px,
maximum: 24px,
minimum: 16px
)
) !default;
$sim-dialog: unquote(sim-dialog);
/// 注册组件
@include sim-register-component($sim-dialog);
/// 主题风格
@mixin sim-dialog-theme($config-or-theme) {
@include sim-check-component-theme($config-or-theme, $sim-dialog) {
$color: sim-get-color-config($config-or-theme);
$density: sim-get-density-config($config-or-theme);
$typography: sim-get-typography-config($config-or-theme);
@if $color != null {
@include sim-dialog-color($color);
}
@if $density != null {
@include sim-dialog-density($density);
}
@if $typography != null {
@include sim-dialog-typography($typography);
}
}
}
/// 主题颜色配置
@mixin sim-dialog-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
$is-dark: map-get($config, is-dark);
.sim-dialog {
@include sim-theme-elevation(24, $config);
color: sim-color($foreground, text);
background: sim-color($background, dialog);
}
}
/// 字体排版配置
@mixin sim-dialog-typography($config-or-theme) {
$config: sim-get-typography-config($config-or-theme);
.sim-dialog-title {
@include sim-typography-level-to-styles($config, subtitle);
}
}
/// 密度配置
@mixin sim-dialog-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
}
// Density configuration for the nprogress.
$sim-nprogress-density-config: (
margin: (
default: 16px,
maximum: 24px,
minimum: 16px
)
) !default;
$sim-nprogress: unquote(sim-nprogress);
/// 注册组件
@include sim-register-component($sim-nprogress);
/// 主题风格
@mixin sim-nprogress-theme($config-or-theme) {
@include sim-check-component-theme($config-or-theme, $sim-nprogress) {
$color: sim-get-color-config($config-or-theme);
$density: sim-get-density-config($config-or-theme);
$typography: sim-get-typography-config($config-or-theme);
@if $color != null {
@include sim-nprogress-color($color);
}
@if $density != null {
@include sim-nprogress-density($density);
}
@if $typography != null {
@include sim-nprogress-typography($typography);
}
}
}
/// 主题颜色配置
@mixin sim-nprogress-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
$is-dark: map-get($config, is-dark);
.sim-nprogress {
@each $type in (primary, secondary, info, success, warning, danger) {
$color: map-get($config, $type);
&.sim-#{$type} {
.sim-nprogress-inner {
background-color: sim-color($color);
}
.sim-nprogress-meteor {
box-shadow: 0 0 10px sim-color($color), 0 0 5px sim-color($color);
}
.sim-nprogress-spinner-icon {
border-top-color: sim-color($color);
border-left-color: sim-color($color);
}
}
}
}
}
/// 字体排版配置
@mixin sim-nprogress-typography($config-or-theme) {
$config: sim-get-typography-config($config-or-theme);
}
/// 密度配置
@mixin sim-nprogress-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
}
// Density configuration for the spinner.
$sim-spinner-density-config: (
font-size: (
default: 24px,
maximum: 32px,
minimum: 16px
)
) !default;
$sim-spinner: unquote(sim-spinner);
/// 注册组件
@include sim-register-component($sim-spinner);
/// 主题风格
@mixin sim-spinner-theme($config-or-theme) {
@include sim-check-component-theme($config-or-theme, $sim-spinner) {
$color: sim-get-color-config($config-or-theme);
$density: sim-get-density-config($config-or-theme);
$typography: sim-get-typography-config($config-or-theme);
@if $color != null {
@include sim-spinner-color($color);
}
@if $density != null {
@include sim-spinner-density($density);
}
@if $typography != null {
@include sim-spinner-typography($typography);
}
}
}
/// 主题颜色配置
@mixin sim-spinner-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
$is-dark: map-get($config, is-dark);
@each $type in (primary, secondary, info, success, warning, danger) {
$color: map-get($config, $type);
.sim-#{$type} {
.sim-spinner-indicator-path {
stroke: sim-color($color);
}
.sim-spinner-placeholder {
color: sim-color($color);
}
}
}
}
/// 字体排版配置
@mixin sim-spinner-typography($config-or-theme) {
$config: sim-get-typography-config($config-or-theme);
.sim-spinner-placeholder {
font-size: sim-font-size($config, button);
line-height: sim-line-height($config, button);
}
}
/// 密度配置
@mixin sim-spinner-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
@each $size, $scale in (small: minimum, medium: $density-scale, large: maximum) {
.sim-#{$size} {
.sim-spinner-indicator {
font-size: sim-density-prop-value($sim-spinner-density-config, $scale, font-size);
}
}
}
}
// Density configuration for the empty.
$sim-empty-density-config: (
margin: (
default: 16px,
maximum: 24px,
minimum: 16px
)
) !default;
$sim-empty: unquote(sim-empty);
/// 注册组件
@include sim-register-component($sim-empty);
/// 主题风格
@mixin sim-empty-theme($config-or-theme) {
@include sim-check-component-theme($config-or-theme, $sim-empty) {
$color: sim-get-color-config($config-or-theme);
$density: sim-get-density-config($config-or-theme);
$typography: sim-get-typography-config($config-or-theme);
@if $color != null {
@include sim-empty-color($color);
}
@if $density != null {
@include sim-empty-density($density);
}
@if $typography != null {
@include sim-empty-typography($typography);
}
}
}
/// 主题颜色配置
@mixin sim-empty-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
$is-dark: map-get($config, is-dark);
.sim-empty-description {
color: sim-color($foreground, secondary-text);
}
}
/// 字体排版配置
@mixin sim-empty-typography($config-or-theme) {
$config: sim-get-typography-config($config-or-theme);
.sim-empty {
font-size: sim-font-size($config, body2);
line-height: sim-line-height($config, body2);
}
}
/// 密度配置
@mixin sim-empty-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
.sim-empty-footer {
margin-top: sim-density-prop-value($sim-empty-density-config, $density-scale, margin);
}
}
// Density configuration for the option.
$sim-option-density-config: (
margin: (
default: 16px,
maximum: 24px,
minimum: 16px
)
) !default;
$sim-option: unquote(sim-option);
/// 注册组件
@include sim-register-component($sim-option);
/// 主题风格
@mixin sim-option-theme($config-or-theme) {
@include sim-check-component-theme($config-or-theme, $sim-option) {
$color: sim-get-color-config($config-or-theme);
$density: sim-get-density-config($config-or-theme);
$typography: sim-get-typography-config($config-or-theme);
@if $color != null {
@include sim-option-color($color);
}
@if $density != null {
@include sim-option-density($density);
}
@if $typography != null {
@include sim-option-typography($typography);
}
}
}
/// 主题颜色配置
@mixin sim-option-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
$is-dark: map-get($config, is-dark);
.sim-option {
color: sim-color($foreground, text);
&:hover:not(.sim-option-disabled),
&:focus:not(.sim-option-disabled) {
background: sim-color($background, hover);
}
&.sim-option-active {
color: sim-color($foreground, text);
background: sim-color($background, hover);
}
&.sim-option-disabled {
color: sim-color($foreground, disabled-text);
}
}
.sim-optgroup-label {
color: map-get($foreground, secondary-text);
background: map-get($background, list-option-group);
}
.sim-optgroup-disabled .sim-optgroup-label {
color: map-get($foreground, disabled-text);
}
// 循环获取调色板对象
@each $type in (primary, secondary, info, success, warning, danger) {
$color: map-get($config, $type);
.sim-#{$type} {
.sim-option.sim-option-selected:not(.sim-option-disabled) {
color: sim-color($color);
}
}
}
}
/// 字体排版配置
@mixin sim-option-typography($config-or-theme) {
$config: sim-get-typography-config($config-or-theme);
.sim-option {
font: {
size: sim-font-size($config, body2);
}
}
.sim-optgroup-label {
@include sim-typography-level-to-styles($config, subtitle);
}
}
/// 密度配置
@mixin sim-option-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
}
// Density configuration for the dropdown.
$sim-dropdown-density-config: (
margin: (
default: 16px,
maximum: 24px,
minimum: 16px
)
) !default;
$sim-dropdown: unquote(sim-dropdown);
/// 注册组件
@include sim-register-component($sim-dropdown);
/// 主题风格
@mixin sim-dropdown-theme($config-or-theme) {
@include sim-check-component-theme($config-or-theme, $sim-dropdown) {
$color: sim-get-color-config($config-or-theme);
$density: sim-get-density-config($config-or-theme);
$typography: sim-get-typography-config($config-or-theme);
@if $color != null {
@include sim-dropdown-color($color);
}
@if $density != null {
@include sim-dropdown-density($density);
}
@if $typography != null {
@include sim-dropdown-typography($typography);
}
}
}
/// 主题颜色配置
@mixin sim-dropdown-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
$is-dark: map-get($config, is-dark);
.sim-dropdown {
background: sim-color($background, card);
@include sim-theme-overridable-elevation(8, $config);
}
}
/// 字体排版配置
@mixin sim-dropdown-typography($config-or-theme) {
$config: sim-get-typography-config($config-or-theme);
.sim-dropdown {
font: {
size: sim-font-size($config, body2);
}
}
}
/// 密度配置
@mixin sim-dropdown-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
}
$sim-pseudo-checkbox: unquote(sim-pseudo-checkbox);
/// 注册组件
@include sim-register-component($sim-pseudo-checkbox);
/// 主题风格
@mixin sim-pseudo-checkbox-theme($config-or-theme) {
@include sim-check-component-theme($config-or-theme, $sim-pseudo-checkbox) {
$color: sim-get-color-config($config-or-theme);
$density: sim-get-density-config($config-or-theme);
$typography: sim-get-typography-config($config-or-theme);
@if $color != null {
@include sim-pseudo-checkbox-color($color);
}
@if $density != null {
@include sim-pseudo-checkbox-density($density);
}
@if $typography != null {
@include sim-pseudo-checkbox-typography($typography);
}
}
}
/// 主题颜色配置
@mixin sim-pseudo-checkbox-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
$is-dark: map-get($config, is-dark);
.sim-pseudo-checkbox {
color: map-get($foreground, divider);
background: sim-color($background, card);
}
// 循环获取调色板对象
@each $type in (primary, secondary, info, success, warning, danger) {
$color: map-get($config, $type);
.sim-#{$type} {
.sim-pseudo-checkbox-checked,
.sim-pseudo-checkbox-indeterminate {
color: sim-color($color, default-contrast);
background: sim-color($color);
}
}
}
.sim-pseudo-checkbox.sim-pseudo-checkbox-disabled {
color: map-get($foreground, divider);
background: sim-color($background, disabled-button);
}
}
/// 字体排版配置
@mixin sim-pseudo-checkbox-typography($config-or-theme) {
$config: sim-get-typography-config($config-or-theme);
}
/// 密度配置
@mixin sim-pseudo-checkbox-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
}
// Density configuration for the expansion.
$sim-expansion-density-config: (
collapsed-height: (
default: 36px,
maximum: 48px,
minimum: 36px
),
expanded-height: (
default: 48px,
maximum: 64px,
minimum: 48px
)
) !default;
$sim-expansion: unquote(sim-expansion);
/// 注册组件
@include sim-register-component($sim-expansion);
/// 主题风格
@mixin sim-expansion-theme($config-or-theme) {
@include sim-check-component-theme($config-or-theme, $sim-expansion) {
$color: sim-get-color-config($config-or-theme);
$density: sim-get-density-config($config-or-theme);
$typography: sim-get-typography-config($config-or-theme);
@if $color != null {
@include sim-expansion-color($color);
}
@if $density != null {
@include sim-expansion-density($density);
}
@if $typography != null {
@include sim-expansion-typography($typography);
}
}
}
/// 主题颜色配置
@mixin sim-expansion-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
$is-dark: map-get($config, is-dark);
.sim-expansion-panel {
@include sim-theme-overridable-elevation(2, $config);
color: map-get($foreground, text);
background: map-get($background, card);
}
.sim-expansion-panel-action-row {
border-top-color: map-get($foreground, divider);
}
.sim-expansion-panel-header-title {
color: map-get($foreground, text);
}
.sim-expansion-panel-header-description,
.sim-expansion-indicator::after {
color: map-get($foreground, secondary-text);
}
}
/// 字体排版配置
@mixin sim-expansion-typography($config-or-theme) {
$config: sim-get-typography-config($config-or-theme);
.sim-expansion-panel-header {
font: {
family: sim-font-family($config, subheading);
size: sim-font-size($config, subheading);
weight: sim-font-weight($config, subheading);
}
}
.sim-expansion-panel-content {
@include sim-typography-level-to-styles($config, body1);
}
}
/// 密度配置
@mixin sim-expansion-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
$expanded-height: sim-density-prop-value($sim-expansion-density-config, $density-scale, expanded-height);
$collapsed-height: sim-density-prop-value($sim-expansion-density-config, $density-scale, collapsed-height);
.sim-expansion-panel-header {
height: $collapsed-height;
&.sim-expanded {
height: $expanded-height;
}
}
}
// Density configuration for the status.
$sim-status-density-config: (
margin: (
default: 16px,
maximum: 24px,
minimum: 16px
)
) !default;
$sim-status: unquote(sim-status);
/// 注册组件
@include sim-register-component($sim-status);
/// 主题风格
@mixin sim-status-theme($config-or-theme) {
@include sim-check-component-theme($config-or-theme, $sim-status) {
$color: sim-get-color-config($config-or-theme);
$density: sim-get-density-config($config-or-theme);
$typography: sim-get-typography-config($config-or-theme);
@if $color != null {
@include sim-status-color($color);
}
@if $density != null {
@include sim-status-density($density);
}
@if $typography != null {
@include sim-status-typography($typography);
}
}
}
/// 主题颜色配置
@mixin sim-status-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
$is-dark: map-get($config, is-dark);
.sim-status,
.sim-status-default {
@include _sim-status-dot-color(map-get($background, status-bar));
}
.sim-status-success {
@include _sim-status-dot-color(sim-color(map-get($config, success)));
}
.sim-status-warning {
@include _sim-status-dot-color(sim-color(map-get($config, warning)));
}
.sim-status-error {
@include _sim-status-dot-color(sim-color(map-get($config, danger)));
}
.sim-status-processing {
@include _sim-status-dot-color(sim-color(map-get($config, info)));
.sim-status-dot::after {
border-color: sim-color(map-get($config, info));
}
}
}
@mixin _sim-status-dot-color($color) {
& .sim-status-dot {
background-color: $color;
}
}
/// 字体排版配置
@mixin sim-status-typography($config-or-theme) {
$config: sim-get-typography-config($config-or-theme);
}
/// 密度配置
@mixin sim-status-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
}
// Density configuration for the switch.
$sim-switch-density-config: (
height: (
default: 16px,
maximum: 24px,
minimum: 16px
)
) !default;
$sim-switch: unquote(sim-switch);
/// 注册组件
@include sim-register-component($sim-switch);
/// 主题风格
@mixin sim-switch-theme($config-or-theme) {
@include sim-check-component-theme($config-or-theme, $sim-switch) {
$color: sim-get-color-config($config-or-theme);
$density: sim-get-density-config($config-or-theme);
$typography: sim-get-typography-config($config-or-theme);
@if $color != null {
@include sim-switch-color($color);
}
@if $density != null {
@include sim-switch-density($density);
}
@if $typography != null {
@include sim-switch-typography($typography);
}
}
}
/// 主题颜色配置
@mixin sim-switch-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
$is-dark: map-get($config, is-dark);
$thumb-checked-hue: default;
$thumb-unchecked-hue: if($is-dark, 400, 50);
$bar-unchecked-color: sim-color($foreground, disabled);
.sim-switch-loading-icon {
color: $bar-unchecked-color;
}
.sim-slide-toggle {
// 循环获取调色板对象
@each $type in (primary, secondary, info, success, warning, danger) {
$palette: map-get($config, $type);
&.sim-#{$type} {
@include _sim-switch-outset-checked($palette, $thumb-checked-hue);
}
}
&.sim-switch-checked {
.sim-switch-loading-icon {
color: sim-color(map-get($config, grays), $thumb-unchecked-hue);
}
}
}
.sim-switch-toggle {
// 循环获取调色板对象
@each $type in (primary, secondary, info, success, warning, danger) {
$palette: map-get($config, $type);
&.sim-#{$type} {
@include _sim-switch-inset-checked($palette, $thumb-checked-hue);
}
}
}
.sim-switch-children {
color: sim-color($background, raised-button);
}
.sim-switch-bar {
background: $bar-unchecked-color;
}
.sim-switch-thumb {
@include sim-theme-elevation(1, $config);
background-color: sim-color(map-get($config, grays), $thumb-unchecked-hue);
}
}
@mixin _sim-switch-outset-checked($palette, $thumb-checked-hue) {
&.sim-switch-checked {
.sim-switch-thumb {
background-color: sim-color($palette, $thumb-checked-hue);
}
.sim-switch-bar {
background-color: sim-color($palette, $thumb-checked-hue, 0.54);
}
.sim-switch-children {
color: sim-color($palette, default-contrast);
}
}
}
@mixin _sim-switch-inset-checked($palette, $thumb-checked-hue) {
&.sim-switch-checked {
.sim-switch-bar {
background-color: sim-color($palette, $thumb-checked-hue);
}
.sim-switch-loading-icon {
color: sim-color($palette, $thumb-checked-hue);
}
}
}
/// 字体排版配置
@mixin sim-switch-typography($config-or-theme) {
$config: sim-get-typography-config($config-or-theme);
}
/// 密度配置
@mixin sim-switch-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
}
// Density configuration for the sort.
$sim-sort-density-config: () !default;
$sim-sort: unquote(sim-sort);
/// 注册组件
@include sim-register-component($sim-sort);
/// 主题风格
@mixin sim-sort-theme($config-or-theme) {
@include sim-check-component-theme($config-or-theme, $sim-sort) {
$color: sim-get-color-config($config-or-theme);
$density: sim-get-density-config($config-or-theme);
$typography: sim-get-typography-config($config-or-theme);
@if $color != null {
@include sim-sort-color($color);
}
@if $density != null {
@include sim-sort-density($density);
}
@if $typography != null {
@include sim-sort-typography($typography);
}
}
}
/// 主题颜色配置
@mixin sim-sort-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
$is-dark: map-get($config, is-dark);
.sim-sort-header:not(.sim-sort-header-disabled):hover {
background: map-get($background, hover);
}
.sim-sort-header-arrow {
color: sim-color($foreground, hint-text);
}
// 循环获取调色板对象
@each $type in (primary, secondary, info, success, warning, danger) {
$color: map-get($config, $type);
.sim-#{$type} {
.sim-sort-header-arrow-active {
color: sim-color($color, text);
}
}
}
}
/// 字体排版配置
@mixin sim-sort-typography($config-or-theme) {
$config: sim-get-typography-config($config-or-theme);
}
/// 密度配置
@mixin sim-sort-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
}
// Density configuration for the toast.
$sim-toast-density-config: () !default;
$sim-toast: unquote(sim-toast);
/// 注册组件
@include sim-register-component($sim-toast);
/// 主题风格
@mixin sim-toast-theme($config-or-theme) {
@include sim-check-component-theme($config-or-theme, $sim-toast) {
$color: sim-get-color-config($config-or-theme);
$density: sim-get-density-config($config-or-theme);
$typography: sim-get-typography-config($config-or-theme);
@if $color != null {
@include sim-toast-color($color);
}
@if $density != null {
@include sim-toast-density($density);
}
@if $typography != null {
@include sim-toast-typography($typography);
}
}
}
/// 主题颜色配置
@mixin sim-toast-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
$is-dark: map-get($config, is-dark);
.sim-toast-content {
color: map-get($foreground, secondary-text);
background: sim-color($background, dialog);
@include sim-theme-elevation(12, $config);
}
@each $type in (info, success, warning, danger) {
$color: map-get($config, $type);
.sim-toast-#{$type} {
.sim-icon {
color: sim-color($color, text);
}
}
}
}
/// 字体排版配置
@mixin sim-toast-typography($config-or-theme) {
$config: sim-get-typography-config($config-or-theme);
.sim-toast {
font-size: sim-font-size($config, body2);
line-height: sim-line-height($config, body2);
}
}
/// 密度配置
@mixin sim-toast-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
}
// Density configuration for the form-field.
$sim-form-field-density-config: (
margin: (
default: 16px,
maximum: 24px,
minimum: 16px
)
) !default;
// Density configuration for the form-field.
$sim-form-field-density-config: (
margin: (
default: 16px,
maximum: 24px,
minimum: 16px
)
) !default;
/// 主题颜色配置
@mixin sim-form-field-standard-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
$is-dark: map-get($config, is-dark);
$danger: map-get($config, danger);
}
/// 字体排版配置
@mixin sim-form-field-standard-typography($config-or-theme) {
$config: sim-get-typography-config($config-or-theme);
}
/// 密度配置
@mixin sim-form-field-standard-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
}
// Density configuration for the form-field.
$sim-form-field-density-config: (
margin: (
default: 16px,
maximum: 24px,
minimum: 16px
)
) !default;
/// 主题颜色配置
@mixin sim-form-field-outline-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
$is-dark: map-get($config, is-dark);
$danger: map-get($config, danger);
}
/// 字体排版配置
@mixin sim-form-field-outline-typography($config-or-theme) {
$config: sim-get-typography-config($config-or-theme);
}
/// 密度配置
@mixin sim-form-field-outline-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
}
// Density configuration for the form-field.
$sim-form-field-density-config: (
margin: (
default: 16px,
maximum: 24px,
minimum: 16px
)
) !default;
/// 主题颜色配置
@mixin sim-form-field-underline-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
$is-dark: map-get($config, is-dark);
$danger: map-get($config, danger);
}
/// 字体排版配置
@mixin sim-form-field-underline-typography($config-or-theme) {
$config: sim-get-typography-config($config-or-theme);
}
/// 密度配置
@mixin sim-form-field-underline-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
}
// Density configuration for the form-field.
$sim-form-field-density-config: (
margin: (
default: 16px,
maximum: 24px,
minimum: 16px
)
) !default;
/// 主题颜色配置
@mixin sim-form-field-fill-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
$is-dark: map-get($config, is-dark);
$danger: map-get($config, danger);
}
/// 字体排版配置
@mixin sim-form-field-fill-typography($config-or-theme) {
$config: sim-get-typography-config($config-or-theme);
}
/// 密度配置
@mixin sim-form-field-fill-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
}
$sim-form-field: unquote(sim-form-field);
/// 注册组件
@include sim-register-component($sim-form-field);
/// 主题风格
@mixin sim-form-field-theme($config-or-theme) {
@include sim-check-component-theme($config-or-theme, $sim-form-field) {
$color: sim-get-color-config($config-or-theme);
$density: sim-get-density-config($config-or-theme);
$typography: sim-get-typography-config($config-or-theme);
@if $color != null {
@include sim-form-field-color($color);
}
@if $density != null {
@include sim-form-field-density($density);
}
@if $typography != null {
@include sim-form-field-typography($typography);
}
}
}
/// 主题颜色配置
@mixin sim-form-field-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
$is-dark: map-get($config, is-dark);
$danger: map-get($config, danger);
.sim-form-field {
color: map-get($foreground, text);
background: map-get($foreground, background);
}
.sim-error {
color: sim-color($danger);
}
$label-color: map-get($foreground, secondary-text);
.sim-form-field-required .sim-form-field-required-marker {
color: sim-color($danger);
}
.sim-form-field-label,
.sim-hint {
color: $label-color;
}
.sim-form-field-type-sim-input {
@include _sim-form-field-type-sim-input($config);
}
@include sim-form-field-standard-color($config-or-theme);
@include sim-form-field-outline-color($config-or-theme);
@include sim-form-field-underline-color($config-or-theme);
@include sim-form-field-fill-color($config-or-theme);
}
@mixin _sim-form-field-type-sim-input($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$is-dark: map-get($theme, is-dark);
$primary: map-get($theme, primary);
$danger: map-get($theme, danger);
& .sim-form-field-control {
color: sim-color($foreground, text);
background-color: sim-color($background, card);
border-color: map-get($foreground, divider);
}
&.sim-form-field-focused .sim-form-field-control {
border-color: sim-color($primary);
}
&.sim-form-field-disabled .sim-form-field-control {
color: sim-color($foreground, disabled-text);
background-color: sim-color($background, disabled-button);
}
&.sim-form-field-invalid .sim-form-field-control {
border-color: sim-color($danger);
}
}
/// 字体排版配置
@mixin sim-form-field-typography($config-or-theme) {
$config: sim-get-typography-config($config-or-theme);
.sim-form-field {
@include sim-typography-level-to-styles($config, button);
}
@include sim-form-field-standard-typography($config-or-theme);
@include sim-form-field-outline-typography($config-or-theme);
@include sim-form-field-underline-typography($config-or-theme);
@include sim-form-field-fill-typography($config-or-theme);
}
/// 密度配置
@mixin sim-form-field-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
@include sim-form-field-standard-density($config-or-theme);
@include sim-form-field-outline-density($config-or-theme);
@include sim-form-field-underline-density($config-or-theme);
@include sim-form-field-fill-density($config-or-theme);
}
// Density configuration for the input.
$sim-input-density-config: (
radius: (
default: 4px,
minimum: 4px,
maximum: 6px
),
height: (
default: 32px,
minimum: 24px,
maximum: 40px
),
padding: (
default: 16px,
minimum: 8px,
maximum: 18px
),
font-size: (
default: 14px,
minimum: 12px,
maximum: 16px
)
) !default;
$sim-input: unquote(sim-input);
/// 注册组件
@include sim-register-component($sim-input);
/// 主题风格
@mixin sim-input-theme($config-or-theme) {
@include sim-check-component-theme($config-or-theme, $sim-input) {
$color: sim-get-color-config($config-or-theme);
$density: sim-get-density-config($config-or-theme);
$typography: sim-get-typography-config($config-or-theme);
@if $color != null {
@include sim-input-color($color);
}
@if $density != null {
@include sim-input-density($density);
}
@if $typography != null {
@include sim-input-typography($typography);
}
}
}
/// 主题颜色配置
@mixin sim-input-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
$is-dark: map-get($config, is-dark);
.sim-input:read-only {
color: sim-color($foreground, secondary-text);
background-color: sim-color($foreground, divider);
}
}
/// 字体排版配置
@mixin sim-input-typography($config-or-theme) {
$config: sim-get-typography-config($config-or-theme);
}
/// 密度配置
@mixin sim-input-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
input.sim-input {
@each $size, $scale in (small: minimum, medium: $density-scale, large: maximum) {
&.sim-#{$size} {
height: sim-density-prop-value($sim-input-density-config, $scale, height);
font-size: sim-density-prop-value($sim-input-density-config, $scale, font-size);
line-height: sim-density-prop-value($sim-input-density-config, $scale, height);
}
}
}
}
// Density configuration for the select.
$sim-select-density-config: (
radius: (
default: 4px,
minimum: 4px,
maximum: 6px
),
height: (
default: 32px,
minimum: 24px,
maximum: 40px
),
padding: (
default: 16px,
minimum: 8px,
maximum: 18px
)
) !default;
$sim-select: unquote(sim-select);
/// 注册组件
@include sim-register-component($sim-select);
/// 主题风格
@mixin sim-select-theme($config-or-theme) {
@include sim-check-component-theme($config-or-theme, $sim-select) {
$color: sim-get-color-config($config-or-theme);
$density: sim-get-density-config($config-or-theme);
$typography: sim-get-typography-config($config-or-theme);
@if $color != null {
@include sim-select-color($color);
}
@if $density != null {
@include sim-select-density($density);
}
@if $typography != null {
@include sim-select-typography($typography);
}
}
}
/// 主题颜色配置
@mixin sim-select-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
$is-dark: map-get($config, is-dark);
.sim-select-trigger {
// 从前景色对象获取text属性
color: sim-color($foreground, text);
// 从背景色对象获取background属性
background: sim-color($background, card);
border-color: sim-color($foreground, divider);
// 循环获取调色板对象
@each $type in (primary, secondary, info, success, warning, danger) {
$color: map-get($config, $type);
&.sim-#{$type} {
&:hover {
color: sim-color($color, default-contrast);
background-color: sim-color($color, default);
}
&:active {
color: sim-color($color, default-contrast);
background-color: sim-color($color, darker);
}
}
}
}
$primary: sim-color($config, 'primary');
$danger: sim-color($config, 'danger');
.sim-select-invalid .sim-select-trigger {
border-color: sim-color($danger);
}
.sim-select-value {
color: sim-color($foreground, text);
}
.sim-select-disabled .sim-select-trigger {
background: sim-color($foreground, disabled-button);
.sim-select-value {
color: sim-color($foreground, disabled-text);
}
}
.sim-select-readonly .sim-select-trigger {
background: sim-color($foreground, divider);
.sim-select-value {
color: sim-color($foreground, secondary-text);
}
}
.sim-select-panel {
background: sim-color($background, card);
@include sim-theme-overridable-elevation(4, $config);
.sim-option.sim-option-selected:not(.sim-option-multiple) {
background: sim-color($background, hover, 0.12);
}
}
}
/// 字体排版配置
@mixin sim-select-typography($config-or-theme) {
$config: sim-get-typography-config($config-or-theme);
.sim-select {
font: {
family: sim-font-family($config, body2);
size: sim-font-size($config, body2);
}
}
}
/// 密度配置
@mixin sim-select-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
.sim-select-trigger {
/// $size-scale-map: (small: minimum, large: maximum);
height: sim-density-prop-value($sim-select-density-config, $density-scale, height);
line-height: sim-density-prop-value($sim-select-density-config, $density-scale, height);
}
}
// Density configuration for the paginator.
$sim-paginator-density-config: (
height: (
default: 32px,
maximum: 40px,
minimum: 24px
)
) !default;
$sim-paginator: unquote(sim-paginator);
/// 注册组件
@include sim-register-component($sim-paginator);
/// 主题风格
@mixin sim-paginator-theme($config-or-theme) {
@include sim-check-component-theme($config-or-theme, $sim-paginator) {
$color: sim-get-color-config($config-or-theme);
$density: sim-get-density-config($config-or-theme);
$typography: sim-get-typography-config($config-or-theme);
@if $color != null {
@include sim-paginator-color($color);
}
@if $density != null {
@include sim-paginator-density($density);
}
@if $typography != null {
@include sim-paginator-typography($typography);
}
}
}
/// 主题颜色配置
@mixin sim-paginator-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
$is-dark: map-get($config, is-dark);
$primary: sim-color($config, primary);
.sim-paginator-item {
color: map-get($foreground, text);
background: map-get($background, card);
border-color: map-get($foreground, divider);
&:not(.sim-paginator-item-disabled):hover {
color: sim-color($primary);
border-color: sim-color($primary);
}
}
.sim-paginator-item-active {
color: sim-color($primary);
border-color: sim-color($primary);
}
.sim-paginator-item-disabled {
color: map-get($foreground, disabled-text);
}
.sim-paginator-page-jumper-input {
color: map-get($foreground, text);
background: map-get($background, card);
border-color: map-get($foreground, divider);
&:focus,
&:hover {
border-color: sim-color($primary);
}
}
}
/// 字体排版配置
@mixin sim-paginator-typography($config-or-theme) {
$config: sim-get-typography-config($config-or-theme);
.sim-paginator {
font: {
size: sim-font-size($config, body2);
}
}
}
/// 密度配置
@mixin sim-paginator-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
.sim-paginator {
@each $size, $scale in (small: minimum, medium: $density-scale, large: maximum) {
&.sim-#{$size} {
$height: sim-density-prop-value($sim-paginator-density-config, $scale, height);
.sim-paginator-label {
height: $height;
line-height: $height;
}
.sim-paginator-item {
min-width: $height;
height: $height;
line-height: $height;
}
}
}
}
}
// Density configuration for the radio.
$sim-radio-density-config: (
size: (
default: 16px,
minimum: 16px,
maximum: 16px
)
) !default;
$sim-radio: unquote(sim-radio);
/// 注册组件
@include sim-register-component($sim-radio);
/// 主题风格
@mixin sim-radio-theme($config-or-theme) {
@include sim-check-component-theme($config-or-theme, $sim-radio) {
$color: sim-get-color-config($config-or-theme);
$density: sim-get-density-config($config-or-theme);
$typography: sim-get-typography-config($config-or-theme);
@if $color != null {
@include sim-radio-color($color);
}
@if $density != null {
@include sim-radio-density($density);
}
@if $typography != null {
@include sim-radio-typography($typography);
}
}
}
// 主题风格
@mixin sim-radio-color($config-or-theme) {
$theme: sim-get-color-config($config-or-theme);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$is-dark: map-get($theme, is-dark);
.sim-radio-outer-circle {
border-color: sim-color($foreground, secondary-text);
}
.sim-radio {
@each $type in (primary, secondary, info, success, warning, danger) {
$color: map-get($theme, $type);
&.sim-#{$type} {
@include _sim-radio-color($color);
}
}
&.sim-radio-disabled {
@include _sim-radio-disabled($foreground);
}
}
}
@mixin _sim-radio-color($palette) {
&.sim-radio-checked .sim-radio-outer-circle,
&:not(.sim-radio-disabled) .sim-radio-container:hover .sim-radio-outer-circle {
border-color: sim-color($palette);
}
.sim-radio-checked .sim-radio-container::after {
border-color: sim-color($palette);
}
&.sim-radio-checked .sim-radio-inner-circle {
background-color: sim-color($palette);
}
}
@mixin _sim-radio-disabled($foreground) {
.sim-radio-outer-circle,
&.sim-radio-checked .sim-radio-outer-circle {
border-color: sim-color($foreground, disabled);
}
.sim-radio-inner-circle,
&.sim-radio-checked .sim-radio-inner-circle {
background-color: sim-color($foreground, disabled);
}
.sim-radio-label-content {
color: sim-color($foreground, disabled);
}
}
/// 字体排版配置
@mixin sim-radio-typography($config-or-theme) {
$typography: sim-get-typography-config($config-or-theme);
}
/// 密度配置
@mixin sim-radio-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
$size: sim-density-prop-value($sim-radio-density-config, $density-scale, size);
.sim-radio-container {
width: $size;
height: $size;
}
}
// Density configuration for the checkbox.
$sim-checkbox-density-config: (
size: (
default: 16px,
maximum: 16px,
minimum: 16px
)
) !default;
$sim-checkbox: unquote(sim-checkbox);
/// 注册组件
@include sim-register-component($sim-checkbox);
/// 主题风格
@mixin sim-checkbox-theme($config-or-theme) {
@include sim-check-component-theme($config-or-theme, $sim-checkbox) {
$color: sim-get-color-config($config-or-theme);
$density: sim-get-density-config($config-or-theme);
$typography: sim-get-typography-config($config-or-theme);
@if $color != null {
@include sim-checkbox-color($color);
}
@if $density != null {
@include sim-checkbox-density($density);
}
@if $typography != null {
@include sim-checkbox-typography($typography);
}
}
}
/// 主题颜色配置
@mixin sim-checkbox-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
$is-dark: map-get($config, is-dark);
.sim-checkbox-background {
border-color: sim-color($foreground, secondary-text);
}
.sim-checkbox-mixedmark {
border-color: sim-color($background, background);
}
.sim-checkbox {
// 循环获取调色板对象
@each $type in (primary, secondary, info, success, warning, danger) {
$color: map-get($config, $type);
&.sim-#{$type} {
@include _sim-checkbox-color($color);
}
}
&.sim-checkbox-disabled {
@include _sim-checkbox-disabled($foreground);
}
}
}
@mixin _sim-checkbox-color($palette) {
&.sim-checkbox-indeterminate,
&.sim-checkbox-checked {
.sim-checkbox-container::after {
border-color: sim-color($palette);
}
}
&.sim-checkbox-checked {
.sim-checkbox-background {
background-color: sim-color($palette);
border-color: sim-color($palette);
}
}
&.sim-checkbox-indeterminate {
.sim-checkbox-background {
background-color: transparent;
border-color: sim-color($palette);
}
.sim-checkbox-mixedmark {
border-color: sim-color($palette);
}
}
&:not(.sim-checkbox-disabled) .sim-checkbox-container:hover .sim-checkbox-background {
border-color: sim-color($palette);
}
}
@mixin _sim-checkbox-disabled($foreground) {
&.sim-checkbox-checked,
&.sim-checkbox-indeterminate {
.sim-checkbox-background {
background-color: sim-color($foreground, disabled);
border-color: sim-color($foreground, disabled);
}
.sim-checkbox-mixedmark {
border-color: sim-color($foreground, disabled);
}
}
&:not(.sim-checkbox-checked) {
.sim-checkbox-background {
border-color: sim-color($foreground, disabled);
}
}
.sim-checkbox-label-content {
color: sim-color($foreground, secondary-text);
}
}
/// 字体排版配置
@mixin sim-checkbox-typography($config-or-theme) {
$config: sim-get-typography-config($config-or-theme);
.sim-checkbox {
font: {
family: sim-font-family($config, body2);
size: sim-font-size($config, body2);
}
}
}
/// 密度配置
@mixin sim-checkbox-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
$size: sim-density-prop-value($sim-checkbox-density-config, $density-scale, size);
.sim-checkbox-container {
width: $size;
height: $size;
}
}
// Density configuration for the tree.
$sim-tree-density-config: (
height: (
default: 24px,
maximum: 48px,
minimum: 24px
)
) !default;
$sim-tree: unquote(sim-tree);
/// 注册组件
@include sim-register-component($sim-tree);
/// 主题风格
@mixin sim-tree-theme($config-or-theme) {
@include sim-check-component-theme($config-or-theme, $sim-tree) {
$color: sim-get-color-config($config-or-theme);
$density: sim-get-density-config($config-or-theme);
$typography: sim-get-typography-config($config-or-theme);
@if $color != null {
@include sim-tree-color($color);
}
@if $density != null {
@include sim-tree-density($density);
}
@if $typography != null {
@include sim-tree-typography($typography);
}
}
}
/// 主题颜色配置
@mixin sim-tree-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
$is-dark: map-get($config, is-dark);
$primary: map-get($config, primary);
.sim-tree-node-disabled .sim-tree-node-content {
color: sim-color($foreground, disabled);
cursor: default;
}
.sim-tree-node:not(.sim-tree-node-disabled) {
.sim-tree-node-content:hover {
background: sim-color($background, hover);
}
.sim-tree-node-selected {
background: sim-color($primary, 0.24);
&:hover {
background: sim-color($primary, 0.24);
}
}
}
}
/// 字体排版配置
@mixin sim-tree-typography($config-or-theme) {
$config: sim-get-typography-config($config-or-theme);
}
/// 密度配置
@mixin sim-tree-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
}
// Density configuration for the drawer.
$sim-drawer-density-config: () !default;
$sim-drawer: unquote(sim-drawer);
/// 注册组件
@include sim-register-component($sim-drawer);
/// 主题风格
@mixin sim-drawer-theme($config-or-theme) {
@include sim-check-component-theme($config-or-theme, $sim-drawer) {
$color: sim-get-color-config($config-or-theme);
$density: sim-get-density-config($config-or-theme);
$typography: sim-get-typography-config($config-or-theme);
@if $color != null {
@include sim-drawer-color($color);
}
@if $density != null {
@include sim-drawer-density($density);
}
@if $typography != null {
@include sim-drawer-typography($typography);
}
}
}
/// 主题颜色配置
@mixin sim-drawer-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
$is-dark: map-get($config, is-dark);
$drawer-background-color: sim-color($background, dialog);
$drawer-container-background-color: sim-color($background, background);
$drawer-push-background-color: sim-color($background, dialog);
$drawer-side-border: solid 1px sim-color($foreground, divider);
.sim-drawer-container {
color: sim-color($foreground, text);
background-color: $drawer-container-background-color;
}
.sim-drawer {
color: sim-color($foreground, text);
background-color: $drawer-background-color;
&.sim-drawer-push {
background-color: $drawer-push-background-color;
}
&:not(.sim-drawer-side) {
@include sim-theme-elevation(16, $config);
}
}
.sim-drawer-side {
border-right: $drawer-side-border;
&.sim-drawer-end {
border-right: none;
border-left: $drawer-side-border;
}
}
.sim-drawer-stack.sim-drawer-end:not(:last-of-type) {
border-right: none;
border-left: $drawer-side-border;
}
.sim-drawer-stack.sim-drawer-start:not(:last-of-type) {
border-right: $drawer-side-border;
border-left: none;
}
.sim-drawer-backdrop.sim-drawer-shown {
$opacity: 0.38;
$backdrop-color: sim-color($background, card, $opacity);
@if (type-of($backdrop-color) == color) {
background-color: invert($backdrop-color);
} @else {
background-color: $backdrop-color;
opacity: $opacity;
}
}
}
/// 字体排版配置
@mixin sim-drawer-typography($config-or-theme) {
$config: sim-get-typography-config($config-or-theme);
.sim-drawer {
font: {
family: sim-font-family($config, body2);
size: sim-font-size($config, body2);
}
}
}
/// 密度配置
@mixin sim-drawer-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
}
// Density configuration for the chip.
$sim-chip-density-config: (
margin: (
default: 16px,
maximum: 24px,
minimum: 16px
)
) !default;
$sim-chips: unquote(sim-chips);
/// 注册组件
@include sim-register-component($sim-chips);
/// 主题风格
@mixin sim-chips-theme($config-or-theme) {
@include sim-check-component-theme($config-or-theme, $sim-chips) {
$color: sim-get-color-config($config-or-theme);
$density: sim-get-density-config($config-or-theme);
$typography: sim-get-typography-config($config-or-theme);
@if $color != null {
@include sim-chips-color($color);
}
@if $density != null {
@include sim-chips-density($density);
}
@if $typography != null {
@include sim-chips-typography($typography);
}
}
}
/// 主题颜色配置
@mixin sim-chips-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
$is-dark: map-get($config, is-dark);
.sim-chip {
color: sim-color($foreground, text);
background: sim-color($background, unselected-chip, 0.24);
border-color: sim-color($foreground, divider);
@include _sim-chip-theme($config);
&.sim-chip-selectable {
color: sim-color($foreground, text);
background: transparent;
border-color: transparent;
@include _sim-chip-selectable($config);
}
&.sim-chip-disabled {
opacity: 0.4;
}
.sim-chip-remove {
color: sim-color($foreground, icon);
opacity: 0.4;
}
}
}
@mixin _sim-chip-theme($theme) {
@each $type in (primary, secondary, info, success, warning, danger) {
$color: map-get($theme, $type);
&.sim-#{$type} {
color: sim-color($color, text);
background: sim-color($color, 0.12);
border-color: sim-color($color, 0.24);
}
}
}
@mixin _sim-chip-selectable($theme) {
&:hover {
@each $type in (primary, secondary, info, success, warning, danger) {
$color: map-get($theme, $type);
&.sim-#{$type} {
color: sim-color($color);
}
}
}
&.sim-chip-selected {
@each $type in (primary, secondary, info, success, warning, danger) {
$color: map-get($theme, $type);
&.sim-#{$type} {
color: sim-color($color, default-contrast);
background: sim-color($color);
}
}
}
}
/// 字体排版配置
@mixin sim-chips-typography($config-or-theme) {
$config: sim-get-typography-config($config-or-theme);
.sim-chip-standard {
font-weight: sim-font-weight($config, body2);
font-size: sim-font-size($config, body2);
}
.sim-chip-tag {
font-size: sim-font-size($config, caption);
}
}
/// 密度配置
@mixin sim-chips-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
}
// Density configuration for the datepicker.
$sim-datepicker-density-config: (
margin: (
default: 16px,
maximum: 24px,
minimum: 16px
)
) !default;
$sim-datepicker: unquote(sim-datepicker);
/// 注册组件
@include sim-register-component($sim-datepicker);
$sim-datepicker-selected-today-box-shadow-width: 1px;
$sim-datepicker-selected-fade-amount: 0.6;
$sim-datepicker-range-fade-amount: 0.2;
$sim-datepicker-today-fade-amount: 0.2;
$sim-calendar-body-font-size: 13px !default;
$sim-calendar-weekday-table-font-size: 11px !default;
/// 主题风格
@mixin sim-datepicker-theme($config-or-theme) {
@include sim-check-component-theme($config-or-theme, $sim-datepicker) {
$color: sim-get-color-config($config-or-theme);
$density: sim-get-density-config($config-or-theme);
$typography: sim-get-typography-config($config-or-theme);
@if $color != null {
@include sim-datepicker-color($color);
}
@if $density != null {
@include sim-datepicker-density($density);
}
@if $typography != null {
@include sim-datepicker-typography($typography);
}
}
}
/// 主题颜色配置
@mixin sim-datepicker-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
$is-dark: map-get($config, is-dark);
.sim-datepicker-content {
@include sim-theme-elevation(4, $config);
color: sim-color($foreground, text);
background-color: sim-color($background, card);
@each $type in (primary, secondary, info, success, warning, danger) {
&.sim-#{$type} {
@include _sim-datepicker-color(map-get($config, $type));
}
}
}
.sim-calendar-body-in-preview {
$divider-color: sim-color($foreground, divider);
@if type-of($divider-color) == color {
color: rgba($divider-color, min(opacity($divider-color) * 2, 1));
} @else {
color: $divider-color;
}
}
.sim-calendar-controls .sim-icon-button {
color: sim-color($foreground, hint-text);
}
.sim-calendar-body-cell-content,
.sim-date-range-input-separator {
color: sim-color($foreground, text);
border-color: transparent;
}
.sim-calendar-previous-month-cell .sim-calendar-body-cell-content,
.sim-calendar-next-month-cell .sim-calendar-body-cell-content {
color: sim-color($foreground, hint-text);
}
.sim-calendar-body-disabled > .sim-calendar-body-cell-content:not(.sim-calendar-body-selected),
.sim-form-field-disabled .sim-date-range-input-separator {
color: sim-color($foreground, disabled-text);
}
.sim-calendar-table-header-divider::after {
background: sim-color($foreground, divider);
}
.sim-calendar-body-today:not(.sim-calendar-body-selected) {
border-color: sim-color($foreground, hint-text);
}
.sim-calendar-body-cell:not(.sim-calendar-body-disabled):hover,
.cdk-keyboard-focused .sim-calendar-body-active,
.cdk-program-focused .sim-calendar-body-active {
& > .sim-calendar-body-cell-content:not(.sim-calendar-body-selected) {
background-color: sim-color($background, hover);
}
}
.sim-form-field-type-sim-date-range-input {
@include _sim-form-field-type-sim-input($config);
}
}
@mixin _sim-datepicker-color($palette) {
@include sim-date-range-colors(sim-color($palette, default, $sim-datepicker-range-fade-amount));
.sim-calendar-body-selected {
color: sim-color($palette, default-contrast);
background-color: sim-color($palette);
}
.sim-calendar-body-disabled > .sim-calendar-body-selected {
$background: sim-color($palette);
@if (type-of($background) == color) {
background-color: fade-out($background, $sim-datepicker-selected-fade-amount);
} @else {
opacity: $sim-datepicker-today-fade-amount;
}
}
.sim-calendar-body-today.sim-calendar-body-selected {
box-shadow: inset 0 0 0 $sim-datepicker-selected-today-box-shadow-width sim-color($palette, default-contrast);
}
}
@mixin sim-date-range-colors(
$range-color,
$comparison-color: rgba(#f9ab00, $sim-datepicker-range-fade-amount),
$overlap-color: #a8dab5,
$overlap-selected-color: darken($overlap-color, 30%)
) {
.sim-calendar-body-in-range.sim-calendar-cell-in-view::before {
background: $range-color;
}
.sim-calendar-body-in-comparison-range.sim-calendar-cell-in-view::before {
background: $comparison-color;
}
.sim-calendar-body-comparison-bridge-start::before {
background: linear-gradient(to right, $range-color 50%, $comparison-color 50%);
}
.sim-calendar-body-comparison-bridge-end::before {
background: linear-gradient(to left, $range-color 50%, $comparison-color 50%);
}
.sim-calendar-body-in-comparison-range.sim-calendar-body-in-range::after {
background: $overlap-color;
}
.sim-calendar-body-in-comparison-range > .sim-calendar-body-selected {
background: $overlap-selected-color;
}
}
/// 字体排版配置
@mixin sim-datepicker-typography($config-or-theme) {
$config: sim-get-typography-config($config-or-theme);
.sim-datepicker {
font: {
family: sim-font-family($config, body2);
size: sim-font-size($config, body2);
}
}
}
/// 密度配置
@mixin sim-datepicker-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
.sim-date-range-input {
@each $size, $scale in (small: minimum, medium: $density-scale, large: maximum) {
&.sim-#{$size} {
height: sim-density-prop-value($sim-input-density-config, $scale, height);
font-size: sim-density-prop-value($sim-input-density-config, $scale, font-size);
line-height: sim-density-prop-value($sim-input-density-config, $scale, height);
}
}
}
}
// Density configuration for the table.
$sim-table-density-config: (
radius: (
default: 4px,
minimum: 4px,
maximum: 6px
),
height: (
default: 32px,
minimum: 24px,
maximum: 40px
),
padding: (
default: 12px,
minimum: 8px,
maximum: 16px
)
) !default;
$sim-table: unquote(sim-table);
/// 注册组件
@include sim-register-component($sim-table);
/// 主题风格
@mixin sim-table-theme($config-or-theme) {
@include sim-check-component-theme($config-or-theme, $sim-table) {
$color: sim-get-color-config($config-or-theme);
$density: sim-get-density-config($config-or-theme);
$typography: sim-get-typography-config($config-or-theme);
@if $color != null {
@include sim-table-color($color);
}
@if $density != null {
@include sim-table-density($density);
}
@if $typography != null {
@include sim-table-typography($typography);
}
}
}
/// 主题颜色配置
@mixin sim-table-color($config-or-theme) {
$config: sim-get-color-config($config-or-theme);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
$is-dark: map-get($config, is-dark);
$divider: sim-color($foreground, divider);
.sim-table,
.sim-table-data {
background: sim-color($background, 'card');
}
.sim-table-header-cell {
color: sim-color($foreground, secondary-text);
background-color: sim-color($background, background);
}
.sim-table-cell,
.sim-table-footer-cell {
color: sim-color($foreground, text);
}
.sim-table-header-cell,
.sim-table-cell,
.sim-table-footer-cell {
border-bottom-color: sim-color($foreground, divider);
}
.sim-table-bordered,
.sim-table-bordered .sim-table-header-cell,
.sim-table-bordered .sim-table-cell {
border-color: $divider;
}
.sim-table-row:hover > .sim-table-cell {
background-color: sim-color($background, hover);
}
.sim-table-striped .sim-table-row:nth-of-type(even) {
background-color: sim-color($background, hover);
}
}
/// 字体排版配置
@mixin sim-table-typography($config-or-theme) {
$config: sim-get-typography-config($config-or-theme);
.sim-table-header-cell {
font-weight: sim-font-weight($config, body2);
font-size: sim-font-size($config, body2);
}
.sim-table-cell,
.sim-table-footer-cell {
font-size: sim-font-size($config, body1);
}
}
/// 密度配置
@mixin sim-table-density($config-or-theme) {
$density-scale: sim-get-density-config($config-or-theme);
.sim-table-header-cell,
.sim-table-cell,
.sim-table-footer-cell {
padding: sim-density-prop-value($sim-table-density-config, $density-scale, padding);
}
}
/// @import component.theme
/// 组件结束
@mixin simple-ui-components-theme($config-or-theme) {
@include sim-divider-theme($config-or-theme);
@include sim-button-theme($config-or-theme);
@include sim-card-theme($config-or-theme);
@include sim-skeleton-theme($config-or-theme);
@include sim-tabs-theme($config-or-theme);
@include sim-icon-theme($config-or-theme);
@include sim-tooltip-theme($config-or-theme);
@include sim-button-toggle-theme($config-or-theme);
@include sim-alert-theme($config-or-theme);
@include sim-dialog-theme($config-or-theme);
@include sim-nprogress-theme($config-or-theme);
@include sim-spinner-theme($config-or-theme);
@include sim-empty-theme($config-or-theme);
@include sim-option-theme($config-or-theme);
@include sim-dropdown-theme($config-or-theme);
@include sim-pseudo-checkbox-theme($config-or-theme);
@include sim-expansion-theme($config-or-theme);
@include sim-status-theme($config-or-theme);
@include sim-switch-theme($config-or-theme);
@include sim-sort-theme($config-or-theme);
@include sim-toast-theme($config-or-theme);
@include sim-form-field-theme($config-or-theme);
@include sim-input-theme($config-or-theme);
@include sim-select-theme($config-or-theme);
@include sim-paginator-theme($config-or-theme);
@include sim-radio-theme($config-or-theme);
@include sim-checkbox-theme($config-or-theme);
@include sim-tree-theme($config-or-theme);
@include sim-drawer-theme($config-or-theme);
@include sim-chips-theme($config-or-theme);
@include sim-datepicker-theme($config-or-theme);
@include sim-table-theme($config-or-theme);
/// @include component.theme
}
/// 将组件注册到已知组件列表中
/// @param {Object} $theme-config - 主题配置
/// --------------- $color - 颜色系统
/// --------------- $typography - 排版系统
/// --------------- $density - 布局系统
/// @param {String} $schema - 主题模式 light | dark
/// @param {String[]} $exclude - 排除组件 用于自定义组件主题 如果不使用该组件也可以使用此方法排除
@mixin simple-ui-theme($theme-config, $schema: 'light', $exclude: ()) {
/// 获取字体排版配置
$typography: if(_sim-is-theme-object($theme-config), sim-get-typography-config($theme-config), sim-typography-config());
$density: if(_sim-is-theme-object($theme-config), sim-get-density-config($theme-config), 0);
/// 获取主题颜色配置
$color: if(_sim-is-theme-object($theme-config), sim-get-color-config($theme-config), sim-color-theme((), $schema));
// 存储所有排除的组件样式
$excluded: ();
@if length($exclude) > 0 {
$excluded: is-component($exclude);
}
@if length($excluded) > 0 {
@warn unquote('You have excluded the following components from the theme: "#{$excluded}".'+
' You can now add your own themes for the excluded components.');
}
@if $density == null {
@error 'No density configuration specified.';
}
$theme-or-config: (
color: $color,
density: $density,
typography: $typography
);
@include simple-ui-core-theme($theme-or-config);
@include simple-ui-components-theme($theme-or-config);
}