taro-material
Version:
Mini Program components that implement Google's Material Design.
2,443 lines (2,428 loc) • 847 kB
CSS
@charset "UTF-8";
/**
* Taro Material - Default variables
*/
/* Variables */
/**
* Default variables
*/
/**
* Mixes a color with white. It's different from lighten()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amout of white to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: tint(#6ecaa6 , 40%);
* }
*
* // CSS Output
* .element {
* background-color: #a8dfc9;
* }
*/
/* The Color of O2Team Brand */
/* Color */
/* Color Palette */
/* Text Color */
/* Link */
/* 背景色 */
/* 边框颜色 */
/* 图标颜色 */
/* Border Radius */
/* 透明度 */
/* Font */
/* Line Height */
/* 水平间距 */
/* 垂直间距 */
/* 图标尺寸 */
/* z-index */
/* timing function */
/**
* CSS cubic-bezier timing functions
* http://bourbon.io/docs/#timing-functions
*/
/**
* 组件变量
*/
/* Accordion */
/* Activity Indicator */
/* Avatar */
/* Badge */
/* Button */
/* Float Button */
/* Calendar */
/* Card */
/* Checkbox */
/* Countdown */
/* Curtain */
/* Divider */
/* Drawer */
/* FloatLayout */
/* Grid */
/* ImagePicker */
/* Indexes */
/* InputNumber */
/* Input */
/* List */
/* LoadMore */
/* Loading */
/* Message */
/* Modal */
/* NavBar */
/* NoticeBar */
/* Pagination */
/* Progress */
/* Radio */
/* Range */
/* Rate */
/* SearchBar */
/* SegmentedControl */
/* Slider */
/* Steps */
/* SwipeAction */
/* Switch */
/* TabBar */
/* Tabs */
/* Tag */
/* Textarea */
/* Timeline */
/* Mixin */
/**
* Mixins
*/
/* library */
/**
* 元素居中定位
*/
/**
* @example scss
*
* .element {
* @include clearfix;
* }
*
* // CSS Output
* .element::after {
* clear: both;
* content: '';
* display: block;
* }
*/
/**
* 通用的遮罩
*/
/**
* Mixes a color with black. It's different from darken()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amount of black to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: shade(#ffbb52, 60%);
* }
*
* // CSS Output
* .element {
* background-color: #664a20;
* }
*/
/**
* Mixes a color with white. It's different from lighten()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amout of white to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: tint(#6ecaa6 , 40%);
* }
*
* // CSS Output
* .element {
* background-color: #a8dfc9;
* }
*/
/* Flex Item */
/**
* 默认主题下 $color-border-light
*/
/**
* 点击态
*/
/**
* 禁止态
*/
/**
* 设置placeholder 颜色
*/
/**
* 默认主题下 $color-border-light
*/
/* Components */
/**
* Components
*/
/**
* Default variables
*/
/**
* Mixes a color with white. It's different from lighten()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amout of white to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: tint(#6ecaa6 , 40%);
* }
*
* // CSS Output
* .element {
* background-color: #a8dfc9;
* }
*/
/* The Color of O2Team Brand */
/* Color */
/* Color Palette */
/* Text Color */
/* Link */
/* 背景色 */
/* 边框颜色 */
/* 图标颜色 */
/* Border Radius */
/* 透明度 */
/* Font */
/* Line Height */
/* 水平间距 */
/* 垂直间距 */
/* 图标尺寸 */
/* z-index */
/* timing function */
/**
* CSS cubic-bezier timing functions
* http://bourbon.io/docs/#timing-functions
*/
/**
* 组件变量
*/
/* Accordion */
/* Activity Indicator */
/* Avatar */
/* Badge */
/* Button */
/* Float Button */
/* Calendar */
/* Card */
/* Checkbox */
/* Countdown */
/* Curtain */
/* Divider */
/* Drawer */
/* FloatLayout */
/* Grid */
/* ImagePicker */
/* Indexes */
/* InputNumber */
/* Input */
/* List */
/* LoadMore */
/* Loading */
/* Message */
/* Modal */
/* NavBar */
/* NoticeBar */
/* Pagination */
/* Progress */
/* Radio */
/* Range */
/* Rate */
/* SearchBar */
/* SegmentedControl */
/* Slider */
/* Steps */
/* SwipeAction */
/* Switch */
/* TabBar */
/* Tabs */
/* Tag */
/* Textarea */
/* Timeline */
/**
* Mixins
*/
/* library */
/**
* 元素居中定位
*/
/**
* @example scss
*
* .element {
* @include clearfix;
* }
*
* // CSS Output
* .element::after {
* clear: both;
* content: '';
* display: block;
* }
*/
/**
* 通用的遮罩
*/
/**
* Mixes a color with black. It's different from darken()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amount of black to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: shade(#ffbb52, 60%);
* }
*
* // CSS Output
* .element {
* background-color: #664a20;
* }
*/
/**
* Mixes a color with white. It's different from lighten()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amout of white to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: tint(#6ecaa6 , 40%);
* }
*
* // CSS Output
* .element {
* background-color: #a8dfc9;
* }
*/
/* Flex Item */
/**
* 默认主题下 $color-border-light
*/
/**
* 点击态
*/
/**
* 禁止态
*/
/**
* 设置placeholder 颜色
*/
/**
* 默认主题下 $color-border-light
*/
.at-row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%; }
.at-row__direction--row {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row; }
.at-row__direction--column {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; }
.at-row__direction--row-reverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse; }
.at-row__direction--column-reverse {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-webkit-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse; }
.at-row__align--start {
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-align: start; }
.at-row__align--end {
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-align: end; }
.at-row__align--center {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-align: center; }
.at-row__align--stretch {
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-align: stretch; }
.at-row__align--baseline {
-webkit-align-items: baseline;
-ms-flex-align: baseline;
align-items: baseline;
-webkit-box-align: baseline; }
.at-row__justify--start {
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-pack: start; }
.at-row__justify--end {
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-pack: end; }
.at-row__justify--center {
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-pack: center; }
.at-row__justify--between {
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-pack: justify; }
.at-row__justify--around {
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-pack: space-around; }
.at-row__align-content--start {
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start; }
.at-row__align-content--end {
-webkit-align-content: flex-end;
-ms-flex-line-pack: end;
align-content: flex-end; }
.at-row__align-content--center {
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center; }
.at-row__align-content--between {
-webkit-align-content: space-between;
-ms-flex-line-pack: justify;
align-content: space-between; }
.at-row__align-content--around {
-webkit-align-content: space-around;
-ms-flex-line-pack: distribute;
align-content: space-around; }
.at-row__align-content--stretch {
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch; }
.at-row--no-wrap {
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap; }
.at-row--wrap {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
.at-row--wrap-reverse {
-webkit-flex-wrap: wrap-reverse;
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse; }
.at-col {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-flex: 1;
width: 100%;
display: block;
white-space: nowrap;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.at-col-1 {
-webkit-flex: 0 0 8.33333%;
-ms-flex: 0 0 8.33333%;
flex: 0 0 8.33333%;
-webkit-box-flex: 0;
max-width: 8.33333%; }
.at-col__offset-1 {
margin-left: 8.33333%; }
.at-col-2 {
-webkit-flex: 0 0 16.66667%;
-ms-flex: 0 0 16.66667%;
flex: 0 0 16.66667%;
-webkit-box-flex: 0;
max-width: 16.66667%; }
.at-col__offset-2 {
margin-left: 16.66667%; }
.at-col-3 {
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
-webkit-box-flex: 0;
max-width: 25%; }
.at-col__offset-3 {
margin-left: 25%; }
.at-col-4 {
-webkit-flex: 0 0 33.33333%;
-ms-flex: 0 0 33.33333%;
flex: 0 0 33.33333%;
-webkit-box-flex: 0;
max-width: 33.33333%; }
.at-col__offset-4 {
margin-left: 33.33333%; }
.at-col-5 {
-webkit-flex: 0 0 41.66667%;
-ms-flex: 0 0 41.66667%;
flex: 0 0 41.66667%;
-webkit-box-flex: 0;
max-width: 41.66667%; }
.at-col__offset-5 {
margin-left: 41.66667%; }
.at-col-6 {
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
-webkit-box-flex: 0;
max-width: 50%; }
.at-col__offset-6 {
margin-left: 50%; }
.at-col-7 {
-webkit-flex: 0 0 58.33333%;
-ms-flex: 0 0 58.33333%;
flex: 0 0 58.33333%;
-webkit-box-flex: 0;
max-width: 58.33333%; }
.at-col__offset-7 {
margin-left: 58.33333%; }
.at-col-8 {
-webkit-flex: 0 0 66.66667%;
-ms-flex: 0 0 66.66667%;
flex: 0 0 66.66667%;
-webkit-box-flex: 0;
max-width: 66.66667%; }
.at-col__offset-8 {
margin-left: 66.66667%; }
.at-col-9 {
-webkit-flex: 0 0 75%;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
-webkit-box-flex: 0;
max-width: 75%; }
.at-col__offset-9 {
margin-left: 75%; }
.at-col-10 {
-webkit-flex: 0 0 83.33333%;
-ms-flex: 0 0 83.33333%;
flex: 0 0 83.33333%;
-webkit-box-flex: 0;
max-width: 83.33333%; }
.at-col__offset-10 {
margin-left: 83.33333%; }
.at-col-11 {
-webkit-flex: 0 0 91.66667%;
-ms-flex: 0 0 91.66667%;
flex: 0 0 91.66667%;
-webkit-box-flex: 0;
max-width: 91.66667%; }
.at-col__offset-11 {
margin-left: 91.66667%; }
.at-col-12 {
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
-webkit-box-flex: 0;
max-width: 100%; }
.at-col__offset-12 {
margin-left: 100%; }
.at-col__align--top {
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start; }
.at-col__align--bottom {
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end; }
.at-col__align--center {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center; }
.at-col--auto {
max-width: initial;
word-break: keep-all; }
.at-col--wrap {
white-space: normal;
word-wrap: break-word; }
/**
* Default variables
*/
/**
* Mixes a color with white. It's different from lighten()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amout of white to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: tint(#6ecaa6 , 40%);
* }
*
* // CSS Output
* .element {
* background-color: #a8dfc9;
* }
*/
/* The Color of O2Team Brand */
/* Color */
/* Color Palette */
/* Text Color */
/* Link */
/* 背景色 */
/* 边框颜色 */
/* 图标颜色 */
/* Border Radius */
/* 透明度 */
/* Font */
/* Line Height */
/* 水平间距 */
/* 垂直间距 */
/* 图标尺寸 */
/* z-index */
/* timing function */
/**
* CSS cubic-bezier timing functions
* http://bourbon.io/docs/#timing-functions
*/
/**
* 组件变量
*/
/* Accordion */
/* Activity Indicator */
/* Avatar */
/* Badge */
/* Button */
/* Float Button */
/* Calendar */
/* Card */
/* Checkbox */
/* Countdown */
/* Curtain */
/* Divider */
/* Drawer */
/* FloatLayout */
/* Grid */
/* ImagePicker */
/* Indexes */
/* InputNumber */
/* Input */
/* List */
/* LoadMore */
/* Loading */
/* Message */
/* Modal */
/* NavBar */
/* NoticeBar */
/* Pagination */
/* Progress */
/* Radio */
/* Range */
/* Rate */
/* SearchBar */
/* SegmentedControl */
/* Slider */
/* Steps */
/* SwipeAction */
/* Switch */
/* TabBar */
/* Tabs */
/* Tag */
/* Textarea */
/* Timeline */
/**
* Mixins
*/
/* library */
/**
* 元素居中定位
*/
/**
* @example scss
*
* .element {
* @include clearfix;
* }
*
* // CSS Output
* .element::after {
* clear: both;
* content: '';
* display: block;
* }
*/
/**
* 通用的遮罩
*/
/**
* Mixes a color with black. It's different from darken()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amount of black to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: shade(#ffbb52, 60%);
* }
*
* // CSS Output
* .element {
* background-color: #664a20;
* }
*/
/**
* Mixes a color with white. It's different from lighten()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amout of white to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: tint(#6ecaa6 , 40%);
* }
*
* // CSS Output
* .element {
* background-color: #a8dfc9;
* }
*/
/* Flex Item */
/**
* 默认主题下 $color-border-light
*/
/**
* 点击态
*/
/**
* 禁止态
*/
/**
* 设置placeholder 颜色
*/
/**
* 默认主题下 $color-border-light
*/
.at-accordion__header {
position: relative;
padding: 24rpx 24rpx;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
min-height: 32rpx;
color: #333;
font-size: 32rpx;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
-webkit-transition: background-color 0.3s;
-o-transition: background-color 0.3s;
transition: background-color 0.3s; }
.at-accordion__header::after {
content: '';
position: absolute;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
pointer-events: none;
top: -50%;
left: -50%;
right: -50%;
bottom: -50%;
border: 0 solid #d6e4ef;
-webkit-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
border-bottom-width: 1PX; }
.at-accordion__header:active {
background-color: #f0f0f0; }
.at-accordion__header--noborder::after {
display: none; }
.at-accordion__title {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: left;
line-height: 1.6;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap; }
.at-accordion__icon {
margin-right: 15rpx;
color: #333;
font-size: 48rpx; }
.at-accordion__content {
position: relative;
width: 100%;
overflow: hidden;
-webkit-transition: height 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
-o-transition: height 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
transition: height 500ms cubic-bezier(0.47, 0, 0.745, 0.715);
position: relative; }
.at-accordion__content::after {
content: '';
position: absolute;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
pointer-events: none;
top: -50%;
left: -50%;
right: -50%;
bottom: -50%;
border: 0 solid #d6e4ef;
-webkit-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
border-top-width: 1PX; }
.at-accordion__content--inactive {
position: absolute;
visibility: hidden;
z-index: -10; }
.at-accordion__arrow {
color: #ccc;
font-size: 48rpx;
line-height: 1;
-webkit-transition: -webkit-transform 0.2s ease;
transition: -webkit-transform 0.2s ease;
-o-transition: transform 0.2s ease;
transition: transform 0.2s ease;
transition: transform 0.2s ease, -webkit-transform 0.2s ease;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center; }
.at-accordion__arrow--folded {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg); }
/**
* Default variables
*/
/**
* Mixes a color with white. It's different from lighten()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amout of white to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: tint(#6ecaa6 , 40%);
* }
*
* // CSS Output
* .element {
* background-color: #a8dfc9;
* }
*/
/* The Color of O2Team Brand */
/* Color */
/* Color Palette */
/* Text Color */
/* Link */
/* 背景色 */
/* 边框颜色 */
/* 图标颜色 */
/* Border Radius */
/* 透明度 */
/* Font */
/* Line Height */
/* 水平间距 */
/* 垂直间距 */
/* 图标尺寸 */
/* z-index */
/* timing function */
/**
* CSS cubic-bezier timing functions
* http://bourbon.io/docs/#timing-functions
*/
/**
* 组件变量
*/
/* Accordion */
/* Activity Indicator */
/* Avatar */
/* Badge */
/* Button */
/* Float Button */
/* Calendar */
/* Card */
/* Checkbox */
/* Countdown */
/* Curtain */
/* Divider */
/* Drawer */
/* FloatLayout */
/* Grid */
/* ImagePicker */
/* Indexes */
/* InputNumber */
/* Input */
/* List */
/* LoadMore */
/* Loading */
/* Message */
/* Modal */
/* NavBar */
/* NoticeBar */
/* Pagination */
/* Progress */
/* Radio */
/* Range */
/* Rate */
/* SearchBar */
/* SegmentedControl */
/* Slider */
/* Steps */
/* SwipeAction */
/* Switch */
/* TabBar */
/* Tabs */
/* Tag */
/* Textarea */
/* Timeline */
/**
* Mixins
*/
/* library */
/**
* 元素居中定位
*/
/**
* @example scss
*
* .element {
* @include clearfix;
* }
*
* // CSS Output
* .element::after {
* clear: both;
* content: '';
* display: block;
* }
*/
/**
* 通用的遮罩
*/
/**
* Mixes a color with black. It's different from darken()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amount of black to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: shade(#ffbb52, 60%);
* }
*
* // CSS Output
* .element {
* background-color: #664a20;
* }
*/
/**
* Mixes a color with white. It's different from lighten()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amout of white to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: tint(#6ecaa6 , 40%);
* }
*
* // CSS Output
* .element {
* background-color: #a8dfc9;
* }
*/
/* Flex Item */
/**
* 默认主题下 $color-border-light
*/
/**
* 点击态
*/
/**
* 禁止态
*/
/**
* 设置placeholder 颜色
*/
/**
* 默认主题下 $color-border-light
*/
.at-activity-indicator {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
line-height: 1;
/* elements */
/* modifiers */ }
.at-activity-indicator__body {
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-box-flex: 0;
line-height: 0; }
.at-activity-indicator__content {
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-box-flex: 0;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
margin-left: 24rpx;
color: #999;
font-size: 28rpx; }
.at-activity-indicator--center {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
/**
* Default variables
*/
/**
* Mixes a color with white. It's different from lighten()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amout of white to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: tint(#6ecaa6 , 40%);
* }
*
* // CSS Output
* .element {
* background-color: #a8dfc9;
* }
*/
/* The Color of O2Team Brand */
/* Color */
/* Color Palette */
/* Text Color */
/* Link */
/* 背景色 */
/* 边框颜色 */
/* 图标颜色 */
/* Border Radius */
/* 透明度 */
/* Font */
/* Line Height */
/* 水平间距 */
/* 垂直间距 */
/* 图标尺寸 */
/* z-index */
/* timing function */
/**
* CSS cubic-bezier timing functions
* http://bourbon.io/docs/#timing-functions
*/
/**
* 组件变量
*/
/* Accordion */
/* Activity Indicator */
/* Avatar */
/* Badge */
/* Button */
/* Float Button */
/* Calendar */
/* Card */
/* Checkbox */
/* Countdown */
/* Curtain */
/* Divider */
/* Drawer */
/* FloatLayout */
/* Grid */
/* ImagePicker */
/* Indexes */
/* InputNumber */
/* Input */
/* List */
/* LoadMore */
/* Loading */
/* Message */
/* Modal */
/* NavBar */
/* NoticeBar */
/* Pagination */
/* Progress */
/* Radio */
/* Range */
/* Rate */
/* SearchBar */
/* SegmentedControl */
/* Slider */
/* Steps */
/* SwipeAction */
/* Switch */
/* TabBar */
/* Tabs */
/* Tag */
/* Textarea */
/* Timeline */
/**
* Mixins
*/
/* library */
/**
* 元素居中定位
*/
/**
* @example scss
*
* .element {
* @include clearfix;
* }
*
* // CSS Output
* .element::after {
* clear: both;
* content: '';
* display: block;
* }
*/
/**
* 通用的遮罩
*/
/**
* Mixes a color with black. It's different from darken()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amount of black to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: shade(#ffbb52, 60%);
* }
*
* // CSS Output
* .element {
* background-color: #664a20;
* }
*/
/**
* Mixes a color with white. It's different from lighten()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amout of white to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: tint(#6ecaa6 , 40%);
* }
*
* // CSS Output
* .element {
* background-color: #a8dfc9;
* }
*/
/* Flex Item */
/**
* 默认主题下 $color-border-light
*/
/**
* 点击态
*/
/**
* 禁止态
*/
/**
* 设置placeholder 颜色
*/
/**
* 默认主题下 $color-border-light
*/
.at-action-sheet {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1010;
visibility: hidden;
-webkit-transition: visibility 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
-o-transition: visibility 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
transition: visibility 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
/* elements */
/* modifiers */ }
.at-action-sheet__overlay {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
opacity: 0;
-webkit-transition: opacity 300ms ease-in;
-o-transition: opacity 300ms ease-in;
transition: opacity 300ms ease-in; }
.at-action-sheet__container {
position: absolute;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
bottom: 0;
width: 100%;
text-align: center;
background-color: #fff;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-transition: -webkit-transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
transition: -webkit-transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
-o-transition: transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
transition: transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
transition: transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1), -webkit-transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1); }
.at-action-sheet__header {
padding: 24rpx 24rpx;
color: #b2b2b2;
font-size: 28rpx;
text-align: center;
line-height: 1.5;
position: relative; }
.at-action-sheet__header::after {
content: '';
position: absolute;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
pointer-events: none;
top: -50%;
left: -50%;
right: -50%;
bottom: -50%;
border: 0 solid #d6e4ef;
-webkit-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
border-bottom-width: 1PX; }
.at-action-sheet__footer {
padding: 24rpx 24rpx;
font-size: 36rpx;
border-top: 12rpx solid rgba(197, 217, 232, 0.3);
-webkit-transition: background-color 0.3s;
-o-transition: background-color 0.3s;
transition: background-color 0.3s; }
.at-action-sheet__footer:active {
background-color: #f0f0f0; }
.at-action-sheet__body {
text-align: center; }
.at-action-sheet__item {
padding: 24rpx 24rpx;
font-size: 36rpx;
-webkit-transition: background-color 0.3s;
-o-transition: background-color 0.3s;
transition: background-color 0.3s;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
position: relative; }
.at-action-sheet__item:active {
background-color: #f0f0f0; }
.at-action-sheet__item::after {
content: '';
position: absolute;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
pointer-events: none;
top: auto;
left: 0;
right: 0;
bottom: 0;
-webkit-transform: scaleY(0.5);
-ms-transform: scaleY(0.5);
transform: scaleY(0.5);
border-bottom: 1PX solid #d6e4ef; }
.at-action-sheet--active {
visibility: visible; }
.at-action-sheet--active .at-action-sheet__overlay {
opacity: 1; }
.at-action-sheet--active .at-action-sheet__container {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
/**
* Default variables
*/
/**
* Mixes a color with white. It's different from lighten()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amout of white to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: tint(#6ecaa6 , 40%);
* }
*
* // CSS Output
* .element {
* background-color: #a8dfc9;
* }
*/
/* The Color of O2Team Brand */
/* Color */
/* Color Palette */
/* Text Color */
/* Link */
/* 背景色 */
/* 边框颜色 */
/* 图标颜色 */
/* Border Radius */
/* 透明度 */
/* Font */
/* Line Height */
/* 水平间距 */
/* 垂直间距 */
/* 图标尺寸 */
/* z-index */
/* timing function */
/**
* CSS cubic-bezier timing functions
* http://bourbon.io/docs/#timing-functions
*/
/**
* 组件变量
*/
/* Accordion */
/* Activity Indicator */
/* Avatar */
/* Badge */
/* Button */
/* Float Button */
/* Calendar */
/* Card */
/* Checkbox */
/* Countdown */
/* Curtain */
/* Divider */
/* Drawer */
/* FloatLayout */
/* Grid */
/* ImagePicker */
/* Indexes */
/* InputNumber */
/* Input */
/* List */
/* LoadMore */
/* Loading */
/* Message */
/* Modal */
/* NavBar */
/* NoticeBar */
/* Pagination */
/* Progress */
/* Radio */
/* Range */
/* Rate */
/* SearchBar */
/* SegmentedControl */
/* Slider */
/* Steps */
/* SwipeAction */
/* Switch */
/* TabBar */
/* Tabs */
/* Tag */
/* Textarea */
/* Timeline */
/**
* Mixins
*/
/* library */
/**
* 元素居中定位
*/
/**
* @example scss
*
* .element {
* @include clearfix;
* }
*
* // CSS Output
* .element::after {
* clear: both;
* content: '';
* display: block;
* }
*/
/**
* 通用的遮罩
*/
/**
* Mixes a color with black. It's different from darken()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amount of black to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: shade(#ffbb52, 60%);
* }
*
* // CSS Output
* .element {
* background-color: #664a20;
* }
*/
/**
* Mixes a color with white. It's different from lighten()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amout of white to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: tint(#6ecaa6 , 40%);
* }
*
* // CSS Output
* .element {
* background-color: #a8dfc9;
* }
*/
/* Flex Item */
/**
* 默认主题下 $color-border-light
*/
/**
* 点击态
*/
/**
* 禁止态
*/
/**
* 设置placeholder 颜色
*/
/**
* 默认主题下 $color-border-light
*/
.at-article {
word-break: break-all;
word-wrap: break-word;
line-height: 1.5;
/* elements */ }
.at-article__h1, .at-article__h2, .at-article__h3 {
margin: 0 30rpx;
color: #333; }
.at-article__h1 {
margin-top: 30rpx;
font-size: 48rpx;
line-height: 72rpx; }
.at-article__info {
margin: 0 30rpx;
color: #ccc;
font-size: 28rpx;
line-height: 42rpx; }
.at-article__h2 {
margin-top: 30rpx;
font-size: 40rpx;
line-height: 60rpx; }
.at-article__h3 {
font-size: 32rpx;
line-height: 48rpx; }
.at-article__p {
margin: 25rpx 30rpx 0;
color: #666;
font-size: 28rpx;
line-height: 42rpx; }
.at-article__img {
display: block;
margin: 20rpx auto 0;
width: 690rpx;
border-radius: 4rpx; }
/**
* Default variables
*/
/**
* Mixes a color with white. It's different from lighten()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amout of white to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: tint(#6ecaa6 , 40%);
* }
*
* // CSS Output
* .element {
* background-color: #a8dfc9;
* }
*/
/* The Color of O2Team Brand */
/* Color */
/* Color Palette */
/* Text Color */
/* Link */
/* 背景色 */
/* 边框颜色 */
/* 图标颜色 */
/* Border Radius */
/* 透明度 */
/* Font */
/* Line Height */
/* 水平间距 */
/* 垂直间距 */
/* 图标尺寸 */
/* z-index */
/* timing function */
/**
* CSS cubic-bezier timing functions
* http://bourbon.io/docs/#timing-functions
*/
/**
* 组件变量
*/
/* Accordion */
/* Activity Indicator */
/* Avatar */
/* Badge */
/* Button */
/* Float Button */
/* Calendar */
/* Card */
/* Checkbox */
/* Countdown */
/* Curtain */
/* Divider */
/* Drawer */
/* FloatLayout */
/* Grid */
/* ImagePicker */
/* Indexes */
/* InputNumber */
/* Input */
/* List */
/* LoadMore */
/* Loading */
/* Message */
/* Modal */
/* NavBar */
/* NoticeBar */
/* Pagination */
/* Progress */
/* Radio */
/* Range */
/* Rate */
/* SearchBar */
/* SegmentedControl */
/* Slider */
/* Steps */
/* SwipeAction */
/* Switch */
/* TabBar */
/* Tabs */
/* Tag */
/* Textarea */
/* Timeline */
/**
* Mixins
*/
/* library */
/**
* 元素居中定位
*/
/**
* @example scss
*
* .element {
* @include clearfix;
* }
*
* // CSS Output
* .element::after {
* clear: both;
* content: '';
* display: block;
* }
*/
/**
* 通用的遮罩
*/
/**
* Mixes a color with black. It's different from darken()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amount of black to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: shade(#ffbb52, 60%);
* }
*
* // CSS Output
* .element {
* background-color: #664a20;
* }
*/
/**
* Mixes a color with white. It's different from lighten()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amout of white to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: tint(#6ecaa6 , 40%);
* }
*
* // CSS Output
* .element {
* background-color: #a8dfc9;
* }
*/
/* Flex Item */
/**
* 默认主题下 $color-border-light
*/
/**
* 点击态
*/
/**
* 禁止态
*/
/**
* 设置placeholder 颜色
*/
/**
* 默认主题下 $color-border-light
*/
.at-avatar {
width: 100rpx;
height: 100rpx;
color: #fff;
font-size: 40rpx;
line-height: 100rpx;
text-align: center;
border-radius: 8rpx;
background: #e5e5e5;
-webkit-box-shadow: 0 0 50rpx 0 rgba(0, 0, 0, 0.05);
box-shadow: 0 0 50rpx 0 rgba(0, 0, 0, 0.05);
overflow: hidden;
/* elements */
/* modifiers */ }
.at-avatar__img {
width: 100%;
height: 100%; }
.at-avatar--large {
width: 120rpx;
height: 120rpx;
font-size: 48rpx;
line-height: 120rpx; }
.at-avatar--small {
width: 80rpx;
height: 80rpx;
font-size: 32rpx;
line-height: 80rpx; }
.at-avatar--circle {
border-radius: 50%;
background-clip: border-box;
overflow: hidden; }
/**
* Default variables
*/
/**
* Mixes a color with white. It's different from lighten()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amout of white to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: tint(#6ecaa6 , 40%);
* }
*
* // CSS Output
* .element {
* background-color: #a8dfc9;
* }
*/
/* The Color of O2Team Brand */
/* Color */
/* Color Palette */
/* Text Color */
/* Link */
/* 背景色 */
/* 边框颜色 */
/* 图标颜色 */
/* Border Radius */
/* 透明度 */
/* Font */
/* Line Height */
/* 水平间距 */
/* 垂直间距 */
/* 图标尺寸 */
/* z-index */
/* timing function */
/**
* CSS cubic-bezier timing functions
* http://bourbon.io/docs/#timing-functions
*/
/**
* 组件变量
*/
/* Accordion */
/* Activity Indicator */
/* Avatar */
/* Badge */
/* Button */
/* Float Button */
/* Calendar */
/* Card */
/* Checkbox */
/* Countdown */
/* Curtain */
/* Divider */
/* Drawer */
/* FloatLayout */
/* Grid */
/* ImagePicker */
/* Indexes */
/* InputNumber */
/* Input */
/* List */
/* LoadMore */
/* Loading */
/* Message */
/* Modal */
/* NavBar */
/* NoticeBar */
/* Pagination */
/* Progress */
/* Radio */
/* Range */
/* Rate */
/* SearchBar */
/* SegmentedControl */
/* Slider */
/* Steps */
/* SwipeAction */
/* Switch */
/* TabBar */
/* Tabs */
/* Tag */
/* Textarea */
/* Timeline */
/**
* Mixins
*/
/* library */
/**
* 元素居中定位
*/
/**
* @example scss
*
* .element {
* @include clearfix;
* }
*
* // CSS Output
* .element::after {
* clear: both;
* content: '';
* display: block;
* }
*/
/**
* 通用的遮罩
*/
/**
* Mixes a color with black. It's different from darken()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amount of black to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: shade(#ffbb52, 60%);
* }
*
* // CSS Output
* .element {
* background-color: #664a20;
* }
*/
/**
* Mixes a color with white. It's different from lighten()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amout of white to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: tint(#6ecaa6 , 40%);
* }
*
* // CSS Output
* .element {
* background-color: #a8dfc9;
* }
*/
/* Flex Item */
/**
* 默认主题下 $color-border-light
*/
/**
* 点击态
*/
/**
* 禁止态
*/
/**
* 设置placeholder 颜色
*/
/**
* 默认主题下 $color-border-light
*/
.at-badge {
position: relative;
display: inline-block;
font-size: 0;
vertical-align: middle;
/* elements */ }
.at-badge__dot {
position: absolute;
right: -6rpx;
top: -6rpx;
width: 20rpx;
height: 20rpx;
border-radius: 50%;
overflow: hidden;
background: #ff4949;
-webkit-box-shadow: 0 4rpx 8rpx 0 rgba(255, 73, 73, 0.2);
box-shadow: 0 4rpx 8rpx 0 rgba(255, 73, 73, 0.2); }
.at-badge__num {
position: absolute;
padding: 0 10rpx;
top: -14rpx;
right: -6PX;
color: #fff;
font-size: 20rpx;
line-height: 1.4;
border-radius: 14rpx 14rpx 14rpx 0;
background: #ff4949;
-webkit-box-shadow: 0 4rpx 8rpx 0 rgba(255, 73, 73, 0.2);
box-shadow: 0 4rpx 8rpx 0 rgba(255, 73, 73, 0.2);
-webkit-transform: translate(50%, 0);
-ms-transform: translate(50%, 0);
transform: translate(50%, 0);
overflow: hidden;
z-index: 1; }
/**
* Default variables
*/
/**
* Mixes a color with white. It's different from lighten()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amout of white to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: tint(#6ecaa6 , 40%);
* }
*
* // CSS Output
* .element {
* background-color: #a8dfc9;
* }
*/
/* The Color of O2Team Brand */
/* Color */
/* Color Palette */
/* Text Color */
/* Link */
/* 背景色 */
/* 边框颜色 */
/* 图标颜色 */
/* Border Radius */
/* 透明度 */
/* Font */
/* Line Height */
/* 水平间距 */
/* 垂直间距 */
/* 图标尺寸 */
/* z-index */
/* timing function */
/**
* CSS cubic-bezier timing functions
* http://bourbon.io/docs/#timing-functions
*/
/**
* 组件变量
*/
/* Accordion */
/* Activity Indicator */
/* Avatar */
/* Badge */
/* Button */
/* Float Button */
/* Calendar */
/* Card */
/* Checkbox */
/* Countdown */
/* Curtain */
/* Divider */
/* Drawer */
/* FloatLayout */
/* Grid */
/* ImagePicker */
/* Indexes */
/* InputNumber */
/* Input */
/* List */
/* LoadMore */
/* Loading */
/* Message */
/* Modal */
/* NavBar */
/* NoticeBar */
/* Pagination */
/* Progress */
/* Radio */
/* Range */
/* Rate */
/* SearchBar */
/* SegmentedControl */
/* Slider */
/* Steps */
/* SwipeAction */
/* Switch */
/* TabBar */
/* Tabs */
/* Tag */
/* Textarea */
/* Timeline */
/**
* Mixins
*/
/* library */
/**
* 元素居中定位
*/
/**
* @example scss
*
* .element {
* @include clearfix;
* }
*
* // CSS Output
* .element::after {
* clear: both;
* content: '';
* display: block;
* }
*/
/**
* 通用的遮罩
*/
/**
* Mixes a color with black. It's different from darken()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amount of black to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: shade(#ffbb52, 60%);
* }
*
* // CSS Output
* .element {
* background-color: #664a20;
* }
*/
/**
* Mixes a color with white. It's different from lighten()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amout of white to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: tint(#6ecaa6 , 40%);
* }
*
* // CSS Output
* .element {
* background-color: #a8dfc9;
* }
*/
/* Flex Item */
/**
* 默认主题下 $color-border-light
*/
/**
* 点击态
*/
/**
* 禁止态
*/
/**
* 设置placeholder 颜色
*/
/**
* 默认主题下 $color-border-light
*/
.at-button {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
margin: 0 auto;
padding: 0 32rpx;
height: 92rpx;
color: #333;
font-size: 32rpx;
line-height: 90rpx;
text-align: center;
border-radius: 8rpx;
border: 1PX solid #c5d9e8;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
/* elements */
/* modifiers */ }
.at-button:active {
opacity: 0.6; }
.at-button__icon {
display: inline-block;
margin: 2PX 20rpx 0 20rpx; }
.at-button__text {
display: inline; }
.at-button__wxbutton {
position: absolute;
padding: 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: none;
outline: none;
background-color: transparent;
opacity: 0;
z-index: 1; }
.at-button__wxbutton::after {
display: none; }
.at-button--active {
opacity: 0.6; }
.at-button--disabled {
opacity: 0.3; }
.at-button--disabled:active {
opacity: 0.3; }
.at-button--primary {
color: #fff;
border: 1PX solid #6190e8;
background: #6190e8; }
.at-button--secondary {
color: #6190e8;
border: 1PX solid #6190e8;
background-color: #fff; }
.at-button--circle {
border-radius: 46rpx;
background-clip: border-box;
overflow: hidden; }
.at-button--small {
display: inline-block;
padding: 0 16rpx;
width: auto;
min-width: 100rpx;
max-width: 710rpx;
height: 60rpx;
font-size: 28rpx;
line-height: 58rpx; }
.at-button--small.at-button--circle {
border-radius: 30rpx; }
.at-button--full {
width: 1000rpx;
max-width: 100%;
border-radius: 0;
border-left: none;
border-right: none; }
/**
* Default variables
*/
/**
* Mixes a color with white. It's different from lighten()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amout of white to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: tint(#6ecaa6 , 40%);
* }
*
* // CSS Output
* .element {
* background-color: #a8dfc9;
* }
*/
/* The Color of O2Team Brand */
/* Color */
/* Color Palette */
/* Text Color */
/* Link */
/* 背景色 */
/* 边框颜色 */
/* 图标颜色 */
/* Border Radius */
/* 透明度 */
/* Font */
/* Line Height */
/* 水平间距 */
/* 垂直间距 */
/* 图标尺寸 */
/* z-index */
/* timing function */
/**
* CSS cubic-bezier timing functions
* http://bourbon.io/docs/#timing-functions
*/
/**
* 组件变量
*/
/* Accordion */
/* Activity Indicator */
/* Avatar */
/* Badge */
/* Button */
/* Float Button */
/* Calendar */
/* Card */
/* Checkbox */
/* Countdown */
/* Curtain */
/* Divider */
/* Drawer */
/* FloatLayout */
/* Grid */
/* ImagePicker */
/* Indexes */
/* InputNumber */
/* Input */
/* List */
/* LoadMore */
/* Loading */
/* Message */
/* Modal */
/* NavBar */
/* NoticeBar */
/* Pagination */
/* Progress */
/* Radio */
/* Range */
/* Rate */
/* SearchBar */
/* SegmentedControl */
/* Slider */
/* Steps */
/* SwipeAction */
/* Switch */
/* TabBar */
/* Tabs */
/* Tag */
/* Textarea */
/* Timeline */
/**
* Mixins
*/
/* library */
/**
* 元素居中定位
*/
/**
* @example scss
*
* .element {
* @include clearfix;
* }
*
* // CSS Output
* .element::after {
* clear: both;
* content: '';
* display: block;
* }
*/
/**
* 通用的遮罩
*/
/**
* Mixes a color with black. It's different from darken()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amount of black to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: shade(#ffbb52, 60%);
* }
*
* // CSS Output
* .element {
* background-color: #664a20;
* }
*/
/**
* Mixes a color with white. It's different from lighten()
*
* @param {color} $color
* @param {number (percentage)} $percent [The amout of white to be mixed in]
* @return {color}
*
* @example
* .element {
* background-color: tint(#6ecaa6 , 40%);
* }
*
* // CSS Output
* .element {
* background-color: #a8dfc9;
* }
*/
/* Flex Item */
/**
* 默认主题下 $color-border-light
*/
/**
* 点击态
*/
/**
* 禁止态
*/
/**
* 设置placeholder 颜色
*/
/**
* 默认主题下 $color-border-light
*/
.at-calendar {
overflow: hidden;
/* elements */ }
.at-calendar__header .header__flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-align: center;
height: 72rpx;
color: #b8bfc6;
text-align: center; }
.at-calendar__header .header__flex-item {
-webkit-flex: 0 0 calc(100% / 7);
-ms-flex: 0 0 calc(100% / 7);
flex: 0 0 calc(100% / 7);
-webkit-box-flex: 0 0 calc(100% / 7);
font-size: 30rpx; }
.at-calendar__list.flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-align: stretch;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
color: #7c86a2; }
.at-calendar__list.flex .flex__item {
-webkit-flex: 0 0 calc(100% / 7);
-ms-flex: 0 0 calc(100% / 7);
flex: 0 0 calc(100% / 7);
-webkit-box-flex: 0 0 calc(100% / 7);
font-size: 30rpx;
text-align: center;
position: relative;
margin: 5rpx 0; }
.at-calendar__list.flex .flex__item-container {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-align: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 72rpx;
height: 72rpx;
margin-left: auto;
margin-right: auto;
border-radius: 50%; }
.at-calendar__list.flex .flex__item-container .container-text {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-flex: 1; }
.at-calendar__list.flex .flex__item-extra .extra-marks {
position: absolute;
bottom: 5rpx;
line-height: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%); }
.at-calendar__list.flex .flex__item-extra .extra-marks .mark {
width: 8rpx;
height: 8rpx;
margin-right: 4rpx;
display: inline-block;
background-color: #6190e8;
border-radius: 50%;
overflow: hidden; }
.at-calendar__list.flex .flex__item-extra .extra-marks .mark:last-child {
margin-right: 0; }
.at-calendar__list.flex .flex__item--today {
color: #6190e8;
font-weight: bolder; }
.at-calendar__list.flex .flex__item--blur {
color: #e1e4e7; }
.at-calendar__list.flex .flex__item--selected {
color: white;
background-color: rgba(97, 144, 232, 0.7);
/* stylelint-disable-next-line */ }
.at-calendar__list.flex .flex__item--selected-head {
border-top-left-radius: 40rpx;
border-bottom-left-radius: 40rpx; }
.at-calendar__list.flex .flex__item--selected-tail {
border-top-right-radius: 40rpx;
border-bottom-right-radius: 40rpx; }
.at-calendar__list.flex .flex__item--selected .extra-marks .mark {
background-color: white; }
.at-calendar__list.flex .flex__item--selected-head.flex__item--selected-tail {
background-color: transparent; }
.at-calendar__list.flex .flex__item--selected-head.flex__item--selected-tail .flex__item-container {
background-color: rgba(97, 144, 232, 0.7); }
.at-calendar__controller {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-align: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-pack: center;
margin-bottom: 20rpx; }
.at-calendar__controller .controller__arrow {
-webkit-flex: 0 0 40rpx;
-ms-flex: 0 0 40rpx;
flex: 0 0 40rpx;
-webkit-box-flex: 0 0 40rpx;
height: 40rpx;
border-radius: 12rpx;
display: inline-block;
background-size: 16rpx 24rpx;
background-position: center;
background-color: #f7f8fc;
background-repeat: no-repeat;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAYAAADzoH0MAAAAAXNSR0IArs4c6QAAAnFJREFUOBGVVF1rE0EUnXt3tzFtWmqjKYKfqIhVa1L8FQVRWtwnXwRhidXGDwQf81oCUQMioZRCHwNSgiD4lD9QSYVKsA8KbaW1jbamX8adnWsmMnESbYz7cs6ee8/ZnZm7y9h/Xk/Gs70TE9lOZQNFWsGx1IvDJoozxNDttNpmHOfyTssBj59PHxceP6keREDlYPvBGUMJzTD5LHuKhHtC70EEQe72atMAIoLu0MWzRPxInZnEdxZib2I37L2XEI/HsSvYd44AQrqZIW5b3J8fHR0sS/2ve5DJZIzFFexnSD262QAs+c1js45zyVU6KqIwnU5bS58x0mhGhusbaz153Sw9dW+QSr3yCdwJe4wCKlCigbAWiw7PAYDQdclrAclkxk8+iDBifr3JMq3lO86VQsVMuq549RQSU687mOcNANE+VfiFxuLd6NX3e5llD8qjskqb54E8n24mk5Yf3B6ab2auBsgGC8Q7QOJ1AS6ExrSZ12s6r57CyIi99cNgswywtkkIzDB2eSSdftmuGxp57RgfOfY38HlvRWVNqgmYsDb57sDkZK5hb1RHZQ9+U8bu37S/MtOc0zUg8G2U1yOV4WrTdcXrAqT4MDq0yokXVINEwb32pS9WOJfLmboueW0OGgtP05mj3IXTum6iuXHogDtr27an9D/eQBVijr2AiB/VvUQuePenNXZBfmhKrxEl6Hjv1vAHA2lJ1wRBcH9vf5+cH6k3DZANsei1eWCwIrm6uOf1Jsenq8v7Z4ActFJxrsBMo6gC0GAebPHq/Z6bqJoVyn/EQpGFK08MmF2B/Oj1wZKqtYzxeM5MJKY6dMNPQnnePR8FubkAAAAASUVORK5CYII="); }
.at-calendar__controller .controller__arrow--right {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg); }
.at-calendar__controller .controller__arrow--disabled {
opacity: 0.5; }
.at-calendar__controller .controller__info {
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-box-flex: 0 0 auto;
font-size: 30rpx;
margin-left: 40rpx;
margin-right: 40rpx; }
.at-calendar-slider__main .main__body {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;