常用css样式

最新推荐文章于 2024-02-23 16:20:39 发布

johnZhangqi

最新推荐文章于 2024-02-23 16:20:39 发布

阅读量2.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/johnzhangqi/article/details/107092667

css 专栏收录该内容

2 篇文章

订阅专栏

常用颜色变量 less

参考antd 颜色变量
 https://www.npmjs.com/package/@ant-design/colors

variable.less

@blue: #59abf6;
@colorBlue: #1890ff;
@colorGreen: #52c41a;
@colorYellow: #fadb14;
@colorGold: #faad14;
@colorGray: #bfbfbf;
@colorPurple: #722ed1;
@colorWhite: #ffffff;
@red: #ff4d4f;
@danger: #ff4d4f;

常用样式
宽度遵循ANTD设计规范，以8的倍数增加,共预设7个等级
xs：120、sm：160、md ：200、lg ：240、xl： 280、xxl ：320、xxxl： 400

@import 'variable.less';
.q1-container {
    .color-green {
        color: @colorGreen;
    }
    .color-blue {
        color: @colorBlue;
    }
    .color-gray {
        color: @colorGray;
    }
    .color-purple {
        color: @colorPurple;
    }
    .color-red {
        color: @red;
    }
    .color-yellow {
        color: @colorYellow;
    }

    .text-align-left {
        text-align: left;
    }
    .text-align-right {
        text-align: right;
    }

    
    .margin-top-0 {
	    margin-top: 0;
	}
	.margin-top-8 {
	    margin-top: 8px;
	}
	.margin-top-16 {
	    margin-top: 16px;
	}
	.margin-top-24 {
	    margin-top: 24px;
	}
	.margin-right-0 {
	    margin-right: 0;
	}
	.margin-right-8 {
	    margin-right: 8px;
	}
	.margin-right-16 {
	    margin-right: 16px;
	}
	.margin-right-24 {
	    margin-right: 24px;
	}
	.margin-bottom-0 {
	    margin-bottom: 0;
	}
	.margin-bottom-8 {
	    margin-bottom: 8px;
	}
	.margin-bottom-16 {
	    margin-bottom: 16px;
	}
	.margin-bottom-24 {
	    margin-bottom: 24px;
	}
	.margin-left-0 {
	    margin-left: 0;
	}
	.margin-left-8 {
	    margin-left: 8px;
	}
	.margin-left-16 {
	    margin-left: 16px;
	}
	.margin-left-24 {
	    margin-left: 24px;
	}
	.padding-top-0 {
	    padding-top: 0;
	}
	.padding-top-8 {
	    padding-top: 8px;
	}
	.padding-top-16 {
	    padding-top: 16px;
	}
	.padding-top-24 {
	    padding-top: 24px;
	}
	.padding-right-0 {
	    padding-right: 0;
	}
	.padding-right-8 {
	    padding-right: 8px;
	}
	.padding-right-16 {
	    padding-right: 16px;
	}
	.padding-right-24 {
	    padding-right: 24px;
	}
	.padding-bottom-0 {
	    padding-bottom: 0;
	}
	.padding-bottom-8 {
	    padding-bottom: 8px;
	}
	.padding-bottom-16 {
	    padding-bottom: 16px;
	}
	.padding-bottom-24 {
	    padding-bottom: 24px;
	}
	.padding-left-0 {
	    padding-left: 0;
	}
	.padding-left-8 {
	    padding-left: 8px;
	}
	.padding-left-16 {
	    padding-left: 16px;
	}
	.padding-left-24 {
	    padding-left: 24px;
	}

    .form-item {
        width: 181px;
    }
    .form-item-xs {
        width: 120px;
    }
    .form-item-sm {
        width: 160px;
    }
    .form-item-md {
        width: 200px;
    }
    .form-item-lg {
        width: 240px;
    }
    .form-item-xl {
        width: 280px;
    }
    .form-item-xxl {
        width: 320px;
    }
    .form-item-xxxl {
        width: 400px;
    }
}