S-mohan / mo-css

非组件级的没有任何套路的纯css框架

Mo css framework

持续更新中...

DEMO

Api

• variable
• utils
• buttons
• input
• radio
• checkbox
• switch
• table

自定义

button

@import './mixins/button';
//自定义样式（背景，颜色）
.mo-button--[style] {
    @include buttonStyle($border, $background, $color, $hoverBorder, $hoverBackground, $hoverColor);
}
//自定义尺寸
$my-button-size : (font-size:14px, line-height:1.4286, padding-y:6px, padding-x:16px) !default;
.mo-button--[size] {
    @include buttonSize ($my-button-size );
}

input

@import './mixins/input';
//自定义样式（背景，颜色）
.mo-input--[style] {
    @include inputStyle ($border, $focusBorder);
}
//自定义尺寸
$my-input-size : (font-size:14px, line-height:1.4286, padding-y:6px, padding-x:16px) !default;
.mo-input--[size] {
    @include inputSize ($my-input-size);
}

radio

@import './mixins/radio';
//自定义样式（颜色）
.mo-radio--[style] {
    @include radioStyle($color);
}

checkbox

@import './mixins/checkbox';
//自定义样式（颜色）
.mo-checkbox--[style] {
    @include checkboxStyle($color);
}

switch

@import './mixins/switch';
//自定义样式（颜色）
.mo-switch--[style] {
    @include switchStyle($color);
}
//自定义尺寸
.mo-switch--[size] {
    @include switchSize ($width, $height);
}