630 lines
14 KiB
SCSS
630 lines
14 KiB
SCSS
|
|
// Typography 排版
|
|
|
|
@mixin typo-preferred-font($usePreferred: true) {
|
|
@if $usePreferred {
|
|
font-family: $preferred_font;
|
|
}
|
|
}
|
|
|
|
@mixin typo-display-4($colorContrast: false, $usePreferred: true) {
|
|
@include typo-preferred-font($usePreferred);
|
|
font-size: 112/10 * $unit;
|
|
font-weight: 300;
|
|
line-height: 1;
|
|
letter-spacing: -0.04em;
|
|
|
|
@if $colorContrast {
|
|
opacity: 0.54;
|
|
}
|
|
}
|
|
|
|
@mixin typo-display-3($colorContrast: false, $usePreferred: true) {
|
|
@include typo-preferred-font($usePreferred);
|
|
font-size: 56/10 * $unit;
|
|
font-weight: 400;
|
|
line-height: 1.35;
|
|
letter-spacing: -0.02em;
|
|
|
|
@if $colorContrast {
|
|
opacity: 0.54;
|
|
}
|
|
}
|
|
|
|
@mixin typo-display-2($colorContrast: false, $usePreferred: true) {
|
|
@include typo-preferred-font($usePreferred);
|
|
font-size: 45/10 * $unit;
|
|
font-weight: 400;
|
|
line-height: 48/10 * $unit;
|
|
|
|
@if $colorContrast {
|
|
opacity: 0.54;
|
|
}
|
|
}
|
|
|
|
@mixin typo-display-1($colorContrast: false, $usePreferred: true) {
|
|
@include typo-preferred-font($usePreferred);
|
|
font-size: 34/10 * $unit;
|
|
font-weight: 400;
|
|
line-height: 40/10 * $unit;
|
|
|
|
@if $colorContrast {
|
|
opacity: 0.54;
|
|
}
|
|
}
|
|
|
|
@mixin typo-headline($colorContrast: false, $usePreferred: true) {
|
|
@include typo-preferred-font($usePreferred);
|
|
font-size: 24/10 * $unit;
|
|
font-weight: 400;
|
|
line-height: 32/10 * $unit;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
|
@if $colorContrast {
|
|
opacity: 0.87;
|
|
}
|
|
}
|
|
|
|
@mixin typo-title($colorContrast: false, $usePreferred: true) {
|
|
@include typo-preferred-font($usePreferred);
|
|
font-size: 20/10 * $unit;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0.02em;
|
|
|
|
@if $colorContrast {
|
|
opacity: 0.87;
|
|
}
|
|
}
|
|
|
|
@mixin typo-subhead($colorContrast: false, $usePreferred: true) {
|
|
@include typo-preferred-font($usePreferred);
|
|
font-size: 16/10 * $unit;
|
|
font-weight: 400;
|
|
line-height: 24/10 * $unit;
|
|
letter-spacing: 0.04em;
|
|
|
|
@if $colorContrast {
|
|
opacity: 0.87;
|
|
}
|
|
}
|
|
|
|
@mixin typo-subhead-2($colorContrast: false, $usePreferred: true) {
|
|
@include typo-preferred-font($usePreferred);
|
|
font-size: 16/10 * $unit;
|
|
font-weight: 400;
|
|
line-height: 28/10 * $unit;
|
|
letter-spacing: 0.04em;
|
|
|
|
@if $colorContrast {
|
|
opacity: 0.87;
|
|
}
|
|
}
|
|
|
|
@mixin typo-body-2($colorContrast: false, $usePreferred: false) {
|
|
@include typo-preferred-font($usePreferred);
|
|
font-size: 14/10 * $unit;
|
|
@if $usePreferred {
|
|
font-weight: 500;
|
|
} @else {
|
|
font-weight: bold;
|
|
}
|
|
line-height: 24/10 * $unit;
|
|
letter-spacing: 0;
|
|
|
|
@if $colorContrast {
|
|
opacity: 0.87;
|
|
}
|
|
}
|
|
|
|
@mixin typo-body-1($colorContrast: false, $usePreferred: false) {
|
|
@include typo-preferred-font($usePreferred);
|
|
font-size: 14/10 * $unit;
|
|
font-weight: 400;
|
|
line-height: 24/10 * $unit;
|
|
letter-spacing: 0;
|
|
|
|
@if $colorContrast {
|
|
opacity: 0.87;
|
|
}
|
|
}
|
|
|
|
@mixin typo-caption($colorContrast: false, $usePreferred: false) {
|
|
@include typo-preferred-font($usePreferred);
|
|
font-size: 12/10 * $unit;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: 0;
|
|
|
|
@if $colorContrast {
|
|
opacity: 0.54;
|
|
}
|
|
}
|
|
|
|
@mixin typo-blockquote($colorContrast: false, $usePreferred: true) {
|
|
@include typo-preferred-font($usePreferred);
|
|
position: relative;
|
|
font-size: 24/10 * $unit;
|
|
font-weight: 300;
|
|
font-style: italic;
|
|
line-height: 1.35;
|
|
letter-spacing: 0.08em;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
left: -0.5em;
|
|
content: '“';
|
|
}
|
|
|
|
&:after {
|
|
content: '”';
|
|
margin-left: -0.05em;
|
|
}
|
|
|
|
@if $colorContrast {
|
|
opacity: 0.54;
|
|
}
|
|
}
|
|
|
|
@mixin typo-menu($colorContrast: false, $usePreferred: true) {
|
|
@include typo-preferred-font($usePreferred);
|
|
font-size: 14/10 * $unit;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
letter-spacing: 0;
|
|
|
|
@if $colorContrast {
|
|
opacity: 0.87;
|
|
}
|
|
}
|
|
|
|
@mixin typo-button($colorContrast: false, $usePreferred: true) {
|
|
@include typo-preferred-font($usePreferred);
|
|
font-size: 14/10 * $unit;
|
|
font-weight: 500;
|
|
// text-transform: uppercase;
|
|
line-height: 1;
|
|
letter-spacing: 0;
|
|
|
|
@if $colorContrast {
|
|
opacity: 0.87;
|
|
}
|
|
}
|
|
|
|
// Shadows
|
|
|
|
// Focus shadow mixin.
|
|
@mixin focus-shadow() {
|
|
box-shadow: 0 0 8/10 * $unit rgba(0,0,0,.18),0 8/10 * $unit 16/10 * $unit rgba(0,0,0,.36);
|
|
}
|
|
|
|
@mixin shadow-0dp() {
|
|
box-shadow: none;
|
|
}
|
|
|
|
@mixin shadow-2dp() {
|
|
box-shadow: 0 2/10 * $unit 2/10 * $unit 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
|
0 3/10 * $unit 1/10 * $unit -2/10 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity),
|
|
0 1/10 * $unit 5/10 * $unit 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
|
|
box-shadow: 0 2/10 * $unit 2/10 * $unit 0 rgb(0, 0, 0),
|
|
0 3/10 * $unit 1/10 * $unit -2/10 * $unit rgb(0, 0, 0),
|
|
0 1/10 * $unit 5/10 * $unit 0 rgb(0, 0, 0) \9;
|
|
}
|
|
@mixin shadow-3dp() {
|
|
box-shadow: 0 3/10 * $unit 4/10 * $unit 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
|
0 3/10 * $unit 3/10 * $unit -2/10 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity),
|
|
0 1/10 * $unit 8/10 * $unit 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
|
|
}
|
|
@mixin shadow-4dp() {
|
|
box-shadow: 0 4/10 * $unit 5/10 * $unit 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
|
0 1/10 * $unit 10/10 * $unit 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
|
|
0 2/10 * $unit 4/10 * $unit -1/10 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
|
}
|
|
@mixin shadow-6dp() {
|
|
box-shadow: 0 6/10 * $unit 10/10 * $unit 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
|
0 1/10 * $unit 18/10 * $unit 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
|
|
0 3/10 * $unit 5/10 * $unit -1/10 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
|
}
|
|
@mixin shadow-8dp() {
|
|
box-shadow: 0 8/10 * $unit 10/10 * $unit 1/10 * $unit rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
|
0 3/10 * $unit 14/10 * $unit 2/10 * $unit rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
|
|
0 5/10 * $unit 5/10 * $unit -3/10 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
|
}
|
|
|
|
@mixin shadow-16dp() {
|
|
box-shadow: 0 16/10 * $unit 24/10 * $unit 2/10 * $unit rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
|
0 6/10 * $unit 30/10 * $unit 5/10 * $unit rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
|
|
0 8/10 * $unit 10/10 * $unit -5/10 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
|
}
|
|
|
|
@mixin shadow-24dp() {
|
|
box-shadow: 0 9/10 * $unit 46/10 * $unit 8/10 * $unit rgba(0, 0, 0, $shadow-key-penumbra-opacity),
|
|
0 11/10 * $unit 15/10 * $unit -7/10 * $unit rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
|
|
0 24/10 * $unit 38/10 * $unit 3/10 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity);
|
|
}
|
|
|
|
//Animations
|
|
|
|
@mixin material-animation-fast-out-slow-in($duration:0.2s) {
|
|
transition-duration: $duration;
|
|
transition-timing-function: $animation-curve-fast-out-slow-in;
|
|
}
|
|
|
|
@mixin material-animation-linear-out-slow-in($duration:0.2s) {
|
|
transition-duration: $duration;
|
|
transition-timing-function: $animation-curve-linear-out-slow-in;
|
|
}
|
|
|
|
@mixin material-animation-fast-out-linear-in($duration:0.2s) {
|
|
transition-duration: $duration;
|
|
transition-timing-function: $animation-curve-fast-out-linear-in;
|
|
}
|
|
|
|
@mixin material-animation-default($duration:0.2s) {
|
|
transition-duration: $duration;
|
|
transition-timing-function: $animation-curve-default;
|
|
}
|
|
|
|
|
|
|
|
// Transitions
|
|
|
|
@mixin transition($transition) {
|
|
-webkit-transition: $transition;
|
|
-o-transition: $transition;
|
|
transition: $transition;
|
|
}
|
|
@mixin transition-property($transition-property) {
|
|
-webkit-transition-property: $transition-property;
|
|
transition-property: $transition-property;
|
|
}
|
|
@mixin transition-delay($transition-delay) {
|
|
-webkit-transition-delay: $transition-delay;
|
|
transition-delay: $transition-delay;
|
|
}
|
|
@mixin transition-duration($transition-duration) {
|
|
-webkit-transition-duration: $transition-duration;
|
|
transition-duration: $transition-duration;
|
|
}
|
|
@mixin transition-timing-function($timing-function) {
|
|
-webkit-transition-timing-function: $timing-function;
|
|
transition-timing-function: $timing-function;
|
|
}
|
|
@mixin transition-transform($transition) {
|
|
-webkit-transition: -webkit-transform $transition;
|
|
-moz-transition: -moz-transform $transition;
|
|
-o-transition: -o-transform $transition;
|
|
transition: transform $transition;
|
|
}
|
|
|
|
//添加圆角
|
|
@mixin border-top-radius($radius) {
|
|
border-top-right-radius: $radius;
|
|
border-top-left-radius: $radius;
|
|
}
|
|
@mixin border-right-radius($radius) {
|
|
border-bottom-right-radius: $radius;
|
|
border-top-right-radius: $radius;
|
|
}
|
|
@mixin border-bottom-radius($radius) {
|
|
border-bottom-right-radius: $radius;
|
|
border-bottom-left-radius: $radius;
|
|
}
|
|
@mixin border-left-radius($radius) {
|
|
border-bottom-left-radius: $radius;
|
|
border-top-left-radius: $radius;
|
|
}
|
|
//边框按钮颜色
|
|
@mixin border-button-styles-variant($text-color,$bg-color,$bg-hover-color,$bg-active-color) {
|
|
|
|
color: $text-color;
|
|
background-color: #fff;
|
|
border:1px $bg-color solid;
|
|
|
|
&:hover {
|
|
background-color: $bg-hover-color;
|
|
border-color: $bg-hover-color;
|
|
color:#fff;
|
|
}
|
|
|
|
&.focus, &:focus{
|
|
color: $text-color;
|
|
background-color: #fff;
|
|
border-color: $bg-color;
|
|
}
|
|
|
|
&.active, &:active {
|
|
color:#fff;
|
|
background-color: $bg-active-color;
|
|
border-color: $bg-active-color;
|
|
}
|
|
}
|
|
//按钮颜色
|
|
@mixin timeline-styles-variant($border-color) {
|
|
border-color: $border-color;
|
|
color: $border-color;
|
|
}
|
|
//按钮颜色
|
|
@mixin button-styles-variant($text-color,$bg-color,$bg-hover-color,$bg-active-color) {
|
|
|
|
color: $text-color;
|
|
background-color: $bg-color;
|
|
border:1px $bg-color solid;
|
|
|
|
&:hover {
|
|
background-color: $bg-hover-color;
|
|
border-color: $bg-hover-color;
|
|
}
|
|
|
|
&.focus, &:focus{
|
|
background-color: $bg-color;
|
|
border-color: $bg-color;
|
|
}
|
|
|
|
&.active, &:active {
|
|
background-color: $bg-active-color;
|
|
border-color: $bg-active-color;
|
|
}
|
|
}
|
|
|
|
//按钮尺寸
|
|
@mixin button-size($padding-y, $padding-x, $font-size) {
|
|
padding: $padding-y $padding-x;
|
|
font-size: $font-size;
|
|
}
|
|
|
|
//徽章
|
|
@mixin badge-variant($color, $bg) {
|
|
color: $color;
|
|
background-color: $bg;
|
|
|
|
&[href] {
|
|
&:hover,
|
|
&:focus {
|
|
color: $color;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//标签
|
|
|
|
@mixin tag-styles-variant($color, $hover-color) {
|
|
background-color: $color;
|
|
|
|
&[href] {
|
|
&:hover,
|
|
&:focus {
|
|
background-color: $hover-color;
|
|
}
|
|
}
|
|
|
|
&.u-tag-outline {
|
|
color: $color;
|
|
background-color: transparent;
|
|
border-color: $color;
|
|
}
|
|
}
|
|
|
|
|
|
// 分页
|
|
|
|
@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius, $width-size) {
|
|
> li {
|
|
> a {
|
|
padding: $padding-vertical $padding-horizontal;
|
|
font-size: $font-size;
|
|
line-height: $line-height;
|
|
}
|
|
&:first-child {
|
|
> a{
|
|
@include border-left-radius($border-radius);
|
|
}
|
|
}
|
|
&:last-child {
|
|
> a{
|
|
@include border-right-radius($border-radius);
|
|
}
|
|
}
|
|
}
|
|
>li[role="gap"]{
|
|
> a {
|
|
padding: $padding-vertical+1px $padding-horizontal;
|
|
font-size: $font-size;
|
|
line-height: $line-height;
|
|
}
|
|
}
|
|
> li.iconBtn > a {
|
|
&> i{
|
|
font-size: $font-size;
|
|
}
|
|
}
|
|
+ .u-pagination-total {
|
|
height: $width-size;
|
|
line-height: $width-size;
|
|
& + .data_per_select {
|
|
> span { line-height: $width-size; }
|
|
& + .page_jump > span {
|
|
line-height: $width-size;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//radio
|
|
|
|
@mixin radio-styles-variant($color) {
|
|
&.is-checked{
|
|
.u-radio-outer-circle{
|
|
border: 1px solid $color;
|
|
}
|
|
.u-radio-inner-circle{
|
|
background: $color;
|
|
}
|
|
}
|
|
|
|
}
|
|
//progress
|
|
|
|
@mixin progress-styles-variant($bg-color) {
|
|
background-color: $bg-color;
|
|
}
|
|
|
|
//alert
|
|
@mixin alert-styles-variant($bg-color,$text-color) {
|
|
background-color: $bg-color;
|
|
border-color: $bg-color;
|
|
color: $text-color;
|
|
}
|
|
|
|
//checkbox
|
|
|
|
@mixin checkbox-styles-variant($color) {
|
|
&.is-checked{
|
|
.u-checkbox-outline{
|
|
border: 1px solid $color;
|
|
}
|
|
.u-checkbox-tick-outline{
|
|
background: $color;
|
|
}
|
|
}
|
|
|
|
}
|
|
//switch colors
|
|
@mixin switch-styles-variant($color){
|
|
background: $color;
|
|
border: 1px solid $color;
|
|
}
|
|
|
|
//tooltips
|
|
|
|
@mixin tooltip-styles-variant($color) {
|
|
.tooltip-inner{
|
|
background-color:$color !important;
|
|
}
|
|
&.bottom .tooltip-arrow{
|
|
border-bottom-color:$color !important;
|
|
}
|
|
&.top .tooltip-arrow{
|
|
border-top-color:$color !important;
|
|
}
|
|
&.left .tooltip-arrow{
|
|
border-left-color:$color !important;
|
|
}
|
|
&.right .tooltip-arrow{
|
|
border-right-color:$color !important;
|
|
}
|
|
}
|
|
|
|
@mixin menu-styles-variant($color,$color-hover) {
|
|
.u-menu-item:hover{
|
|
background-color:$color-hover;
|
|
a{
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
}
|
|
.u-menu-item.active>a{
|
|
background-color:$color;
|
|
}
|
|
.u-menu-item:focus {
|
|
outline: none;
|
|
background-color: $color;
|
|
a{
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// utilities
|
|
// font-weight
|
|
@mixin font-weight-light(){
|
|
font-weight: $font-weight-light;
|
|
}
|
|
@mixin font-weight-normal(){
|
|
font-weight: $font-weight-normal;
|
|
}
|
|
@mixin font-weight-medium(){
|
|
font-weight: $font-weight-medium;
|
|
}
|
|
@mixin font-weight-bold(){
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
|
|
// text
|
|
@mixin text-truncate() {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
word-wrap: normal; //for IE
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@mixin text-break() {
|
|
-webkit-hyphens: auto;
|
|
-moz-hyphens: auto;
|
|
-ms-hyphens: auto;
|
|
hyphens: auto;
|
|
word-wrap: break-word;
|
|
white-space: normal;
|
|
}
|
|
|
|
@mixin text-nowrap() {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
|
|
// visibility
|
|
|
|
@mixin responsive-visibility() {
|
|
display: block !important;
|
|
table { display: table !important; }
|
|
tr { display: table-row !important; }
|
|
th ,
|
|
td { display: table-cell !important; }
|
|
}
|
|
|
|
@mixin responsive-invisibility() {
|
|
display: none !important;
|
|
}
|
|
|
|
|
|
|
|
@mixin center-block() {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
@mixin clearfix() {
|
|
&:before,
|
|
&:after {
|
|
content: " "; // 1
|
|
display: table; // 2
|
|
}
|
|
&:after {
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
|
|
@mixin hide-text() {
|
|
color: transparent;
|
|
text-shadow: none;
|
|
background-color: transparent;
|
|
border: 0;
|
|
}
|
|
|
|
@mixin text-hide() {
|
|
@include hide-text();
|
|
}
|
|
|
|
|
|
// nav
|
|
|
|
@mixin navbar-vertical-align($element-height) {
|
|
margin-top: (($navbar-height - $element-height) / 2);
|
|
margin-bottom: (($navbar-height - $element-height) / 2);
|
|
}
|
|
|