├── .gitignore ├── scss ├── mo.scss ├── mixins │ ├── _utils.scss │ ├── _radio.scss │ ├── _checkbox.scss │ ├── _input.scss │ ├── _button.scss │ ├── _unit.scss │ └── _switch.scss ├── _table.scss ├── _utils.scss ├── _input.scss ├── _variable.scss ├── _buttons.scss ├── _choose.scss └── _reset.scss ├── demo ├── demo.css ├── index.html ├── table.html ├── utils.html ├── radio.html ├── checkbox.html ├── buttons.html ├── input.html ├── switch.html └── choose.html ├── package.json ├── gulpfile.js ├── README.md └── css ├── mo.min.css └── mo.css /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /dist -------------------------------------------------------------------------------- /scss/mo.scss: -------------------------------------------------------------------------------- 1 | @import './variable'; 2 | @import './mixins/unit'; 3 | @import './mixins/utils'; 4 | @import './reset'; 5 | @import './buttons'; 6 | @import './input'; 7 | @import './choose'; 8 | 9 | @import './table'; 10 | 11 | @import './utils'; 12 | -------------------------------------------------------------------------------- /scss/mixins/_utils.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 清除浮动 3 | */ 4 | @mixin clearFix() { 5 | &:before, 6 | &:after { 7 | display: table; 8 | 9 | content: ' '; 10 | } 11 | &:after { 12 | clear: both; 13 | } 14 | } 15 | 16 | /** 17 | * 设置placeholder 18 | */ 19 | @mixin placeholder { 20 | &::-webkit-input-placeholder { 21 | @content 22 | } 23 | &::-moz-placeholder { 24 | @content 25 | } 26 | &:-ms-input-placeholder { 27 | @content 28 | } 29 | } -------------------------------------------------------------------------------- /scss/mixins/_radio.scss: -------------------------------------------------------------------------------- 1 | @mixin radioSize($size) { 2 | padding-left: $size; 3 | 4 | > .icon { 5 | width: $size; 6 | height: $size; 7 | } 8 | } 9 | @mixin radioStyle ($color) { 10 | > .icon { 11 | border-color: $color; 12 | } 13 | > input[type="radio"] { 14 | &:checked ~ .icon:after { 15 | @if $enable-form-translation { 16 | transition: all .06s cubic-bezier(0.55, 0.09, 0.68, 0.53); 17 | } 18 | background-color: $color; 19 | } 20 | &:disabled, &.disabled { 21 | ~ .icon, 22 | ~ span { 23 | opacity: $disabled-opacity; 24 | cursor: not-allowed; 25 | } 26 | } 27 | } 28 | } -------------------------------------------------------------------------------- /scss/mixins/_checkbox.scss: -------------------------------------------------------------------------------- 1 | @mixin checkboxSize($size) { 2 | padding-left: $size; 3 | 4 | > .icon { 5 | width: $size; 6 | height: $size; 7 | } 8 | } 9 | @mixin checkboxStyle ($color) { 10 | > .icon { 11 | border-color: $color; 12 | } 13 | > input[type="checkbox"] { 14 | &:checked ~ .icon:after { 15 | @if $enable-form-translation { 16 | transition: all .06s cubic-bezier(0.55, 0.09, 0.68, 0.53); 17 | } 18 | border-left-color: $color; 19 | border-bottom-color: $color; 20 | } 21 | &:disabled, &.disabled { 22 | ~ .icon, 23 | ~ span { 24 | opacity: $disabled-opacity; 25 | cursor: not-allowed; 26 | } 27 | } 28 | } 29 | } -------------------------------------------------------------------------------- /demo/demo.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #f5f5f5; 3 | } 4 | .demo { 5 | padding: 1rem; 6 | max-width: 960px; 7 | margin: 0 auto; 8 | background-color: #fff; 9 | } 10 | .demo-back { 11 | margin-bottom: 1rem; 12 | } 13 | .demo-header { 14 | 15 | } 16 | 17 | .demo-nav { 18 | 19 | } 20 | 21 | .demo-nav ul { 22 | margin: 0; 23 | padding: 0; 24 | list-style: none; 25 | } 26 | 27 | .demo-nav ul >li { 28 | padding: .5rem 0; 29 | border-bottom: 1px solid #eee; 30 | } 31 | 32 | 33 | .demo-body { 34 | 35 | } 36 | 37 | .demo-form legend{ 38 | margin-bottom: .5rem 39 | } 40 | .demo-form fieldset { 41 | margin-top: 1rem; 42 | margin-bottom: 1rem; 43 | padding-bottom: 1rem; 44 | border-bottom: 1px solid #eee; 45 | } -------------------------------------------------------------------------------- /scss/mixins/_input.scss: -------------------------------------------------------------------------------- 1 | @mixin inputSize ($size) { 2 | $font-size: map_get($size, font-size); 3 | $line-height: map_get($size, line-height); 4 | $padding-x: map_get($size, padding-x); 5 | $padding-y: map_get($size, padding-y); 6 | $height: $font-size * $line-height + 2 * $padding-y + 2; 7 | font-size: rem($font-size); 8 | line-height: $line-height; 9 | 10 | height: rem($height); 11 | padding: rem($padding-y $padding-x); 12 | } 13 | 14 | 15 | @mixin inputStyle ($border, $focusBorder) { 16 | border-color: $border; 17 | &:not(.readonly):not([readonly]):not(.disabled):not([disabled]) { 18 | &:focus { 19 | border-color: $focusBorder; 20 | box-shadow: 0 0 8px rgba($focusBorder, .35); 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /scss/mixins/_button.scss: -------------------------------------------------------------------------------- 1 | 2 | @mixin buttonSize ($size) { 3 | $font-size: map_get($size, font-size); 4 | $line-height: map_get($size, line-height); 5 | $padding-x: map_get($size, padding-x); 6 | $padding-y: map_get($size, padding-y); 7 | font-size: rem($font-size); 8 | line-height: $line-height; 9 | padding: rem($padding-y $padding-x); 10 | } 11 | 12 | 13 | 14 | @mixin buttonStyle ($border, $background, $color, $hoverBorder, $hoverBackground, $hoverColor) { 15 | color: $color; 16 | border-color: $border; 17 | background-color: $background; 18 | &:not(.readonly):not([readonly]):not(.disabled):not([disabled]) { 19 | &:hover, 20 | &:active { 21 | color: $hoverColor; 22 | border-color: $hoverBorder; 23 | background-color: $hoverBackground; 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /scss/mixins/_unit.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * 去掉数值的单位 3 | * stripUnits(16px) => 16 4 | */ 5 | @function stripUnits ($number) { 6 | @return $number / ($number * 0 + 1); 7 | } 8 | //px转rem, 16px => 1rem 9 | @function toRem($value, $root:$font-size-root) { 10 | @if (unit($value) != 'rem') { 11 | $value: stripUnits($value); 12 | } 13 | @if ($value == 0) { 14 | @return 0; 15 | } 16 | $root: stripUnits($root); 17 | @return if($value == 0, 0, $value / $root * 1rem); 18 | } 19 | 20 | /** 21 | * 多数值转rem 22 | * 用于padding / margin等 23 | * eg. rem(16 32 16 16) => 1rem 2rem 1rem 1rem 24 | */ 25 | @function rem ($values) { 26 | $results: (); 27 | $count: length($values); 28 | 29 | @if $count == 1 { 30 | @return toRem($values); 31 | } 32 | @for $i from 1 through $count { 33 | $results: append($results, toRem(nth($values, $i))); 34 | } 35 | @return $results; 36 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mo-css", 3 | "version": "1.0.0", 4 | "description": "smohan css framework", 5 | "main": "gulpfile.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/S-mohan/mo-css.git" 12 | }, 13 | "keywords": [ 14 | "smohan", 15 | "ui", 16 | "css" 17 | ], 18 | "author": "smohan (https://smohan.im(net))", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/S-mohan/mo-css/issues" 22 | }, 23 | "homepage": "https://github.com/S-mohan/mo-css#readme", 24 | "devDependencies": { 25 | "gulp": "^3.9.1", 26 | "gulp-autoprefixer": "^3.1.1", 27 | "gulp-clean": "^0.3.2", 28 | "gulp-clean-css": "^2.0.13", 29 | "gulp-plumber": "^1.1.0", 30 | "gulp-rename": "^1.2.2", 31 | "gulp-sass": "^3.1.0", 32 | "gulp-sequence": "^0.4.6" 33 | } 34 | } -------------------------------------------------------------------------------- /scss/mixins/_switch.scss: -------------------------------------------------------------------------------- 1 | @mixin switchSize ($width, $height) { 2 | padding-left: $width; 3 | $_height : $height - rem(2px); 4 | $_width : $width - rem(2px); 5 | > .icon { 6 | width: $width; 7 | height: $height; 8 | border-radius: $height; 9 | &:before{ 10 | width: $_width; 11 | height: $_height; 12 | border-radius: $_height / 2; 13 | } 14 | &:after { 15 | width: $_height; 16 | height: $_height; 17 | } 18 | } 19 | > input { 20 | &:checked ~ .icon:after{ 21 | $_left :( $width - rem(2px) - $_height); 22 | transform: translateX($_left); 23 | } 24 | } 25 | } 26 | 27 | @mixin switchStyle($color) { 28 | > input { 29 | &:checked ~ .icon { 30 | border-color: $color; 31 | background-color: $color; 32 | } 33 | &:disabled, &.disabled { 34 | ~ .icon, 35 | ~ span { 36 | opacity: $disabled-opacity; 37 | cursor: not-allowed; 38 | } 39 | } 40 | } 41 | } -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | MoCss - 水墨寒的博客 9 | 10 | 11 | 12 | 13 |
14 |
15 |

Mo-Css

16 |
17 | 29 |
30 | 31 | -------------------------------------------------------------------------------- /scss/_table.scss: -------------------------------------------------------------------------------- 1 | [class^='mo-table'], 2 | [class*=' mo-table'] { 3 | width: 100%; 4 | max-width: 100%; 5 | margin-bottom: 1rem; 6 | 7 | background-color: transparent; 8 | td, 9 | th { 10 | padding: rem(10); 11 | 12 | vertical-align: top; 13 | 14 | border-top: 1px solid $color-border; 15 | &[align='left'] { 16 | text-align: left; 17 | } 18 | &[align='center'] { 19 | text-align: center; 20 | } 21 | &[align='right'] { 22 | text-align: right; 23 | } 24 | } 25 | thead th { 26 | vertical-align: bottom; 27 | 28 | border-bottom: 2px solid $color-border; 29 | } 30 | } 31 | 32 | .mo-table--bordered { 33 | td, 34 | th { 35 | border: 1px solid $color-border; 36 | } 37 | thead th { 38 | border-bottom-width: 2px; 39 | } 40 | } 41 | 42 | //响应式 43 | .mo-table--responsive { 44 | display: block; 45 | overflow-x: auto; 46 | 47 | width: 100%; 48 | 49 | -ms-overflow-style: -ms-autohiding-scrollbar; 50 | } 51 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp') 2 | const sass = require('gulp-sass') 3 | const rename = require('gulp-rename') 4 | const clean = require('gulp-clean') 5 | const plumber = require('gulp-plumber') 6 | const cleanCss = require('gulp-clean-css') 7 | const autoprefixer = require('gulp-autoprefixer') 8 | const gulpSequence = require('gulp-sequence') 9 | 10 | const CONFIGS = { 11 | sass: { 12 | sourceComments: false, 13 | outputStyle: 'expanded' 14 | }, 15 | css: { 16 | advanced: true, //合并选择器 17 | keepBreaks: false, //不保留换行符 18 | mediaMerging: true, //合并@media 19 | keepSpecialComments: '*' //保留浏览器前缀 20 | }, 21 | autoprefixer: { 22 | browsers: ['last 2 versions', 'Android >= 4.0'], 23 | cascade: true, //是否美化属性值 默认：true 24 | remove: true //是否去掉不必要的前缀 默认：true 25 | } 26 | } 27 | 28 | gulp.task('compile:sass', () => { 29 | return gulp.src('./scss/**/*.scss') 30 | .pipe(sass(CONFIGS.sass)) 31 | .pipe(plumber()) 32 | .pipe(autoprefixer(CONFIGS.autoprefixer)) 33 | .pipe(gulp.dest('./css')) 34 | }) 35 | 36 | 37 | gulp.task('build:css', () => { 38 | return gulp.src('./css/mo.css') 39 | .pipe(cleanCss(CONFIGS.css)) 40 | .pipe(rename('mo.min.css')) 41 | .pipe(gulp.dest('./css/')); 42 | }); 43 | 44 | 45 | gulp.task('watch', () => { 46 | gulp.watch('./scss/**/*.scss', ['compile:sass']) 47 | }) 48 | 49 | gulp.task('default', ['watch']); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Mo css framework 2 | 3 | # 持续更新中... 4 | 5 | ### [DEMO](https://s-mohan.github.io/demo/mo-css/) 6 | 7 | ### Api 8 | 9 | - [variable](http://www.kancloud.cn/smohan/mo-css/281486) 10 | - [utils](http://www.kancloud.cn/smohan/mo-css/281475) 11 | - [buttons](http://www.kancloud.cn/smohan/mo-css/281483) 12 | - [input](http://www.kancloud.cn/smohan/mo-css/281484) 13 | - [radio](http://www.kancloud.cn/smohan/mo-css/282365) 14 | - [checkbox](http://www.kancloud.cn/smohan/mo-css/282364) 15 | - [switch](http://www.kancloud.cn/smohan/mo-css/282363) 16 | - [table](http://www.kancloud.cn/smohan/mo-css/282362) 17 | 18 | ### 自定义 19 | 20 | #### button 21 | 22 | ``` css 23 | @import './mixins/button'; 24 | //自定义样式（背景，颜色） 25 | .mo-button--[style] { 26 | @include buttonStyle($border, $background, $color, $hoverBorder, $hoverBackground, $hoverColor); 27 | } 28 | //自定义尺寸 29 | $my-button-size : (font-size:14px, line-height:1.4286, padding-y:6px, padding-x:16px) !default; 30 | .mo-button--[size] { 31 | @include buttonSize ($my-button-size ); 32 | } 33 | ``` 34 | 35 | #### input 36 | 37 | ``` css 38 | @import './mixins/input'; 39 | //自定义样式（背景，颜色） 40 | .mo-input--[style] { 41 | @include inputStyle ($border, $focusBorder); 42 | } 43 | //自定义尺寸 44 | $my-input-size : (font-size:14px, line-height:1.4286, padding-y:6px, padding-x:16px) !default; 45 | .mo-input--[size] { 46 | @include inputSize ($my-input-size); 47 | } 48 | ``` 49 | 50 | #### radio 51 | ``` css 52 | @import './mixins/radio'; 53 | //自定义样式（颜色） 54 | .mo-radio--[style] { 55 | @include radioStyle($color); 56 | } 57 | ``` 58 | 59 | #### checkbox 60 | ``` css 61 | @import './mixins/checkbox'; 62 | //自定义样式（颜色） 63 | .mo-checkbox--[style] { 64 | @include checkboxStyle($color); 65 | } 66 | ``` 67 | 68 | #### switch 69 | ``` css 70 | @import './mixins/switch'; 71 | //自定义样式（颜色） 72 | .mo-switch--[style] { 73 | @include switchStyle($color); 74 | } 75 | //自定义尺寸 76 | .mo-switch--[size] { 77 | @include switchSize ($width, $height); 78 | } 79 | ``` -------------------------------------------------------------------------------- /scss/_utils.scss: -------------------------------------------------------------------------------- 1 | .mo-left { 2 | float: left !important; 3 | } 4 | .mo-right { 5 | float: right !important; 6 | } 7 | .mo-clearfix { 8 | @include clearFix; 9 | } 10 | .mo-text-left { 11 | text-align: left !important; 12 | } 13 | .mo-text-center { 14 | text-align: center !important; 15 | } 16 | .mo-text-right { 17 | text-align: right !important; 18 | } 19 | .mo-text-lowercase { 20 | text-transform: lowercase !important; 21 | } 22 | .mo-text-uppercase { 23 | text-transform: uppercase !important; 24 | } 25 | .mo-text-capitalize { 26 | text-transform: capitalize !important; 27 | } 28 | .mo-text-overflow { 29 | overflow: hidden; 30 | white-space: nowrap; 31 | text-overflow: ellipsis; 32 | } 33 | .mo-invisible { 34 | visibility: hidden !important; 35 | } 36 | .mo-visible { 37 | visibility: visible !important; 38 | } 39 | .mo-hide { 40 | display: none !important; 41 | } 42 | .mo-show { 43 | display: block !important; 44 | } 45 | .mo-inline { 46 | display: inline !important; 47 | } 48 | .mo-inline-block { 49 | display: inline-block !important; 50 | } 51 | .mo-bg-primary, .mo-bg-positive, .mo-bg-negative { 52 | color: #fff; 53 | } 54 | .mo-bg-primary { 55 | background-color: $color-primary; 56 | } 57 | .mo-bg-positive { 58 | background-color: $color-positive; 59 | } 60 | .mo-bg-negative { 61 | background-color: $color-negative; 62 | } 63 | .mo-text-primary { 64 | color: $color-primary; 65 | } 66 | .mo-text-positive { 67 | color: $color-positive; 68 | } 69 | .mo-text-negative { 70 | color: $color-negative; 71 | } 72 | .mo-text-title { 73 | color: $color-title; 74 | } 75 | .mo-text-default { 76 | color: $color-text; 77 | } 78 | .mo-text-description { 79 | color: $color-description; 80 | } 81 | .mo-text-hint { 82 | color: $color-hint; 83 | } 84 | .mo-text-important, .mo-code { 85 | color: #bd4147; 86 | } 87 | .mo-radius { 88 | border-radius: $form-radius; 89 | } 90 | .mo-pill { 91 | border-radius: $form-pill; 92 | } 93 | 94 | .mo-fluid { 95 | display: block; 96 | width: 100%; 97 | } -------------------------------------------------------------------------------- /scss/_input.scss: -------------------------------------------------------------------------------- 1 | @import './mixins/input'; 2 | 3 | .mo-input { 4 | font-family: inherit; 5 | display: inline-block; 6 | width: 100%; 7 | color: $color-text; 8 | border: rem(1) solid transparent; 9 | border-radius: 0; 10 | outline: none; 11 | background-color: #fff; 12 | background-image: none; 13 | appearance: none; 14 | @include inputStyle ($color-border, $color-primary); 15 | @include inputSize ($form-size); 16 | 17 | //size 18 | &.mo-input--tiny { 19 | @include inputSize ($form-size-tiny); 20 | } 21 | &.mo-input--small { 22 | @include inputSize ($form-size-small); 23 | } 24 | &.mo-input--large { 25 | @include inputSize ($form-size-large); 26 | } 27 | //style 28 | &.mo-input--primary { 29 | @include inputStyle ($color-primary, $color-primary); 30 | } 31 | &.mo-input--positive { 32 | @include inputStyle ($color-positive, $color-positive); 33 | } 34 | &.mo-input--negative { 35 | @include inputStyle ($color-negative, $color-negative); 36 | } 37 | @include placeholder { 38 | color: $color-placeholder; 39 | } 40 | &:not(.readonly):not([readonly]):not(.disabled):not([disabled]) { 41 | &:focus { 42 | @if $enable-form-translation { 43 | transition: all .16s cubic-bezier(.55, .09, .68, .53); 44 | outline: 0; 45 | } 46 | } 47 | } 48 | &.readonly, &[readonly] { 49 | cursor: default; 50 | } 51 | &.disabled, &[disabled] { 52 | cursor: not-allowed; 53 | opacity: $disabled-opacity; 54 | } 55 | } 56 | 57 | //fixed select 58 | select { 59 | &.mo-input:not([multiple]) { 60 | padding-right: 1.75rem; 61 | vertical-align: middle; 62 | background-image: $image64-dropdown; 63 | background-repeat: no-repeat; 64 | background-position: right rem(5) center; 65 | 66 | &::-ms-expand { 67 | display: none; 68 | } 69 | } 70 | } 71 | 72 | //fixed textarea height 73 | textarea, select[multiple] { 74 | &.mo-input { 75 | height: auto; 76 | } 77 | } 78 | 79 | select[multiple] { 80 | &.mo-input { 81 | padding-right: 0\0; 82 | } 83 | } -------------------------------------------------------------------------------- /scss/_variable.scss: -------------------------------------------------------------------------------- 1 | $font-size-root: 16px !default; 2 | $font-size-base: 14px !default; 3 | $line-height-base: 1.5 !default; 4 | $font-family-base: 'Pingfang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'Microsoft YaHei UI', 'WenQuanYi Micro Hei', sans-serif !default; 5 | $font-family-code: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default; 6 | $font-family-number: SourceCodeProRegular, Menlo, Monaco, Consolas, 'Courier New', monospace !default; 7 | 8 | $h1: 32px !default; 9 | $h2: 24px !default; 10 | $h3: 20px !default; 11 | $h4: 18px !default; 12 | $h5: 16px !default; 13 | $h6: 14px !default; 14 | $small: 12px!default; 15 | $color-title: #212121 !default; 16 | $color-text: #515151 !default; 17 | $color-description: #757575 !default; 18 | $color-hint: #9e9e9e !default; 19 | $color-placeholder: #bdbdbd!default; 20 | $color-border: #d3d3d3!default; 21 | $color-light: #f0f0f0!default; 22 | $color-lighter: #f5f5f5!default; 23 | $color-lightest: #fafafa!default; 24 | $color-primary: #0275d8 !default; 25 | $color-positive: #5cb85c !default; 26 | $color-negative: #d9534f !default; 27 | $form-radius: 2px!default; 28 | $form-pill: 200px!default; 29 | //34px 30 | $form-size: (font-size:14px, line-height:1.4286, padding-y:6px, padding-x:16px) !default; 31 | //24px 32 | $form-size-tiny: (font-size:12px, line-height:1.5, padding-y:2px, padding-x:12px) !default; 33 | //30px 34 | $form-size-small: (font-size:14px, line-height:1.4286, padding-y:4px, padding-x:14px) !default; 35 | //44px 36 | $form-size-large: (font-size:16px, line-height:1.625, padding-y:8px, padding-x:20px) !default; 37 | 38 | //disabled 39 | $disabled-opacity: .5 !default; 40 | $enable-form-translation: true !default; 41 | $image64-dropdown: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBmaWxsPSIjNkY2RjZGIj4KICAgICAgICAgICAgPHBvbHlnb24gdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOC4wMDAwMDAsIDguNTAwMDAwKSBzY2FsZSgxLCAtMSkgdHJhbnNsYXRlKC04LjAwMDAwMCwgLTguNTAwMDAwKSAiIHBvaW50cz0iOCA1IDEyIDEyIDQgMTIiPjwvcG9seWdvbj4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==) !default; 42 | -------------------------------------------------------------------------------- /scss/_buttons.scss: -------------------------------------------------------------------------------- 1 | @import './mixins/button'; 2 | 3 | .mo-btn { 4 | font-family: inherit; 5 | display: inline-block; 6 | cursor: pointer; 7 | user-select: none; 8 | text-align: center; 9 | vertical-align: middle; 10 | white-space: nowrap; 11 | text-decoration: none; 12 | border: rem(1) solid transparent; 13 | border-radius: 0; 14 | outline: none; 15 | appearance: none; 16 | @include buttonSize ($form-size); 17 | @include buttonStyle($color-border, #fff, $color-text, darken($color-border, 5%), $color-lighter, $color-text); 18 | 19 | //size 20 | &.mo-btn--tiny { 21 | @include buttonSize ($form-size-tiny); 22 | } 23 | &.mo-btn--small { 24 | @include buttonSize ($form-size-small); 25 | } 26 | &.mo-btn--large { 27 | @include buttonSize ($form-size-large); 28 | } 29 | 30 | //style 31 | &.mo-btn--primary { 32 | @include buttonStyle($color-primary, $color-primary, #fff, darken($color-primary, 10%), darken($color-primary, 10%), #fff); 33 | } 34 | &.mo-btn--negative { 35 | @include buttonStyle($color-negative, $color-negative, #fff, darken($color-negative, 10%), darken($color-negative, 10%), #fff); 36 | } 37 | &.mo-btn--positive { 38 | @include buttonStyle($color-positive, $color-positive, #fff, darken($color-positive, 10%), darken($color-positive, 10%), #fff); 39 | } 40 | &.mo-btn--link { 41 | @include buttonStyle(transparent, transparent, $color-primary, transparent, transparent, darken($color-primary, 10%)); 42 | } 43 | 44 | //outline 45 | 46 | &.mo-btn-outline { 47 | @include buttonStyle($color-border, transparent, $color-text, $color-border, $color-border, $color-title); 48 | } 49 | 50 | &.mo-btn-outline--primary { 51 | @include buttonStyle($color-primary,transparent, $color-primary, $color-primary, $color-primary, #fff); 52 | } 53 | 54 | &.mo-btn-outline--negative { 55 | @include buttonStyle($color-negative, transparent, $color-negative, $color-negative,$color-negative, #fff); 56 | } 57 | 58 | &.mo-btn-outline--positive { 59 | @include buttonStyle($color-positive, transparent, $color-positive, $color-positive, $color-positive, #fff); 60 | } 61 | 62 | &:not(.readonly):not([readonly]):not(.disabled):not([disabled]) { 63 | &:hover, &:active { 64 | text-decoration: none; 65 | 66 | @if $enable-form-translation { 67 | transition: all .16s cubic-bezier(.55, .09, .68, .53); 68 | } 69 | } 70 | } 71 | 72 | //readonly, disabled 73 | &.readonly, &[readonly] { 74 | cursor: default; 75 | } 76 | &.disabled, &[disabled] { 77 | cursor: not-allowed; 78 | opacity: $disabled-opacity; 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /demo/table.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | MoCss - 水墨寒的博客 9 | 10 | 11 | 14 | 15 | 16 |
17 | 目录 18 |
19 |

Mo-Table

20 |

21 | table文档 22 |

23 |
24 |
25 |
26 |

default

27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 |
col1col2col3col4
col1col2col3col4
45 |

描边 bordered

46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 |
col1col2col3col4
col1col2col3col4
64 |

响应式表格 responsive

65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 |
table col1table col2table col3table col4table col1table col2table col3table col4table col1table col2table col3table col4
table col1table col2table col3table col4table col1table col2table col3table col4table col1table col2table col3table col4
99 |
100 |
101 |
102 | 103 | 104 | -------------------------------------------------------------------------------- /demo/utils.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | MoCss - 水墨寒的博客 9 | 10 | 11 | 27 | 28 | 29 |
30 | 目录 31 |
32 |

Mo-Utils

33 |

34 | utils文档 35 |

36 |
37 |
38 |
39 |
40 |

float

41 |
42 |
mo-left
43 |
mo-right
44 |
45 |
46 |
47 |

text-align

48 |

49 | mo-text-left 50 |

51 |

52 | mo-text-center 53 |

54 |

55 | mo-text-right 56 |

57 |
58 |
59 |

text-transform

60 |

61 | mo-text-lowercase 62 |

63 |

64 | mo-text-uppercase 65 |

66 |

67 | mo-text-capitalize 68 |

69 |

text-overflow

70 |

这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本

71 |

display

72 |
    73 |
  • 74 | .mo-invisible visibility: hidden 75 |
    • 76 |
  • 77 | .mo-visible visibility: visible 78 |
    • 79 |
  • 80 | .mo-hide display: none 81 |
    • 82 |
  • 83 | .mo-show display: block 84 |
    • 85 |
  • 86 | .mo-inline display: inline 87 |
    • 88 |
  • 89 | .mo-inline-block display: inline-block 90 |
    • 91 |
92 |

background-color

93 |
94 |
mo-bg-primary
95 |
mo-bg-positive
96 |
mo-bg-negative
97 |
98 |
99 |
100 |

color

101 |
102 |
mo-text-primary
103 |
mo-text-positive
104 |
mo-text-negative
105 |
mo-text-title
106 |
mo-text-default
107 |
mo-text-description
108 |
mo-text-hint
109 |
mo-text-important
110 |
111 |
112 |
113 |
114 | 115 | 116 | -------------------------------------------------------------------------------- /demo/radio.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | MoCss - 水墨寒的博客 9 | 10 | 11 | 12 | 13 |
14 | 目录 15 |
16 |

Mo-Radio

17 |

18 | radio文档 19 |

20 |
21 |
22 |
23 |
24 |
25 | default 26 | 31 | 36 | 41 | 46 | 47 |
48 |
49 | primary 50 | 55 | 60 | 65 | 70 |
71 |
72 | negative 73 | 78 | 83 | 88 | 93 |
94 |
95 | positive 96 | 101 | 106 | 111 | 116 |
117 |
118 |
119 |
120 |
121 | 122 | 123 | -------------------------------------------------------------------------------- /demo/checkbox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | MoCss - 水墨寒的博客 9 | 10 | 11 | 12 | 13 |
14 | 目录 15 |
16 |

Mo-Checkbox

17 |

18 | checkbox文档 19 |

20 |
21 |
22 |
23 |
24 |
25 | default 26 | 31 | 36 | 41 | 46 | 47 |
48 |
49 | primary 50 | 55 | 60 | 65 | 70 |
71 |
72 | negative 73 | 78 | 83 | 88 | 93 |
94 |
95 | positive 96 | 101 | 106 | 111 | 116 |
117 |
118 |
119 |
120 |
121 | 122 | 123 | -------------------------------------------------------------------------------- /scss/_choose.scss: -------------------------------------------------------------------------------- 1 | @import './mixins/checkbox'; 2 | @import './mixins/radio'; 3 | @import './mixins/switch'; 4 | 5 | .mo-radio, .mo-checkbox, .mo-switch { 6 | position: relative; 7 | display: inline; 8 | margin: 0; 9 | user-select: none; 10 | 11 | > .icon { 12 | position: absolute; 13 | top: 50%; 14 | left: 0; 15 | margin: 0; 16 | padding: 0; 17 | transform: translate(0, -50%); 18 | border: rem(1) solid transparent; 19 | background-color: #fff; 20 | 21 | &:after { 22 | position: absolute; 23 | content: ''; 24 | } 25 | ~ span { 26 | margin-left: .5rem; 27 | } 28 | } 29 | > input { 30 | position: absolute; 31 | z-index: -1; 32 | opacity: 0; 33 | 34 | ~ .icon, ~ span { 35 | cursor: pointer; 36 | } 37 | } 38 | } 39 | //mo-radio 40 | .mo-radio { 41 | @include radioSize(1.25rem); 42 | @include radioStyle($color-placeholder); 43 | 44 | & + .mo-radio { 45 | margin-left: 1rem; 46 | } 47 | > .icon { 48 | border-radius: 50%; 49 | 50 | &:after { 51 | top: 50%; 52 | left: 50%; 53 | width: rem(12); 54 | height: rem(12); 55 | margin-top: rem(-6); 56 | margin-left: rem(-6); 57 | border-radius: 50%; 58 | background-color: transparent; 59 | } 60 | } 61 | //mo-radio--[style] 62 | &.mo-radio--primary { 63 | @include radioStyle($color-primary); 64 | } 65 | &.mo-radio--negative { 66 | @include radioStyle($color-negative); 67 | } 68 | &.mo-radio--positive { 69 | @include radioStyle($color-positive); 70 | } 71 | } 72 | //mo-checkbox 73 | .mo-checkbox { 74 | @include checkboxSize(1.25rem); 75 | @include checkboxStyle($color-placeholder); 76 | 77 | & + .mo-checkbox { 78 | margin-left: 1rem; 79 | } 80 | > .icon { 81 | border-radius: 0; 82 | 83 | &:after { 84 | top: 11.5%; 85 | left: 11.2%; 86 | width: 80%; 87 | height: 50%; 88 | transform: rotate(-50deg); 89 | border: rem(2) solid transparent; 90 | background-color: transparent; 91 | } 92 | } 93 | //mo-checkbox--[style] 94 | &.mo-checkbox--primary { 95 | @include checkboxStyle($color-primary); 96 | } 97 | &.mo-checkbox--negative { 98 | @include checkboxStyle($color-negative); 99 | } 100 | &.mo-checkbox--positive { 101 | @include checkboxStyle($color-positive); 102 | } 103 | } 104 | //mo-switch 105 | .mo-switch { 106 | @include switchSize(rem(40), rem(24)); 107 | @include switchStyle($color-placeholder); 108 | 109 | & + .mo-switch { 110 | margin-left: 1rem; 111 | } 112 | > .icon { 113 | border: rem(1) solid #dfdfdf; 114 | background-color: #dfdfdf; 115 | box-shadow: #fafafa 0 0 0 0 inset; 116 | 117 | &:before, &:after { 118 | position: absolute; 119 | top: 0; 120 | left: 0; 121 | content: ''; 122 | 123 | @if $enable-form-translation { 124 | transition: transform .35s cubic-bezier(.45, 1, .4, 1); 125 | } 126 | } 127 | &:before { 128 | background-color: #fdfdfd; 129 | } 130 | &:after { 131 | border-radius: 50%; 132 | background-color: #fff; 133 | box-shadow: 0 1px 3px rgba(0, 0, 0, .4); 134 | } 135 | } 136 | > input { 137 | &:checked ~ .icon:before { 138 | transform: scale(0); 139 | } 140 | &:active:not(:disabled):not(.disabled) ~ .icon { 141 | @if $enable-form-translation { 142 | transition: background-color .1s, border .1s; 143 | } 144 | &:after { 145 | transform: scale(1.4, 1); 146 | } 147 | } 148 | } 149 | //mo-switch--[style] 150 | &.mo-switch--primary { 151 | @include switchStyle($color-primary); 152 | } 153 | &.mo-switch--positive { 154 | @include switchStyle($color-positive); 155 | } 156 | &.mo-switch--negative { 157 | @include switchStyle($color-negative); 158 | } 159 | //mo-switch--[size] 160 | &.mo-switch--small { 161 | @include switchSize(rem(30), rem(18)); 162 | } 163 | &.mo-switch--large { 164 | font-size: 1rem; 165 | @include switchSize(rem(50), rem(30)); 166 | } 167 | &.mo-switch--reverse { 168 | padding-left: 0; 169 | padding-right: rem(40); 170 | 171 | > .icon { 172 | left: auto; 173 | right: 0; 174 | 175 | ~ span { 176 | margin-left: 0; 177 | margin-right: .5rem; 178 | } 179 | } 180 | &.mo-switch--small { 181 | padding-right: rem(30); 182 | } 183 | &.mo-switch--large { 184 | padding-right: rem(50); 185 | } 186 | } 187 | } -------------------------------------------------------------------------------- /scss/_reset.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *:before, 3 | *:after { 4 | box-sizing: border-box; 5 | } 6 | html { 7 | font-size: $font-size-root; 8 | 9 | -webkit-tap-highlight-color: transparent; 10 | -ms-text-size-adjust: 100%; 11 | -webkit-text-size-adjust: 100%; 12 | } 13 | body { 14 | font-family: $font-family-base; 15 | font-size: $font-size-base; 16 | line-height: $line-height-base; 17 | 18 | margin: 0; 19 | padding: 0; 20 | 21 | white-space: normal; 22 | 23 | color: $color-text; 24 | } 25 | //html5 26 | article, 27 | aside, 28 | footer, 29 | header, 30 | nav, 31 | section, 32 | figcaption, 33 | figure, 34 | main, 35 | details, 36 | menu { 37 | display: block; 38 | } 39 | summary { 40 | display: list-item; 41 | } 42 | template, 43 | [hidden] { 44 | display: none; 45 | } 46 | //heading 47 | h1, 48 | h2, 49 | h3, 50 | h4, 51 | h5, 52 | h6, 53 | .mo-h1, 54 | .mo-h2, 55 | .mo-h3, 56 | .mo-h4, 57 | .mo-h5, 58 | .mo-h6 { 59 | font-weight: 500; 60 | 61 | color: $color-title; 62 | } 63 | h1, 64 | h2, 65 | h3, 66 | h4, 67 | h5, 68 | h6 { 69 | line-height: 1.1; 70 | 71 | margin-top: 0; 72 | margin-bottom: .5rem; 73 | } 74 | h1, 75 | .mo-h1 { 76 | font-size: rem($h1); 77 | } 78 | h2, 79 | .mo-h2 { 80 | font-size: rem($h2); 81 | } 82 | h3, 83 | .mo-h3 { 84 | font-size: rem($h3); 85 | } 86 | h4, 87 | .mo-h4 { 88 | font-size: rem($h4); 89 | } 90 | h5, 91 | .mo-h5 { 92 | font-size: rem($h5); 93 | } 94 | h6, 95 | .mo-h6 { 96 | font-size: rem($h6); 97 | } 98 | strong, 99 | b { 100 | font-weight: 500; 101 | } 102 | i, 103 | em, 104 | dfn { 105 | font-style: italic; 106 | } 107 | small { 108 | font-size: rem($small); 109 | } 110 | sub, 111 | sup { 112 | font-size: 75%; 113 | line-height: 0; 114 | 115 | position: relative; 116 | 117 | vertical-align: baseline; 118 | } 119 | sub { 120 | bottom: -.25em; 121 | } 122 | sup { 123 | top: -.5em; 124 | } 125 | abbr[title], 126 | abbr[data-original-title] { 127 | cursor: help; 128 | 129 | border-bottom: 1px dotted #818a91; 130 | } 131 | mark { 132 | color: #000; 133 | background-color: #ff0; 134 | } 135 | //form 136 | a:focus, 137 | a:active, 138 | button::-moz-focus-inner, 139 | input[type='reset']::-moz-focus-inner, 140 | input[type='button']::-moz-focus-inner, 141 | input[type='submit']::-moz-focus-inner, 142 | select::-moz-focus-inner, 143 | input[type='file'] > input[type='button']::-moz-focus-inner { 144 | border: 0; 145 | outline: 0; 146 | } 147 | 148 | input, 149 | button, 150 | select, 151 | textarea, 152 | optgroup { 153 | font-family: inherit; 154 | line-height: inherit; 155 | 156 | margin: 0; 157 | } 158 | input[type='radio']:disabled, 159 | input[type='checkbox']:disabled { 160 | cursor: not-allowed; 161 | } 162 | input[type='date'], 163 | input[type='time'], 164 | input[type='datetime-local'], 165 | input[type='month'] { 166 | appearance: listbox; 167 | } 168 | button, 169 | input { 170 | overflow: visible; 171 | } 172 | button, 173 | select { 174 | text-transform: none; 175 | } 176 | button, 177 | html [type='button'], 178 | [type='reset'], 179 | [type='submit'] { 180 | appearance: button; 181 | } 182 | 183 | [type='checkbox'], 184 | [type='radio'] { 185 | box-sizing: border-box; 186 | padding: 0; 187 | } 188 | [type='number']::-webkit-inner-spin-button, 189 | [type='number']::-webkit-outer-spin-button { 190 | height: auto; 191 | 192 | appearance: none; 193 | } 194 | [type='search'] { 195 | appearance: none; 196 | } 197 | [type='search']::-webkit-search-cancel-button, 198 | [type='search']::-webkit-search-decoration { 199 | appearance: none; 200 | } 201 | ::-webkit-file-upload-button { 202 | font: inherit; 203 | 204 | appearance: button; 205 | } 206 | textarea { 207 | overflow: auto; 208 | 209 | resize: vertical; 210 | } 211 | fieldset { 212 | min-width: 0; 213 | margin: 0; 214 | padding: 0; 215 | 216 | border: 0; 217 | } 218 | legend { 219 | font-size: 1.5rem; 220 | line-height: inherit; 221 | 222 | display: block; 223 | 224 | width: 100%; 225 | margin-bottom: .5rem; 226 | padding: 0; 227 | } 228 | label { 229 | display: inline-block; 230 | 231 | margin-bottom: .5rem; 232 | } 233 | [role='button'] { 234 | cursor: pointer; 235 | } 236 | [disabled], 237 | .disabled { 238 | cursor: not-allowed; 239 | } 240 | //media 241 | figure { 242 | margin: 0 0 1rem; 243 | } 244 | img { 245 | vertical-align: middle; 246 | 247 | border: none; 248 | } 249 | audio, 250 | video, 251 | canvas { 252 | display: inline-block; 253 | } 254 | audio:not([controls]) { 255 | display: none; 256 | 257 | height: 0; 258 | } 259 | svg:not(:root) { 260 | overflow: hidden; 261 | } 262 | hr { 263 | overflow: visible; 264 | 265 | box-sizing: content-box; 266 | height: 0; 267 | } 268 | // pre, code 269 | pre, 270 | code { 271 | font-family: $font-family-code; 272 | } 273 | pre { 274 | font-size: 90%; 275 | 276 | display: block; 277 | overflow: auto; 278 | 279 | margin-top: 0; 280 | margin-bottom: 1rem; 281 | 282 | color: #373a3c; 283 | } 284 | code { 285 | font-size: 90%; 286 | 287 | padding: .2rem .4rem; 288 | 289 | color: #bd4147; 290 | border-radius: .25rem; 291 | background-color: #f7f7ff; 292 | } 293 | pre code { 294 | font-size: inherit; 295 | 296 | padding: 0; 297 | 298 | color: inherit; 299 | border-radius: 0; 300 | background-color: transparent; 301 | } 302 | address { 303 | font-style: normal; 304 | line-height: inherit; 305 | 306 | margin-bottom: 1rem; 307 | } 308 | //table 309 | table { 310 | border-spacing: 0; 311 | border-collapse: collapse; 312 | 313 | background-color: transparent; 314 | } 315 | caption { 316 | padding-top: .75rem; 317 | padding-bottom: .75rem; 318 | 319 | caption-side: bottom; 320 | 321 | text-align: left; 322 | 323 | color: #818a91; 324 | } 325 | th { 326 | text-align: left; 327 | } 328 | td, 329 | th { 330 | padding: 0; 331 | &[align='left'] { 332 | text-align: left; 333 | } 334 | &[align='center'] { 335 | text-align: center; 336 | } 337 | &[align='right'] { 338 | text-align: right; 339 | } 340 | } 341 | //ul ol li 342 | blockquote, 343 | p, 344 | table, 345 | ul, 346 | ol, 347 | dl { 348 | margin: 0 0 1rem 0; 349 | } 350 | ol ol, 351 | ul ul, 352 | ol ul, 353 | ul ol { 354 | margin-bottom: 0; 355 | } 356 | dt { 357 | font-weight: bold; 358 | } 359 | dd { 360 | margin-bottom: .5rem; 361 | margin-left: 0; 362 | } 363 | ul, 364 | ol { 365 | padding-left: 2rem; 366 | } 367 | 368 | a { 369 | cursor: pointer; 370 | text-decoration: none; 371 | 372 | color: $color-primary; 373 | &:hover { 374 | text-decoration: none; 375 | 376 | color: darken($color-primary, 10%); 377 | } 378 | &[href]:hover { 379 | text-decoration: underline; 380 | } 381 | } 382 | -------------------------------------------------------------------------------- /demo/buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | MoCss - 水墨寒的博客 9 | 10 | 11 | 12 | 13 |
14 | 目录 15 |
16 |

Mo-Button

17 |

18 | buttons文档 19 |

20 |
21 |
22 |
23 |
24 |
25 | default 26 | 27 | 28 | 29 | 30 | 31 |
32 |
33 | primary 34 | 35 | 36 | 37 | 38 |
39 |
40 | negative 41 | 42 | 43 | 44 | 45 |
46 |
47 | positive 48 | 49 | 50 | 51 | 52 |
53 |
54 | outline 55 | 56 | 57 | 58 | 59 |
60 |
61 | small 62 | 63 | 64 | 65 | 66 | 67 | 68 |
69 |
70 | 71 | 72 | 73 | 74 | 75 |
76 |
77 | 78 | 79 | 80 | 81 | 82 |
83 |
84 | 85 | 86 | 87 | 88 | 89 |
90 |
91 | large 92 | 93 | 94 | 95 | 96 | 97 | 98 |
99 |
100 | 101 | 102 | 103 | 104 | 105 |
106 |
107 | 108 | 109 | 110 | 111 | 112 |
113 |
114 | 115 | 116 | 117 | 118 | 119 |
120 |
121 | fluid 122 | 123 |
124 | 125 |
126 | 127 |
128 | 129 |
130 | 131 |
132 | 133 |
134 | 135 | 136 | 137 |
138 | 139 |
140 |
141 |
142 | 143 | 144 | -------------------------------------------------------------------------------- /demo/input.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | MoCss - 水墨寒的博客 9 | 10 | 11 | 17 | 18 | 19 |
20 | 目录 21 |
22 |

Mo-Input

23 |

24 | input文档 25 |

26 |
27 | 28 |
29 |
30 |
31 |
32 | default 33 | 36 | 39 | 42 |
43 |
44 | primary 45 | 48 | 51 | 54 |
55 |
56 | negative 57 | 60 | 63 | 66 |
67 |
68 | positive 69 | 72 | 75 | 78 |
79 |
80 | small 81 | 84 | 87 | 90 | 93 |
94 |
95 | large 96 | 99 | 102 | 105 | 108 |
109 |
110 | radius 111 | 114 | 117 | 120 | 123 |
124 |
125 | pill 126 | 129 | 132 | 135 | 138 |
139 |
140 | select 141 | 147 | 153 | 159 | 165 | 171 | 177 | 183 | 189 | 199 | 209 |
210 |
211 | textarea 212 | 215 | 218 |
219 |
220 |
221 |
222 |
223 | 224 | 225 | -------------------------------------------------------------------------------- /demo/switch.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | MoCss - 水墨寒的博客 9 | 10 | 11 | 12 | 13 |
14 | 目录 15 |
16 |

Mo-Switch

17 |

18 | switch文档 19 |

20 |
21 |
22 |
23 |
24 |
25 | default 26 | 31 | 36 | 41 |
42 |
43 | primary 44 | 49 | 54 | 59 |
60 |
61 | negative 62 | 67 | 72 | 77 |
78 |
79 | positive 80 | 85 | 90 | 95 |
96 |
97 | small 98 | 103 | 108 | 113 | 118 |
119 |
120 | large 121 | 126 | 131 | 136 | 141 |
142 |
143 | reverse 144 | 149 | 154 | 159 | 164 |
165 |
166 | small reverse 167 | 172 | 177 | 182 | 187 |
188 |
189 | large reverse 190 | 195 | 200 | 205 | 210 |
211 |
212 |
213 |
214 |
215 | 216 | 217 | -------------------------------------------------------------------------------- /demo/choose.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | MoCss - 水墨寒的博客 8 | 9 | 10 | 15 | 16 | 17 | 18 |
19 |

Mo-Radio | Mo-Checkbox | Mo-Switch

20 | 21 |
22 |
23 |
24 | 29 | 34 | 39 |
40 | 41 |
42 | 47 | 52 | 57 |
58 | 59 |
60 | 65 | 70 | 75 |
76 | 77 |
78 | 83 | 88 | 93 |
94 | 95 |
96 |
97 | 98 |
99 | 104 | 109 | 114 |
115 | 116 |
117 | 122 | 127 | 132 |
133 | 134 |
135 | 140 | 145 | 150 |
151 | 152 |
153 | 158 | 163 | 168 |
169 | 170 |
171 |
172 | 173 |
174 | 179 | 184 | 189 |
190 | 191 |
192 | 197 | 202 | 207 |
208 | 209 |
210 | 215 | 220 | 225 |
226 | 227 |
228 | 233 | 238 | 243 |
244 | 245 | 246 |
247 | 252 | 257 | 262 | 267 |
268 | 269 | 270 |
271 | 276 | 281 | 286 | 291 |
292 |
293 |
294 |
295 |
296 |
297 |
298 | 303 | 308 | 313 | 318 |
319 | 320 |
321 | 326 | 331 | 336 | 341 |
342 | 343 |
344 | 349 | 354 | 359 | 364 |
365 | 366 | 367 | 368 | 369 |
370 | 371 |
372 |
373 | 374 | 375 | -------------------------------------------------------------------------------- /css/mo.min.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8";*,:after,:before{box-sizing:border-box}html{font-size:16px;-webkit-tap-highlight-color:transparent;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{font-family:"Pingfang SC","Microsoft YaHei","Helvetica Neue",Helvetica,"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei UI","WenQuanYi Micro Hei",sans-serif;font-size:14px;line-height:1.5;margin:0;padding:0;white-space:normal;color:#515151}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item}[hidden],template{display:none}.mo-h1,.mo-h2,.mo-h3,.mo-h4,.mo-h5,.mo-h6,h1,h2,h3,h4,h5,h6{font-weight:500;color:#212121}h1,h2,h3,h4,h5,h6{line-height:1.1;margin-top:0;margin-bottom:.5rem}.mo-h1,h1{font-size:2rem}.mo-h2,h2{font-size:1.5rem}.mo-h3,h3{font-size:1.25rem}.mo-h4,h4{font-size:1.125rem}.mo-h5,h5{font-size:1rem}.mo-h6,h6{font-size:.875rem}b,strong{font-weight:500}dfn,em,i{font-style:italic}small{font-size:.75rem}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}abbr[data-original-title],abbr[title]{cursor:help;border-bottom:1px dotted #818a91}mark{color:#000;background-color:#ff0}a:active,a:focus,button::-moz-focus-inner,input[type=button]::-moz-focus-inner,input[type=file]>input[type=button]::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=submit]::-moz-focus-inner,select::-moz-focus-inner{border:0;outline:0}button,input,optgroup,select,textarea{font-family:inherit;line-height:inherit;margin:0}input[type=checkbox]:disabled,input[type=radio]:disabled{cursor:not-allowed}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox;-moz-appearance:listbox;appearance:listbox}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button;-moz-appearance:button;appearance:button}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto;-webkit-appearance:none;appearance:none}[type=search]{-webkit-appearance:none;-moz-appearance:none;appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button;appearance:button}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;margin:0;padding:0;border:0}legend{font-size:1.5rem;line-height:inherit;display:block;width:100%;margin-bottom:.5rem;padding:0}label{display:inline-block;margin-bottom:.5rem}[role=button]{cursor:pointer}.disabled,[disabled]{cursor:not-allowed}figure{margin:0 0 1rem}img{vertical-align:middle;border:none}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}svg:not(:root){overflow:hidden}hr{overflow:visible;box-sizing:content-box;height:0}code,pre{font-family:Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}pre{font-size:90%;display:block;overflow:auto;margin-top:0;margin-bottom:1rem;color:#373a3c}code{font-size:90%;padding:.2rem .4rem;color:#bd4147;border-radius:.25rem;background-color:#f7f7ff}pre code{font-size:inherit;padding:0;color:inherit;border-radius:0;background-color:transparent}address{font-style:normal;line-height:inherit;margin-bottom:1rem}table{border-spacing:0;border-collapse:collapse;background-color:transparent}caption{padding-top:.75rem;padding-bottom:.75rem;caption-side:bottom;text-align:left;color:#818a91}th{text-align:left}td,th{padding:0}td[align=left],th[align=left]{text-align:left}td[align=center],th[align=center]{text-align:center}td[align=right],th[align=right]{text-align:right}blockquote,dl,ol,p,table,ul{margin:0 0 1rem 0}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}ol,ul{padding-left:2rem}a{cursor:pointer;text-decoration:none;color:#0275d8}a:hover{text-decoration:none;color:#025aa5}a[href]:hover{text-decoration:underline}.mo-btn{font-family:inherit;display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center;vertical-align:middle;white-space:nowrap;text-decoration:none;border:.0625rem solid transparent;border-radius:0;outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:.875rem;line-height:1.4286;padding:.375rem 1rem;color:#515151;border-color:#d3d3d3;background-color:#fff}.mo-btn:not(.readonly):not([readonly]):not(.disabled):not([disabled]):active,.mo-btn:not(.readonly):not([readonly]):not(.disabled):not([disabled]):hover{color:#515151;border-color:#c6c6c6;background-color:#f5f5f5}.mo-btn.mo-btn--tiny{font-size:.75rem;line-height:1.5;padding:.125rem .75rem}.mo-btn.mo-btn--small{font-size:.875rem;line-height:1.4286;padding:.25rem .875rem}.mo-btn.mo-btn--large{font-size:1rem;line-height:1.625;padding:.5rem 1.25rem}.mo-btn.mo-btn--primary{color:#fff;border-color:#0275d8;background-color:#0275d8}.mo-btn.mo-btn--primary:not(.readonly):not([readonly]):not(.disabled):not([disabled]):active,.mo-btn.mo-btn--primary:not(.readonly):not([readonly]):not(.disabled):not([disabled]):hover{color:#fff;border-color:#025aa5;background-color:#025aa5}.mo-btn.mo-btn--negative{color:#fff;border-color:#d9534f;background-color:#d9534f}.mo-btn.mo-btn--negative:not(.readonly):not([readonly]):not(.disabled):not([disabled]):active,.mo-btn.mo-btn--negative:not(.readonly):not([readonly]):not(.disabled):not([disabled]):hover{color:#fff;border-color:#c9302c;background-color:#c9302c}.mo-btn.mo-btn--positive{color:#fff;border-color:#5cb85c;background-color:#5cb85c}.mo-btn.mo-btn--positive:not(.readonly):not([readonly]):not(.disabled):not([disabled]):active,.mo-btn.mo-btn--positive:not(.readonly):not([readonly]):not(.disabled):not([disabled]):hover{color:#fff;border-color:#449d44;background-color:#449d44}.mo-btn.mo-btn--link{color:#0275d8;border-color:transparent;background-color:transparent}.mo-btn.mo-btn--link:not(.readonly):not([readonly]):not(.disabled):not([disabled]):active,.mo-btn.mo-btn--link:not(.readonly):not([readonly]):not(.disabled):not([disabled]):hover{color:#025aa5;border-color:transparent;background-color:transparent}.mo-btn.mo-btn-outline{color:#515151;border-color:#d3d3d3;background-color:transparent}.mo-btn.mo-btn-outline:not(.readonly):not([readonly]):not(.disabled):not([disabled]):active,.mo-btn.mo-btn-outline:not(.readonly):not([readonly]):not(.disabled):not([disabled]):hover{color:#212121;border-color:#d3d3d3;background-color:#d3d3d3}.mo-btn.mo-btn-outline--primary{color:#0275d8;border-color:#0275d8;background-color:transparent}.mo-btn.mo-btn-outline--primary:not(.readonly):not([readonly]):not(.disabled):not([disabled]):active,.mo-btn.mo-btn-outline--primary:not(.readonly):not([readonly]):not(.disabled):not([disabled]):hover{color:#fff;border-color:#0275d8;background-color:#0275d8}.mo-btn.mo-btn-outline--negative{color:#d9534f;border-color:#d9534f;background-color:transparent}.mo-btn.mo-btn-outline--negative:not(.readonly):not([readonly]):not(.disabled):not([disabled]):active,.mo-btn.mo-btn-outline--negative:not(.readonly):not([readonly]):not(.disabled):not([disabled]):hover{color:#fff;border-color:#d9534f;background-color:#d9534f}.mo-btn.mo-btn-outline--positive{color:#5cb85c;border-color:#5cb85c;background-color:transparent}.mo-btn.mo-btn-outline--positive:not(.readonly):not([readonly]):not(.disabled):not([disabled]):active,.mo-btn.mo-btn-outline--positive:not(.readonly):not([readonly]):not(.disabled):not([disabled]):hover{color:#fff;border-color:#5cb85c;background-color:#5cb85c}.mo-btn:not(.readonly):not([readonly]):not(.disabled):not([disabled]):active,.mo-btn:not(.readonly):not([readonly]):not(.disabled):not([disabled]):hover{text-decoration:none;-webkit-transition:all .16s cubic-bezier(.55,.09,.68,.53);transition:all .16s cubic-bezier(.55,.09,.68,.53)}.mo-btn.readonly,.mo-btn[readonly]{cursor:default}.mo-btn.disabled,.mo-btn[disabled]{cursor:not-allowed;opacity:.5}.mo-input{font-family:inherit;display:inline-block;width:100%;color:#515151;border:.0625rem solid transparent;border-radius:0;outline:0;background-color:#fff;background-image:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:#d3d3d3;font-size:.875rem;line-height:1.4286;height:2.12502rem;padding:.375rem 1rem}.mo-input:not(.readonly):not([readonly]):not(.disabled):not([disabled]):focus{border-color:#0275d8;box-shadow:0 0 8px rgba(2,117,216,.35)}.mo-input.mo-input--tiny{font-size:.75rem;line-height:1.5;height:1.5rem;padding:.125rem .75rem}.mo-input.mo-input--small{font-size:.875rem;line-height:1.4286;height:1.87503rem;padding:.25rem .875rem}.mo-input.mo-input--large{font-size:1rem;line-height:1.625;height:2.75rem;padding:.5rem 1.25rem}.mo-input.mo-input--primary{border-color:#0275d8}.mo-input.mo-input--primary:not(.readonly):not([readonly]):not(.disabled):not([disabled]):focus{border-color:#0275d8;box-shadow:0 0 8px rgba(2,117,216,.35)}.mo-input.mo-input--positive{border-color:#5cb85c}.mo-input.mo-input--positive:not(.readonly):not([readonly]):not(.disabled):not([disabled]):focus{border-color:#5cb85c;box-shadow:0 0 8px rgba(92,184,92,.35)}.mo-input.mo-input--negative{border-color:#d9534f}.mo-input.mo-input--negative:not(.readonly):not([readonly]):not(.disabled):not([disabled]):focus{border-color:#d9534f;box-shadow:0 0 8px rgba(217,83,79,.35)}.mo-input::-webkit-input-placeholder{color:#bdbdbd}.mo-input::-moz-placeholder{color:#bdbdbd}.mo-input:-ms-input-placeholder{color:#bdbdbd}.mo-input:not(.readonly):not([readonly]):not(.disabled):not([disabled]):focus{-webkit-transition:all .16s cubic-bezier(.55,.09,.68,.53);transition:all .16s cubic-bezier(.55,.09,.68,.53);outline:0}.mo-input.readonly,.mo-input[readonly]{cursor:default}.mo-input.disabled,.mo-input[disabled]{cursor:not-allowed;opacity:.5}select.mo-input:not([multiple]){padding-right:1.75rem;vertical-align:middle;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBmaWxsPSIjNkY2RjZGIj4KICAgICAgICAgICAgPHBvbHlnb24gdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOC4wMDAwMDAsIDguNTAwMDAwKSBzY2FsZSgxLCAtMSkgdHJhbnNsYXRlKC04LjAwMDAwMCwgLTguNTAwMDAwKSAiIHBvaW50cz0iOCA1IDEyIDEyIDQgMTIiPjwvcG9seWdvbj4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==);background-repeat:no-repeat;background-position:right .3125rem center}select.mo-input:not([multiple])::-ms-expand{display:none}select[multiple].mo-input,textarea.mo-input{height:auto}.mo-checkbox,.mo-radio,.mo-switch{position:relative;display:inline;margin:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mo-checkbox>.icon,.mo-radio>.icon,.mo-switch>.icon{position:absolute;top:50%;left:0;margin:0;padding:0;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);border:.0625rem solid transparent;background-color:#fff}.mo-checkbox>.icon:after,.mo-radio>.icon:after,.mo-switch>.icon:after{position:absolute;content:''}.mo-checkbox>.icon~span,.mo-radio>.icon~span,.mo-switch>.icon~span{margin-left:.5rem}.mo-checkbox>input,.mo-radio>input,.mo-switch>input{position:absolute;z-index:-1;opacity:0}.mo-checkbox>input~.icon,.mo-checkbox>input~span,.mo-radio>input~.icon,.mo-radio>input~span,.mo-switch>input~.icon,.mo-switch>input~span{cursor:pointer}.mo-radio{padding-left:1.25rem}.mo-radio>.icon{width:1.25rem;height:1.25rem}.mo-radio>.icon{border-color:#bdbdbd}.mo-radio>input[type=radio]:checked~.icon:after{-webkit-transition:all 60ms cubic-bezier(.55,.09,.68,.53);transition:all 60ms cubic-bezier(.55,.09,.68,.53);background-color:#bdbdbd}.mo-radio>input[type=radio].disabled~.icon,.mo-radio>input[type=radio].disabled~span,.mo-radio>input[type=radio]:disabled~.icon,.mo-radio>input[type=radio]:disabled~span{opacity:.5;cursor:not-allowed}.mo-radio+.mo-radio{margin-left:1rem}.mo-radio>.icon{border-radius:50%}.mo-radio>.icon:after{top:50%;left:50%;width:.75rem;height:.75rem;margin-top:-.375rem;margin-left:-.375rem;border-radius:50%;background-color:transparent}.mo-radio.mo-radio--primary>.icon{border-color:#0275d8}.mo-radio.mo-radio--primary>input[type=radio]:checked~.icon:after{-webkit-transition:all 60ms cubic-bezier(.55,.09,.68,.53);transition:all 60ms cubic-bezier(.55,.09,.68,.53);background-color:#0275d8}.mo-radio.mo-radio--primary>input[type=radio].disabled~.icon,.mo-radio.mo-radio--primary>input[type=radio].disabled~span,.mo-radio.mo-radio--primary>input[type=radio]:disabled~.icon,.mo-radio.mo-radio--primary>input[type=radio]:disabled~span{opacity:.5;cursor:not-allowed}.mo-radio.mo-radio--negative>.icon{border-color:#d9534f}.mo-radio.mo-radio--negative>input[type=radio]:checked~.icon:after{-webkit-transition:all 60ms cubic-bezier(.55,.09,.68,.53);transition:all 60ms cubic-bezier(.55,.09,.68,.53);background-color:#d9534f}.mo-radio.mo-radio--negative>input[type=radio].disabled~.icon,.mo-radio.mo-radio--negative>input[type=radio].disabled~span,.mo-radio.mo-radio--negative>input[type=radio]:disabled~.icon,.mo-radio.mo-radio--negative>input[type=radio]:disabled~span{opacity:.5;cursor:not-allowed}.mo-radio.mo-radio--positive>.icon{border-color:#5cb85c}.mo-radio.mo-radio--positive>input[type=radio]:checked~.icon:after{-webkit-transition:all 60ms cubic-bezier(.55,.09,.68,.53);transition:all 60ms cubic-bezier(.55,.09,.68,.53);background-color:#5cb85c}.mo-radio.mo-radio--positive>input[type=radio].disabled~.icon,.mo-radio.mo-radio--positive>input[type=radio].disabled~span,.mo-radio.mo-radio--positive>input[type=radio]:disabled~.icon,.mo-radio.mo-radio--positive>input[type=radio]:disabled~span{opacity:.5;cursor:not-allowed}.mo-checkbox{padding-left:1.25rem}.mo-checkbox>.icon{width:1.25rem;height:1.25rem}.mo-checkbox>.icon{border-color:#bdbdbd}.mo-checkbox>input[type=checkbox]:checked~.icon:after{-webkit-transition:all 60ms cubic-bezier(.55,.09,.68,.53);transition:all 60ms cubic-bezier(.55,.09,.68,.53);border-left-color:#bdbdbd;border-bottom-color:#bdbdbd}.mo-checkbox>input[type=checkbox].disabled~.icon,.mo-checkbox>input[type=checkbox].disabled~span,.mo-checkbox>input[type=checkbox]:disabled~.icon,.mo-checkbox>input[type=checkbox]:disabled~span{opacity:.5;cursor:not-allowed}.mo-checkbox+.mo-checkbox{margin-left:1rem}.mo-checkbox>.icon{border-radius:0}.mo-checkbox>.icon:after{top:11.5%;left:11.2%;width:80%;height:50%;-webkit-transform:rotate(-50deg);transform:rotate(-50deg);border:.125rem solid transparent;background-color:transparent}.mo-checkbox.mo-checkbox--primary>.icon{border-color:#0275d8}.mo-checkbox.mo-checkbox--primary>input[type=checkbox]:checked~.icon:after{-webkit-transition:all 60ms cubic-bezier(.55,.09,.68,.53);transition:all 60ms cubic-bezier(.55,.09,.68,.53);border-left-color:#0275d8;border-bottom-color:#0275d8}.mo-checkbox.mo-checkbox--primary>input[type=checkbox].disabled~.icon,.mo-checkbox.mo-checkbox--primary>input[type=checkbox].disabled~span,.mo-checkbox.mo-checkbox--primary>input[type=checkbox]:disabled~.icon,.mo-checkbox.mo-checkbox--primary>input[type=checkbox]:disabled~span{opacity:.5;cursor:not-allowed}.mo-checkbox.mo-checkbox--negative>.icon{border-color:#d9534f}.mo-checkbox.mo-checkbox--negative>input[type=checkbox]:checked~.icon:after{-webkit-transition:all 60ms cubic-bezier(.55,.09,.68,.53);transition:all 60ms cubic-bezier(.55,.09,.68,.53);border-left-color:#d9534f;border-bottom-color:#d9534f}.mo-checkbox.mo-checkbox--negative>input[type=checkbox].disabled~.icon,.mo-checkbox.mo-checkbox--negative>input[type=checkbox].disabled~span,.mo-checkbox.mo-checkbox--negative>input[type=checkbox]:disabled~.icon,.mo-checkbox.mo-checkbox--negative>input[type=checkbox]:disabled~span{opacity:.5;cursor:not-allowed}.mo-checkbox.mo-checkbox--positive>.icon{border-color:#5cb85c}.mo-checkbox.mo-checkbox--positive>input[type=checkbox]:checked~.icon:after{-webkit-transition:all 60ms cubic-bezier(.55,.09,.68,.53);transition:all 60ms cubic-bezier(.55,.09,.68,.53);border-left-color:#5cb85c;border-bottom-color:#5cb85c}.mo-checkbox.mo-checkbox--positive>input[type=checkbox].disabled~.icon,.mo-checkbox.mo-checkbox--positive>input[type=checkbox].disabled~span,.mo-checkbox.mo-checkbox--positive>input[type=checkbox]:disabled~.icon,.mo-checkbox.mo-checkbox--positive>input[type=checkbox]:disabled~span{opacity:.5;cursor:not-allowed}.mo-switch{padding-left:2.5rem}.mo-switch>.icon{width:2.5rem;height:1.5rem;border-radius:1.5rem}.mo-switch>.icon:before{width:2.375rem;height:1.375rem;border-radius:.6875rem}.mo-switch>.icon:after{width:1.375rem;height:1.375rem}.mo-switch>input:checked~.icon:after{-webkit-transform:translateX(1rem);transform:translateX(1rem)}.mo-switch>input:checked~.icon{border-color:#bdbdbd;background-color:#bdbdbd}.mo-switch>input.disabled~.icon,.mo-switch>input.disabled~span,.mo-switch>input:disabled~.icon,.mo-switch>input:disabled~span{opacity:.5;cursor:not-allowed}.mo-switch+.mo-switch{margin-left:1rem}.mo-switch>.icon{border:.0625rem solid #dfdfdf;background-color:#dfdfdf;box-shadow:#fafafa 0 0 0 0 inset}.mo-switch>.icon:after,.mo-switch>.icon:before{position:absolute;top:0;left:0;content:'';-webkit-transition:-webkit-transform .35s cubic-bezier(.45,1,.4,1);transition:-webkit-transform .35s cubic-bezier(.45,1,.4,1);transition:transform .35s cubic-bezier(.45,1,.4,1);transition:transform .35s cubic-bezier(.45,1,.4,1),-webkit-transform .35s cubic-bezier(.45,1,.4,1)}.mo-switch>.icon:before{background-color:#fdfdfd}.mo-switch>.icon:after{border-radius:50%;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4)}.mo-switch>input:checked~.icon:before{-webkit-transform:scale(0);transform:scale(0)}.mo-switch>input:active:not(:disabled):not(.disabled)~.icon{-webkit-transition:background-color .1s,border .1s;transition:background-color .1s,border .1s}.mo-switch>input:active:not(:disabled):not(.disabled)~.icon:after{-webkit-transform:scale(1.4,1);transform:scale(1.4,1)}.mo-switch.mo-switch--primary>input:checked~.icon{border-color:#0275d8;background-color:#0275d8}.mo-switch.mo-switch--primary>input.disabled~.icon,.mo-switch.mo-switch--primary>input.disabled~span,.mo-switch.mo-switch--primary>input:disabled~.icon,.mo-switch.mo-switch--primary>input:disabled~span{opacity:.5;cursor:not-allowed}.mo-switch.mo-switch--positive>input:checked~.icon{border-color:#5cb85c;background-color:#5cb85c}.mo-switch.mo-switch--positive>input.disabled~.icon,.mo-switch.mo-switch--positive>input.disabled~span,.mo-switch.mo-switch--positive>input:disabled~.icon,.mo-switch.mo-switch--positive>input:disabled~span{opacity:.5;cursor:not-allowed}.mo-switch.mo-switch--negative>input:checked~.icon{border-color:#d9534f;background-color:#d9534f}.mo-switch.mo-switch--negative>input.disabled~.icon,.mo-switch.mo-switch--negative>input.disabled~span,.mo-switch.mo-switch--negative>input:disabled~.icon,.mo-switch.mo-switch--negative>input:disabled~span{opacity:.5;cursor:not-allowed}.mo-switch.mo-switch--small{padding-left:1.875rem}.mo-switch.mo-switch--small>.icon{width:1.875rem;height:1.125rem;border-radius:1.125rem}.mo-switch.mo-switch--small>.icon:before{width:1.75rem;height:1rem;border-radius:.5rem}.mo-switch.mo-switch--small>.icon:after{width:1rem;height:1rem}.mo-switch.mo-switch--small>input:checked~.icon:after{-webkit-transform:translateX(.75rem);transform:translateX(.75rem)}.mo-switch.mo-switch--large{font-size:1rem;padding-left:3.125rem}.mo-switch.mo-switch--large>.icon{width:3.125rem;height:1.875rem;border-radius:1.875rem}.mo-switch.mo-switch--large>.icon:before{width:3rem;height:1.75rem;border-radius:.875rem}.mo-switch.mo-switch--large>.icon:after{width:1.75rem;height:1.75rem}.mo-switch.mo-switch--large>input:checked~.icon:after{-webkit-transform:translateX(1.25rem);transform:translateX(1.25rem)}.mo-switch.mo-switch--reverse{padding-left:0;padding-right:2.5rem}.mo-switch.mo-switch--reverse>.icon{left:auto;right:0}.mo-switch.mo-switch--reverse>.icon~span{margin-left:0;margin-right:.5rem}.mo-switch.mo-switch--reverse.mo-switch--small{padding-right:1.875rem}.mo-switch.mo-switch--reverse.mo-switch--large{padding-right:3.125rem}[class*=' mo-table'],[class^=mo-table]{width:100%;max-width:100%;margin-bottom:1rem;background-color:transparent}[class*=' mo-table'] td,[class*=' mo-table'] th,[class^=mo-table] td,[class^=mo-table] th{padding:.625rem;vertical-align:top;border-top:1px solid #d3d3d3}[class*=' mo-table'] td[align=left],[class*=' mo-table'] th[align=left],[class^=mo-table] td[align=left],[class^=mo-table] th[align=left]{text-align:left}[class*=' mo-table'] td[align=center],[class*=' mo-table'] th[align=center],[class^=mo-table] td[align=center],[class^=mo-table] th[align=center]{text-align:center}[class*=' mo-table'] td[align=right],[class*=' mo-table'] th[align=right],[class^=mo-table] td[align=right],[class^=mo-table] th[align=right]{text-align:right}[class*=' mo-table'] thead th,[class^=mo-table] thead th{vertical-align:bottom;border-bottom:2px solid #d3d3d3}.mo-table--bordered td,.mo-table--bordered th{border:1px solid #d3d3d3}.mo-table--bordered thead th{border-bottom-width:2px}.mo-table--responsive{display:block;overflow-x:auto;width:100%;-ms-overflow-style:-ms-autohiding-scrollbar}.mo-left{float:left!important}.mo-right{float:right!important}.mo-clearfix:after,.mo-clearfix:before{display:table;content:' '}.mo-clearfix:after{clear:both}.mo-text-left{text-align:left!important}.mo-text-center{text-align:center!important}.mo-text-right{text-align:right!important}.mo-text-lowercase{text-transform:lowercase!important}.mo-text-uppercase{text-transform:uppercase!important}.mo-text-capitalize{text-transform:capitalize!important}.mo-text-overflow{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mo-invisible{visibility:hidden!important}.mo-visible{visibility:visible!important}.mo-hide{display:none!important}.mo-show{display:block!important}.mo-inline{display:inline!important}.mo-inline-block{display:inline-block!important}.mo-bg-negative,.mo-bg-positive,.mo-bg-primary{color:#fff}.mo-bg-primary{background-color:#0275d8}.mo-bg-positive{background-color:#5cb85c}.mo-bg-negative{background-color:#d9534f}.mo-text-primary{color:#0275d8}.mo-text-positive{color:#5cb85c}.mo-text-negative{color:#d9534f}.mo-text-title{color:#212121}.mo-text-default{color:#515151}.mo-text-description{color:#757575}.mo-text-hint{color:#9e9e9e}.mo-code,.mo-text-important{color:#bd4147}.mo-radius{border-radius:2px}.mo-pill{border-radius:200px}.mo-fluid{display:block;width:100%} -------------------------------------------------------------------------------- /css/mo.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /** 3 | * 去掉数值的单位 4 | * stripUnits(16px) => 16 5 | */ 6 | /** 7 | * 多数值转rem 8 | * 用于padding / margin等 9 | * eg. rem(16 32 16 16) => 1rem 2rem 1rem 1rem 10 | */ 11 | /** 12 | * 清除浮动 13 | */ 14 | /** 15 | * 设置placeholder 16 | */ 17 | *, 18 | *:before, 19 | *:after { 20 | box-sizing: border-box; 21 | } 22 | 23 | html { 24 | font-size: 16px; 25 | -webkit-tap-highlight-color: transparent; 26 | -ms-text-size-adjust: 100%; 27 | -webkit-text-size-adjust: 100%; 28 | } 29 | 30 | body { 31 | font-family: "Pingfang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei UI", "WenQuanYi Micro Hei", sans-serif; 32 | font-size: 14px; 33 | line-height: 1.5; 34 | margin: 0; 35 | padding: 0; 36 | white-space: normal; 37 | color: #515151; 38 | } 39 | 40 | article, 41 | aside, 42 | footer, 43 | header, 44 | nav, 45 | section, 46 | figcaption, 47 | figure, 48 | main, 49 | details, 50 | menu { 51 | display: block; 52 | } 53 | 54 | summary { 55 | display: list-item; 56 | } 57 | 58 | template, 59 | [hidden] { 60 | display: none; 61 | } 62 | 63 | h1, 64 | h2, 65 | h3, 66 | h4, 67 | h5, 68 | h6, 69 | .mo-h1, 70 | .mo-h2, 71 | .mo-h3, 72 | .mo-h4, 73 | .mo-h5, 74 | .mo-h6 { 75 | font-weight: 500; 76 | color: #212121; 77 | } 78 | 79 | h1, 80 | h2, 81 | h3, 82 | h4, 83 | h5, 84 | h6 { 85 | line-height: 1.1; 86 | margin-top: 0; 87 | margin-bottom: .5rem; 88 | } 89 | 90 | h1, 91 | .mo-h1 { 92 | font-size: 2rem; 93 | } 94 | 95 | h2, 96 | .mo-h2 { 97 | font-size: 1.5rem; 98 | } 99 | 100 | h3, 101 | .mo-h3 { 102 | font-size: 1.25rem; 103 | } 104 | 105 | h4, 106 | .mo-h4 { 107 | font-size: 1.125rem; 108 | } 109 | 110 | h5, 111 | .mo-h5 { 112 | font-size: 1rem; 113 | } 114 | 115 | h6, 116 | .mo-h6 { 117 | font-size: 0.875rem; 118 | } 119 | 120 | strong, 121 | b { 122 | font-weight: 500; 123 | } 124 | 125 | i, 126 | em, 127 | dfn { 128 | font-style: italic; 129 | } 130 | 131 | small { 132 | font-size: 0.75rem; 133 | } 134 | 135 | sub, 136 | sup { 137 | font-size: 75%; 138 | line-height: 0; 139 | position: relative; 140 | vertical-align: baseline; 141 | } 142 | 143 | sub { 144 | bottom: -.25em; 145 | } 146 | 147 | sup { 148 | top: -.5em; 149 | } 150 | 151 | abbr[title], 152 | abbr[data-original-title] { 153 | cursor: help; 154 | border-bottom: 1px dotted #818a91; 155 | } 156 | 157 | mark { 158 | color: #000; 159 | background-color: #ff0; 160 | } 161 | 162 | a:focus, 163 | a:active, 164 | button::-moz-focus-inner, 165 | input[type='reset']::-moz-focus-inner, 166 | input[type='button']::-moz-focus-inner, 167 | input[type='submit']::-moz-focus-inner, 168 | select::-moz-focus-inner, 169 | input[type='file'] > input[type='button']::-moz-focus-inner { 170 | border: 0; 171 | outline: 0; 172 | } 173 | 174 | input, 175 | button, 176 | select, 177 | textarea, 178 | optgroup { 179 | font-family: inherit; 180 | line-height: inherit; 181 | margin: 0; 182 | } 183 | 184 | input[type='radio']:disabled, 185 | input[type='checkbox']:disabled { 186 | cursor: not-allowed; 187 | } 188 | 189 | input[type='date'], 190 | input[type='time'], 191 | input[type='datetime-local'], 192 | input[type='month'] { 193 | -webkit-appearance: listbox; 194 | -moz-appearance: listbox; 195 | appearance: listbox; 196 | } 197 | 198 | button, 199 | input { 200 | overflow: visible; 201 | } 202 | 203 | button, 204 | select { 205 | text-transform: none; 206 | } 207 | 208 | button, 209 | html [type='button'], 210 | [type='reset'], 211 | [type='submit'] { 212 | -webkit-appearance: button; 213 | -moz-appearance: button; 214 | appearance: button; 215 | } 216 | 217 | [type='checkbox'], 218 | [type='radio'] { 219 | box-sizing: border-box; 220 | padding: 0; 221 | } 222 | 223 | [type='number']::-webkit-inner-spin-button, 224 | [type='number']::-webkit-outer-spin-button { 225 | height: auto; 226 | -webkit-appearance: none; 227 | appearance: none; 228 | } 229 | 230 | [type='search'] { 231 | -webkit-appearance: none; 232 | -moz-appearance: none; 233 | appearance: none; 234 | } 235 | 236 | [type='search']::-webkit-search-cancel-button, 237 | [type='search']::-webkit-search-decoration { 238 | -webkit-appearance: none; 239 | appearance: none; 240 | } 241 | 242 | ::-webkit-file-upload-button { 243 | font: inherit; 244 | -webkit-appearance: button; 245 | appearance: button; 246 | } 247 | 248 | textarea { 249 | overflow: auto; 250 | resize: vertical; 251 | } 252 | 253 | fieldset { 254 | min-width: 0; 255 | margin: 0; 256 | padding: 0; 257 | border: 0; 258 | } 259 | 260 | legend { 261 | font-size: 1.5rem; 262 | line-height: inherit; 263 | display: block; 264 | width: 100%; 265 | margin-bottom: .5rem; 266 | padding: 0; 267 | } 268 | 269 | label { 270 | display: inline-block; 271 | margin-bottom: .5rem; 272 | } 273 | 274 | [role='button'] { 275 | cursor: pointer; 276 | } 277 | 278 | [disabled], 279 | .disabled { 280 | cursor: not-allowed; 281 | } 282 | 283 | figure { 284 | margin: 0 0 1rem; 285 | } 286 | 287 | img { 288 | vertical-align: middle; 289 | border: none; 290 | } 291 | 292 | audio, 293 | video, 294 | canvas { 295 | display: inline-block; 296 | } 297 | 298 | audio:not([controls]) { 299 | display: none; 300 | height: 0; 301 | } 302 | 303 | svg:not(:root) { 304 | overflow: hidden; 305 | } 306 | 307 | hr { 308 | overflow: visible; 309 | box-sizing: content-box; 310 | height: 0; 311 | } 312 | 313 | pre, 314 | code { 315 | font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 316 | } 317 | 318 | pre { 319 | font-size: 90%; 320 | display: block; 321 | overflow: auto; 322 | margin-top: 0; 323 | margin-bottom: 1rem; 324 | color: #373a3c; 325 | } 326 | 327 | code { 328 | font-size: 90%; 329 | padding: .2rem .4rem; 330 | color: #bd4147; 331 | border-radius: .25rem; 332 | background-color: #f7f7ff; 333 | } 334 | 335 | pre code { 336 | font-size: inherit; 337 | padding: 0; 338 | color: inherit; 339 | border-radius: 0; 340 | background-color: transparent; 341 | } 342 | 343 | address { 344 | font-style: normal; 345 | line-height: inherit; 346 | margin-bottom: 1rem; 347 | } 348 | 349 | table { 350 | border-spacing: 0; 351 | border-collapse: collapse; 352 | background-color: transparent; 353 | } 354 | 355 | caption { 356 | padding-top: .75rem; 357 | padding-bottom: .75rem; 358 | caption-side: bottom; 359 | text-align: left; 360 | color: #818a91; 361 | } 362 | 363 | th { 364 | text-align: left; 365 | } 366 | 367 | td, 368 | th { 369 | padding: 0; 370 | } 371 | 372 | td[align='left'], 373 | th[align='left'] { 374 | text-align: left; 375 | } 376 | 377 | td[align='center'], 378 | th[align='center'] { 379 | text-align: center; 380 | } 381 | 382 | td[align='right'], 383 | th[align='right'] { 384 | text-align: right; 385 | } 386 | 387 | blockquote, 388 | p, 389 | table, 390 | ul, 391 | ol, 392 | dl { 393 | margin: 0 0 1rem 0; 394 | } 395 | 396 | ol ol, 397 | ul ul, 398 | ol ul, 399 | ul ol { 400 | margin-bottom: 0; 401 | } 402 | 403 | dt { 404 | font-weight: bold; 405 | } 406 | 407 | dd { 408 | margin-bottom: .5rem; 409 | margin-left: 0; 410 | } 411 | 412 | ul, 413 | ol { 414 | padding-left: 2rem; 415 | } 416 | 417 | a { 418 | cursor: pointer; 419 | text-decoration: none; 420 | color: #0275d8; 421 | } 422 | 423 | a:hover { 424 | text-decoration: none; 425 | color: #025aa5; 426 | } 427 | 428 | a[href]:hover { 429 | text-decoration: underline; 430 | } 431 | 432 | .mo-btn { 433 | font-family: inherit; 434 | display: inline-block; 435 | cursor: pointer; 436 | -webkit-user-select: none; 437 | -moz-user-select: none; 438 | -ms-user-select: none; 439 | user-select: none; 440 | text-align: center; 441 | vertical-align: middle; 442 | white-space: nowrap; 443 | text-decoration: none; 444 | border: 0.0625rem solid transparent; 445 | border-radius: 0; 446 | outline: none; 447 | -webkit-appearance: none; 448 | -moz-appearance: none; 449 | appearance: none; 450 | font-size: 0.875rem; 451 | line-height: 1.4286; 452 | padding: 0.375rem 1rem; 453 | color: #515151; 454 | border-color: #d3d3d3; 455 | background-color: #fff; 456 | } 457 | 458 | .mo-btn:not(.readonly):not([readonly]):not(.disabled):not([disabled]):hover, .mo-btn:not(.readonly):not([readonly]):not(.disabled):not([disabled]):active { 459 | color: #515151; 460 | border-color: #c6c6c6; 461 | background-color: #f5f5f5; 462 | } 463 | 464 | .mo-btn.mo-btn--tiny { 465 | font-size: 0.75rem; 466 | line-height: 1.5; 467 | padding: 0.125rem 0.75rem; 468 | } 469 | 470 | .mo-btn.mo-btn--small { 471 | font-size: 0.875rem; 472 | line-height: 1.4286; 473 | padding: 0.25rem 0.875rem; 474 | } 475 | 476 | .mo-btn.mo-btn--large { 477 | font-size: 1rem; 478 | line-height: 1.625; 479 | padding: 0.5rem 1.25rem; 480 | } 481 | 482 | .mo-btn.mo-btn--primary { 483 | color: #fff; 484 | border-color: #0275d8; 485 | background-color: #0275d8; 486 | } 487 | 488 | .mo-btn.mo-btn--primary:not(.readonly):not([readonly]):not(.disabled):not([disabled]):hover, .mo-btn.mo-btn--primary:not(.readonly):not([readonly]):not(.disabled):not([disabled]):active { 489 | color: #fff; 490 | border-color: #025aa5; 491 | background-color: #025aa5; 492 | } 493 | 494 | .mo-btn.mo-btn--negative { 495 | color: #fff; 496 | border-color: #d9534f; 497 | background-color: #d9534f; 498 | } 499 | 500 | .mo-btn.mo-btn--negative:not(.readonly):not([readonly]):not(.disabled):not([disabled]):hover, .mo-btn.mo-btn--negative:not(.readonly):not([readonly]):not(.disabled):not([disabled]):active { 501 | color: #fff; 502 | border-color: #c9302c; 503 | background-color: #c9302c; 504 | } 505 | 506 | .mo-btn.mo-btn--positive { 507 | color: #fff; 508 | border-color: #5cb85c; 509 | background-color: #5cb85c; 510 | } 511 | 512 | .mo-btn.mo-btn--positive:not(.readonly):not([readonly]):not(.disabled):not([disabled]):hover, .mo-btn.mo-btn--positive:not(.readonly):not([readonly]):not(.disabled):not([disabled]):active { 513 | color: #fff; 514 | border-color: #449d44; 515 | background-color: #449d44; 516 | } 517 | 518 | .mo-btn.mo-btn--link { 519 | color: #0275d8; 520 | border-color: transparent; 521 | background-color: transparent; 522 | } 523 | 524 | .mo-btn.mo-btn--link:not(.readonly):not([readonly]):not(.disabled):not([disabled]):hover, .mo-btn.mo-btn--link:not(.readonly):not([readonly]):not(.disabled):not([disabled]):active { 525 | color: #025aa5; 526 | border-color: transparent; 527 | background-color: transparent; 528 | } 529 | 530 | .mo-btn.mo-btn-outline { 531 | color: #515151; 532 | border-color: #d3d3d3; 533 | background-color: transparent; 534 | } 535 | 536 | .mo-btn.mo-btn-outline:not(.readonly):not([readonly]):not(.disabled):not([disabled]):hover, .mo-btn.mo-btn-outline:not(.readonly):not([readonly]):not(.disabled):not([disabled]):active { 537 | color: #212121; 538 | border-color: #d3d3d3; 539 | background-color: #d3d3d3; 540 | } 541 | 542 | .mo-btn.mo-btn-outline--primary { 543 | color: #0275d8; 544 | border-color: #0275d8; 545 | background-color: transparent; 546 | } 547 | 548 | .mo-btn.mo-btn-outline--primary:not(.readonly):not([readonly]):not(.disabled):not([disabled]):hover, .mo-btn.mo-btn-outline--primary:not(.readonly):not([readonly]):not(.disabled):not([disabled]):active { 549 | color: #fff; 550 | border-color: #0275d8; 551 | background-color: #0275d8; 552 | } 553 | 554 | .mo-btn.mo-btn-outline--negative { 555 | color: #d9534f; 556 | border-color: #d9534f; 557 | background-color: transparent; 558 | } 559 | 560 | .mo-btn.mo-btn-outline--negative:not(.readonly):not([readonly]):not(.disabled):not([disabled]):hover, .mo-btn.mo-btn-outline--negative:not(.readonly):not([readonly]):not(.disabled):not([disabled]):active { 561 | color: #fff; 562 | border-color: #d9534f; 563 | background-color: #d9534f; 564 | } 565 | 566 | .mo-btn.mo-btn-outline--positive { 567 | color: #5cb85c; 568 | border-color: #5cb85c; 569 | background-color: transparent; 570 | } 571 | 572 | .mo-btn.mo-btn-outline--positive:not(.readonly):not([readonly]):not(.disabled):not([disabled]):hover, .mo-btn.mo-btn-outline--positive:not(.readonly):not([readonly]):not(.disabled):not([disabled]):active { 573 | color: #fff; 574 | border-color: #5cb85c; 575 | background-color: #5cb85c; 576 | } 577 | 578 | .mo-btn:not(.readonly):not([readonly]):not(.disabled):not([disabled]):hover, .mo-btn:not(.readonly):not([readonly]):not(.disabled):not([disabled]):active { 579 | text-decoration: none; 580 | -webkit-transition: all 0.16s cubic-bezier(0.55, 0.09, 0.68, 0.53); 581 | transition: all 0.16s cubic-bezier(0.55, 0.09, 0.68, 0.53); 582 | } 583 | 584 | .mo-btn.readonly, .mo-btn[readonly] { 585 | cursor: default; 586 | } 587 | 588 | .mo-btn.disabled, .mo-btn[disabled] { 589 | cursor: not-allowed; 590 | opacity: 0.5; 591 | } 592 | 593 | .mo-input { 594 | font-family: inherit; 595 | display: inline-block; 596 | width: 100%; 597 | color: #515151; 598 | border: 0.0625rem solid transparent; 599 | border-radius: 0; 600 | outline: none; 601 | background-color: #fff; 602 | background-image: none; 603 | -webkit-appearance: none; 604 | -moz-appearance: none; 605 | appearance: none; 606 | border-color: #d3d3d3; 607 | font-size: 0.875rem; 608 | line-height: 1.4286; 609 | height: 2.12502rem; 610 | padding: 0.375rem 1rem; 611 | } 612 | 613 | .mo-input:not(.readonly):not([readonly]):not(.disabled):not([disabled]):focus { 614 | border-color: #0275d8; 615 | box-shadow: 0 0 8px rgba(2, 117, 216, 0.35); 616 | } 617 | 618 | .mo-input.mo-input--tiny { 619 | font-size: 0.75rem; 620 | line-height: 1.5; 621 | height: 1.5rem; 622 | padding: 0.125rem 0.75rem; 623 | } 624 | 625 | .mo-input.mo-input--small { 626 | font-size: 0.875rem; 627 | line-height: 1.4286; 628 | height: 1.87503rem; 629 | padding: 0.25rem 0.875rem; 630 | } 631 | 632 | .mo-input.mo-input--large { 633 | font-size: 1rem; 634 | line-height: 1.625; 635 | height: 2.75rem; 636 | padding: 0.5rem 1.25rem; 637 | } 638 | 639 | .mo-input.mo-input--primary { 640 | border-color: #0275d8; 641 | } 642 | 643 | .mo-input.mo-input--primary:not(.readonly):not([readonly]):not(.disabled):not([disabled]):focus { 644 | border-color: #0275d8; 645 | box-shadow: 0 0 8px rgba(2, 117, 216, 0.35); 646 | } 647 | 648 | .mo-input.mo-input--positive { 649 | border-color: #5cb85c; 650 | } 651 | 652 | .mo-input.mo-input--positive:not(.readonly):not([readonly]):not(.disabled):not([disabled]):focus { 653 | border-color: #5cb85c; 654 | box-shadow: 0 0 8px rgba(92, 184, 92, 0.35); 655 | } 656 | 657 | .mo-input.mo-input--negative { 658 | border-color: #d9534f; 659 | } 660 | 661 | .mo-input.mo-input--negative:not(.readonly):not([readonly]):not(.disabled):not([disabled]):focus { 662 | border-color: #d9534f; 663 | box-shadow: 0 0 8px rgba(217, 83, 79, 0.35); 664 | } 665 | 666 | .mo-input::-webkit-input-placeholder { 667 | color: #bdbdbd; 668 | } 669 | 670 | .mo-input::-moz-placeholder { 671 | color: #bdbdbd; 672 | } 673 | 674 | .mo-input:-ms-input-placeholder { 675 | color: #bdbdbd; 676 | } 677 | 678 | .mo-input:not(.readonly):not([readonly]):not(.disabled):not([disabled]):focus { 679 | -webkit-transition: all 0.16s cubic-bezier(0.55, 0.09, 0.68, 0.53); 680 | transition: all 0.16s cubic-bezier(0.55, 0.09, 0.68, 0.53); 681 | outline: 0; 682 | } 683 | 684 | .mo-input.readonly, .mo-input[readonly] { 685 | cursor: default; 686 | } 687 | 688 | .mo-input.disabled, .mo-input[disabled] { 689 | cursor: not-allowed; 690 | opacity: 0.5; 691 | } 692 | 693 | select.mo-input:not([multiple]) { 694 | padding-right: 1.75rem; 695 | vertical-align: middle; 696 | background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBmaWxsPSIjNkY2RjZGIj4KICAgICAgICAgICAgPHBvbHlnb24gdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOC4wMDAwMDAsIDguNTAwMDAwKSBzY2FsZSgxLCAtMSkgdHJhbnNsYXRlKC04LjAwMDAwMCwgLTguNTAwMDAwKSAiIHBvaW50cz0iOCA1IDEyIDEyIDQgMTIiPjwvcG9seWdvbj4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==); 697 | background-repeat: no-repeat; 698 | background-position: right 0.3125rem center; 699 | } 700 | 701 | select.mo-input:not([multiple])::-ms-expand { 702 | display: none; 703 | } 704 | 705 | textarea.mo-input, select[multiple].mo-input { 706 | height: auto; 707 | } 708 | 709 | select[multiple].mo-input { 710 | padding-right: 0\0; 711 | } 712 | 713 | .mo-radio, .mo-checkbox, .mo-switch { 714 | position: relative; 715 | display: inline; 716 | margin: 0; 717 | -webkit-user-select: none; 718 | -moz-user-select: none; 719 | -ms-user-select: none; 720 | user-select: none; 721 | } 722 | 723 | .mo-radio > .icon, .mo-checkbox > .icon, .mo-switch > .icon { 724 | position: absolute; 725 | top: 50%; 726 | left: 0; 727 | margin: 0; 728 | padding: 0; 729 | -webkit-transform: translate(0, -50%); 730 | transform: translate(0, -50%); 731 | border: 0.0625rem solid transparent; 732 | background-color: #fff; 733 | } 734 | 735 | .mo-radio > .icon:after, .mo-checkbox > .icon:after, .mo-switch > .icon:after { 736 | position: absolute; 737 | content: ''; 738 | } 739 | 740 | .mo-radio > .icon ~ span, .mo-checkbox > .icon ~ span, .mo-switch > .icon ~ span { 741 | margin-left: .5rem; 742 | } 743 | 744 | .mo-radio > input, .mo-checkbox > input, .mo-switch > input { 745 | position: absolute; 746 | z-index: -1; 747 | opacity: 0; 748 | } 749 | 750 | .mo-radio > input ~ .icon, .mo-radio > input ~ span, .mo-checkbox > input ~ .icon, .mo-checkbox > input ~ span, .mo-switch > input ~ .icon, .mo-switch > input ~ span { 751 | cursor: pointer; 752 | } 753 | 754 | .mo-radio { 755 | padding-left: 1.25rem; 756 | } 757 | 758 | .mo-radio > .icon { 759 | width: 1.25rem; 760 | height: 1.25rem; 761 | } 762 | 763 | .mo-radio > .icon { 764 | border-color: #bdbdbd; 765 | } 766 | 767 | .mo-radio > input[type="radio"]:checked ~ .icon:after { 768 | -webkit-transition: all 0.06s cubic-bezier(0.55, 0.09, 0.68, 0.53); 769 | transition: all 0.06s cubic-bezier(0.55, 0.09, 0.68, 0.53); 770 | background-color: #bdbdbd; 771 | } 772 | 773 | .mo-radio > input[type="radio"]:disabled ~ .icon, 774 | .mo-radio > input[type="radio"]:disabled ~ span, .mo-radio > input[type="radio"].disabled ~ .icon, 775 | .mo-radio > input[type="radio"].disabled ~ span { 776 | opacity: 0.5; 777 | cursor: not-allowed; 778 | } 779 | 780 | .mo-radio + .mo-radio { 781 | margin-left: 1rem; 782 | } 783 | 784 | .mo-radio > .icon { 785 | border-radius: 50%; 786 | } 787 | 788 | .mo-radio > .icon:after { 789 | top: 50%; 790 | left: 50%; 791 | width: 0.75rem; 792 | height: 0.75rem; 793 | margin-top: -0.375rem; 794 | margin-left: -0.375rem; 795 | border-radius: 50%; 796 | background-color: transparent; 797 | } 798 | 799 | .mo-radio.mo-radio--primary > .icon { 800 | border-color: #0275d8; 801 | } 802 | 803 | .mo-radio.mo-radio--primary > input[type="radio"]:checked ~ .icon:after { 804 | -webkit-transition: all 0.06s cubic-bezier(0.55, 0.09, 0.68, 0.53); 805 | transition: all 0.06s cubic-bezier(0.55, 0.09, 0.68, 0.53); 806 | background-color: #0275d8; 807 | } 808 | 809 | .mo-radio.mo-radio--primary > input[type="radio"]:disabled ~ .icon, 810 | .mo-radio.mo-radio--primary > input[type="radio"]:disabled ~ span, .mo-radio.mo-radio--primary > input[type="radio"].disabled ~ .icon, 811 | .mo-radio.mo-radio--primary > input[type="radio"].disabled ~ span { 812 | opacity: 0.5; 813 | cursor: not-allowed; 814 | } 815 | 816 | .mo-radio.mo-radio--negative > .icon { 817 | border-color: #d9534f; 818 | } 819 | 820 | .mo-radio.mo-radio--negative > input[type="radio"]:checked ~ .icon:after { 821 | -webkit-transition: all 0.06s cubic-bezier(0.55, 0.09, 0.68, 0.53); 822 | transition: all 0.06s cubic-bezier(0.55, 0.09, 0.68, 0.53); 823 | background-color: #d9534f; 824 | } 825 | 826 | .mo-radio.mo-radio--negative > input[type="radio"]:disabled ~ .icon, 827 | .mo-radio.mo-radio--negative > input[type="radio"]:disabled ~ span, .mo-radio.mo-radio--negative > input[type="radio"].disabled ~ .icon, 828 | .mo-radio.mo-radio--negative > input[type="radio"].disabled ~ span { 829 | opacity: 0.5; 830 | cursor: not-allowed; 831 | } 832 | 833 | .mo-radio.mo-radio--positive > .icon { 834 | border-color: #5cb85c; 835 | } 836 | 837 | .mo-radio.mo-radio--positive > input[type="radio"]:checked ~ .icon:after { 838 | -webkit-transition: all 0.06s cubic-bezier(0.55, 0.09, 0.68, 0.53); 839 | transition: all 0.06s cubic-bezier(0.55, 0.09, 0.68, 0.53); 840 | background-color: #5cb85c; 841 | } 842 | 843 | .mo-radio.mo-radio--positive > input[type="radio"]:disabled ~ .icon, 844 | .mo-radio.mo-radio--positive > input[type="radio"]:disabled ~ span, .mo-radio.mo-radio--positive > input[type="radio"].disabled ~ .icon, 845 | .mo-radio.mo-radio--positive > input[type="radio"].disabled ~ span { 846 | opacity: 0.5; 847 | cursor: not-allowed; 848 | } 849 | 850 | .mo-checkbox { 851 | padding-left: 1.25rem; 852 | } 853 | 854 | .mo-checkbox > .icon { 855 | width: 1.25rem; 856 | height: 1.25rem; 857 | } 858 | 859 | .mo-checkbox > .icon { 860 | border-color: #bdbdbd; 861 | } 862 | 863 | .mo-checkbox > input[type="checkbox"]:checked ~ .icon:after { 864 | -webkit-transition: all 0.06s cubic-bezier(0.55, 0.09, 0.68, 0.53); 865 | transition: all 0.06s cubic-bezier(0.55, 0.09, 0.68, 0.53); 866 | border-left-color: #bdbdbd; 867 | border-bottom-color: #bdbdbd; 868 | } 869 | 870 | .mo-checkbox > input[type="checkbox"]:disabled ~ .icon, 871 | .mo-checkbox > input[type="checkbox"]:disabled ~ span, .mo-checkbox > input[type="checkbox"].disabled ~ .icon, 872 | .mo-checkbox > input[type="checkbox"].disabled ~ span { 873 | opacity: 0.5; 874 | cursor: not-allowed; 875 | } 876 | 877 | .mo-checkbox + .mo-checkbox { 878 | margin-left: 1rem; 879 | } 880 | 881 | .mo-checkbox > .icon { 882 | border-radius: 0; 883 | } 884 | 885 | .mo-checkbox > .icon:after { 886 | top: 11.5%; 887 | left: 11.2%; 888 | width: 80%; 889 | height: 50%; 890 | -webkit-transform: rotate(-50deg); 891 | transform: rotate(-50deg); 892 | border: 0.125rem solid transparent; 893 | background-color: transparent; 894 | } 895 | 896 | .mo-checkbox.mo-checkbox--primary > .icon { 897 | border-color: #0275d8; 898 | } 899 | 900 | .mo-checkbox.mo-checkbox--primary > input[type="checkbox"]:checked ~ .icon:after { 901 | -webkit-transition: all 0.06s cubic-bezier(0.55, 0.09, 0.68, 0.53); 902 | transition: all 0.06s cubic-bezier(0.55, 0.09, 0.68, 0.53); 903 | border-left-color: #0275d8; 904 | border-bottom-color: #0275d8; 905 | } 906 | 907 | .mo-checkbox.mo-checkbox--primary > input[type="checkbox"]:disabled ~ .icon, 908 | .mo-checkbox.mo-checkbox--primary > input[type="checkbox"]:disabled ~ span, .mo-checkbox.mo-checkbox--primary > input[type="checkbox"].disabled ~ .icon, 909 | .mo-checkbox.mo-checkbox--primary > input[type="checkbox"].disabled ~ span { 910 | opacity: 0.5; 911 | cursor: not-allowed; 912 | } 913 | 914 | .mo-checkbox.mo-checkbox--negative > .icon { 915 | border-color: #d9534f; 916 | } 917 | 918 | .mo-checkbox.mo-checkbox--negative > input[type="checkbox"]:checked ~ .icon:after { 919 | -webkit-transition: all 0.06s cubic-bezier(0.55, 0.09, 0.68, 0.53); 920 | transition: all 0.06s cubic-bezier(0.55, 0.09, 0.68, 0.53); 921 | border-left-color: #d9534f; 922 | border-bottom-color: #d9534f; 923 | } 924 | 925 | .mo-checkbox.mo-checkbox--negative > input[type="checkbox"]:disabled ~ .icon, 926 | .mo-checkbox.mo-checkbox--negative > input[type="checkbox"]:disabled ~ span, .mo-checkbox.mo-checkbox--negative > input[type="checkbox"].disabled ~ .icon, 927 | .mo-checkbox.mo-checkbox--negative > input[type="checkbox"].disabled ~ span { 928 | opacity: 0.5; 929 | cursor: not-allowed; 930 | } 931 | 932 | .mo-checkbox.mo-checkbox--positive > .icon { 933 | border-color: #5cb85c; 934 | } 935 | 936 | .mo-checkbox.mo-checkbox--positive > input[type="checkbox"]:checked ~ .icon:after { 937 | -webkit-transition: all 0.06s cubic-bezier(0.55, 0.09, 0.68, 0.53); 938 | transition: all 0.06s cubic-bezier(0.55, 0.09, 0.68, 0.53); 939 | border-left-color: #5cb85c; 940 | border-bottom-color: #5cb85c; 941 | } 942 | 943 | .mo-checkbox.mo-checkbox--positive > input[type="checkbox"]:disabled ~ .icon, 944 | .mo-checkbox.mo-checkbox--positive > input[type="checkbox"]:disabled ~ span, .mo-checkbox.mo-checkbox--positive > input[type="checkbox"].disabled ~ .icon, 945 | .mo-checkbox.mo-checkbox--positive > input[type="checkbox"].disabled ~ span { 946 | opacity: 0.5; 947 | cursor: not-allowed; 948 | } 949 | 950 | .mo-switch { 951 | padding-left: 2.5rem; 952 | } 953 | 954 | .mo-switch > .icon { 955 | width: 2.5rem; 956 | height: 1.5rem; 957 | border-radius: 1.5rem; 958 | } 959 | 960 | .mo-switch > .icon:before { 961 | width: 2.375rem; 962 | height: 1.375rem; 963 | border-radius: 0.6875rem; 964 | } 965 | 966 | .mo-switch > .icon:after { 967 | width: 1.375rem; 968 | height: 1.375rem; 969 | } 970 | 971 | .mo-switch > input:checked ~ .icon:after { 972 | -webkit-transform: translateX(1rem); 973 | transform: translateX(1rem); 974 | } 975 | 976 | .mo-switch > input:checked ~ .icon { 977 | border-color: #bdbdbd; 978 | background-color: #bdbdbd; 979 | } 980 | 981 | .mo-switch > input:disabled ~ .icon, 982 | .mo-switch > input:disabled ~ span, .mo-switch > input.disabled ~ .icon, 983 | .mo-switch > input.disabled ~ span { 984 | opacity: 0.5; 985 | cursor: not-allowed; 986 | } 987 | 988 | .mo-switch + .mo-switch { 989 | margin-left: 1rem; 990 | } 991 | 992 | .mo-switch > .icon { 993 | border: 0.0625rem solid #dfdfdf; 994 | background-color: #dfdfdf; 995 | box-shadow: #fafafa 0 0 0 0 inset; 996 | } 997 | 998 | .mo-switch > .icon:before, .mo-switch > .icon:after { 999 | position: absolute; 1000 | top: 0; 1001 | left: 0; 1002 | content: ''; 1003 | -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1); 1004 | transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1); 1005 | transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1); 1006 | transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1), -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1); 1007 | } 1008 | 1009 | .mo-switch > .icon:before { 1010 | background-color: #fdfdfd; 1011 | } 1012 | 1013 | .mo-switch > .icon:after { 1014 | border-radius: 50%; 1015 | background-color: #fff; 1016 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); 1017 | } 1018 | 1019 | .mo-switch > input:checked ~ .icon:before { 1020 | -webkit-transform: scale(0); 1021 | transform: scale(0); 1022 | } 1023 | 1024 | .mo-switch > input:active:not(:disabled):not(.disabled) ~ .icon { 1025 | -webkit-transition: background-color .1s, border .1s; 1026 | transition: background-color .1s, border .1s; 1027 | } 1028 | 1029 | .mo-switch > input:active:not(:disabled):not(.disabled) ~ .icon:after { 1030 | -webkit-transform: scale(1.4, 1); 1031 | transform: scale(1.4, 1); 1032 | } 1033 | 1034 | .mo-switch.mo-switch--primary > input:checked ~ .icon { 1035 | border-color: #0275d8; 1036 | background-color: #0275d8; 1037 | } 1038 | 1039 | .mo-switch.mo-switch--primary > input:disabled ~ .icon, 1040 | .mo-switch.mo-switch--primary > input:disabled ~ span, .mo-switch.mo-switch--primary > input.disabled ~ .icon, 1041 | .mo-switch.mo-switch--primary > input.disabled ~ span { 1042 | opacity: 0.5; 1043 | cursor: not-allowed; 1044 | } 1045 | 1046 | .mo-switch.mo-switch--positive > input:checked ~ .icon { 1047 | border-color: #5cb85c; 1048 | background-color: #5cb85c; 1049 | } 1050 | 1051 | .mo-switch.mo-switch--positive > input:disabled ~ .icon, 1052 | .mo-switch.mo-switch--positive > input:disabled ~ span, .mo-switch.mo-switch--positive > input.disabled ~ .icon, 1053 | .mo-switch.mo-switch--positive > input.disabled ~ span { 1054 | opacity: 0.5; 1055 | cursor: not-allowed; 1056 | } 1057 | 1058 | .mo-switch.mo-switch--negative > input:checked ~ .icon { 1059 | border-color: #d9534f; 1060 | background-color: #d9534f; 1061 | } 1062 | 1063 | .mo-switch.mo-switch--negative > input:disabled ~ .icon, 1064 | .mo-switch.mo-switch--negative > input:disabled ~ span, .mo-switch.mo-switch--negative > input.disabled ~ .icon, 1065 | .mo-switch.mo-switch--negative > input.disabled ~ span { 1066 | opacity: 0.5; 1067 | cursor: not-allowed; 1068 | } 1069 | 1070 | .mo-switch.mo-switch--small { 1071 | padding-left: 1.875rem; 1072 | } 1073 | 1074 | .mo-switch.mo-switch--small > .icon { 1075 | width: 1.875rem; 1076 | height: 1.125rem; 1077 | border-radius: 1.125rem; 1078 | } 1079 | 1080 | .mo-switch.mo-switch--small > .icon:before { 1081 | width: 1.75rem; 1082 | height: 1rem; 1083 | border-radius: 0.5rem; 1084 | } 1085 | 1086 | .mo-switch.mo-switch--small > .icon:after { 1087 | width: 1rem; 1088 | height: 1rem; 1089 | } 1090 | 1091 | .mo-switch.mo-switch--small > input:checked ~ .icon:after { 1092 | -webkit-transform: translateX(0.75rem); 1093 | transform: translateX(0.75rem); 1094 | } 1095 | 1096 | .mo-switch.mo-switch--large { 1097 | font-size: 1rem; 1098 | padding-left: 3.125rem; 1099 | } 1100 | 1101 | .mo-switch.mo-switch--large > .icon { 1102 | width: 3.125rem; 1103 | height: 1.875rem; 1104 | border-radius: 1.875rem; 1105 | } 1106 | 1107 | .mo-switch.mo-switch--large > .icon:before { 1108 | width: 3rem; 1109 | height: 1.75rem; 1110 | border-radius: 0.875rem; 1111 | } 1112 | 1113 | .mo-switch.mo-switch--large > .icon:after { 1114 | width: 1.75rem; 1115 | height: 1.75rem; 1116 | } 1117 | 1118 | .mo-switch.mo-switch--large > input:checked ~ .icon:after { 1119 | -webkit-transform: translateX(1.25rem); 1120 | transform: translateX(1.25rem); 1121 | } 1122 | 1123 | .mo-switch.mo-switch--reverse { 1124 | padding-left: 0; 1125 | padding-right: 2.5rem; 1126 | } 1127 | 1128 | .mo-switch.mo-switch--reverse > .icon { 1129 | left: auto; 1130 | right: 0; 1131 | } 1132 | 1133 | .mo-switch.mo-switch--reverse > .icon ~ span { 1134 | margin-left: 0; 1135 | margin-right: .5rem; 1136 | } 1137 | 1138 | .mo-switch.mo-switch--reverse.mo-switch--small { 1139 | padding-right: 1.875rem; 1140 | } 1141 | 1142 | .mo-switch.mo-switch--reverse.mo-switch--large { 1143 | padding-right: 3.125rem; 1144 | } 1145 | 1146 | [class^='mo-table'], 1147 | [class*=' mo-table'] { 1148 | width: 100%; 1149 | max-width: 100%; 1150 | margin-bottom: 1rem; 1151 | background-color: transparent; 1152 | } 1153 | 1154 | [class^='mo-table'] td, 1155 | [class^='mo-table'] th, 1156 | [class*=' mo-table'] td, 1157 | [class*=' mo-table'] th { 1158 | padding: 0.625rem; 1159 | vertical-align: top; 1160 | border-top: 1px solid #d3d3d3; 1161 | } 1162 | 1163 | [class^='mo-table'] td[align='left'], 1164 | [class^='mo-table'] th[align='left'], 1165 | [class*=' mo-table'] td[align='left'], 1166 | [class*=' mo-table'] th[align='left'] { 1167 | text-align: left; 1168 | } 1169 | 1170 | [class^='mo-table'] td[align='center'], 1171 | [class^='mo-table'] th[align='center'], 1172 | [class*=' mo-table'] td[align='center'], 1173 | [class*=' mo-table'] th[align='center'] { 1174 | text-align: center; 1175 | } 1176 | 1177 | [class^='mo-table'] td[align='right'], 1178 | [class^='mo-table'] th[align='right'], 1179 | [class*=' mo-table'] td[align='right'], 1180 | [class*=' mo-table'] th[align='right'] { 1181 | text-align: right; 1182 | } 1183 | 1184 | [class^='mo-table'] thead th, 1185 | [class*=' mo-table'] thead th { 1186 | vertical-align: bottom; 1187 | border-bottom: 2px solid #d3d3d3; 1188 | } 1189 | 1190 | .mo-table--bordered td, 1191 | .mo-table--bordered th { 1192 | border: 1px solid #d3d3d3; 1193 | } 1194 | 1195 | .mo-table--bordered thead th { 1196 | border-bottom-width: 2px; 1197 | } 1198 | 1199 | .mo-table--responsive { 1200 | display: block; 1201 | overflow-x: auto; 1202 | width: 100%; 1203 | -ms-overflow-style: -ms-autohiding-scrollbar; 1204 | } 1205 | 1206 | .mo-left { 1207 | float: left !important; 1208 | } 1209 | 1210 | .mo-right { 1211 | float: right !important; 1212 | } 1213 | 1214 | .mo-clearfix:before, .mo-clearfix:after { 1215 | display: table; 1216 | content: ' '; 1217 | } 1218 | 1219 | .mo-clearfix:after { 1220 | clear: both; 1221 | } 1222 | 1223 | .mo-text-left { 1224 | text-align: left !important; 1225 | } 1226 | 1227 | .mo-text-center { 1228 | text-align: center !important; 1229 | } 1230 | 1231 | .mo-text-right { 1232 | text-align: right !important; 1233 | } 1234 | 1235 | .mo-text-lowercase { 1236 | text-transform: lowercase !important; 1237 | } 1238 | 1239 | .mo-text-uppercase { 1240 | text-transform: uppercase !important; 1241 | } 1242 | 1243 | .mo-text-capitalize { 1244 | text-transform: capitalize !important; 1245 | } 1246 | 1247 | .mo-text-overflow { 1248 | overflow: hidden; 1249 | white-space: nowrap; 1250 | text-overflow: ellipsis; 1251 | } 1252 | 1253 | .mo-invisible { 1254 | visibility: hidden !important; 1255 | } 1256 | 1257 | .mo-visible { 1258 | visibility: visible !important; 1259 | } 1260 | 1261 | .mo-hide { 1262 | display: none !important; 1263 | } 1264 | 1265 | .mo-show { 1266 | display: block !important; 1267 | } 1268 | 1269 | .mo-inline { 1270 | display: inline !important; 1271 | } 1272 | 1273 | .mo-inline-block { 1274 | display: inline-block !important; 1275 | } 1276 | 1277 | .mo-bg-primary, .mo-bg-positive, .mo-bg-negative { 1278 | color: #fff; 1279 | } 1280 | 1281 | .mo-bg-primary { 1282 | background-color: #0275d8; 1283 | } 1284 | 1285 | .mo-bg-positive { 1286 | background-color: #5cb85c; 1287 | } 1288 | 1289 | .mo-bg-negative { 1290 | background-color: #d9534f; 1291 | } 1292 | 1293 | .mo-text-primary { 1294 | color: #0275d8; 1295 | } 1296 | 1297 | .mo-text-positive { 1298 | color: #5cb85c; 1299 | } 1300 | 1301 | .mo-text-negative { 1302 | color: #d9534f; 1303 | } 1304 | 1305 | .mo-text-title { 1306 | color: #212121; 1307 | } 1308 | 1309 | .mo-text-default { 1310 | color: #515151; 1311 | } 1312 | 1313 | .mo-text-description { 1314 | color: #757575; 1315 | } 1316 | 1317 | .mo-text-hint { 1318 | color: #9e9e9e; 1319 | } 1320 | 1321 | .mo-text-important, .mo-code { 1322 | color: #bd4147; 1323 | } 1324 | 1325 | .mo-radius { 1326 | border-radius: 2px; 1327 | } 1328 | 1329 | .mo-pill { 1330 | border-radius: 200px; 1331 | } 1332 | 1333 | .mo-fluid { 1334 | display: block; 1335 | width: 100%; 1336 | } 1337 | --------------------------------------------------------------------------------