knight-common-styles v1.0.3

knight-common-styles

常用类名集合

box 盒子类

1. .[name]-[val] { [val]px }

   name 允许的值为：

   width height margin padding line-height margin-top margin-bottom margin-left margin-right padding-top padding-bottom padding-left padding-right (优先级大于margin、padding)

   val 允许的值为：

   0 至 100 之间的偶数

   示例：

   .width-50 { width: 50px; } .margin-left-100 { margin-left: 100px; }

   特例：

   .radius-30 { border-radius: 30px; } 允许的值为：0,100之间的偶数 .width-396 { width: 396px; } width样式允许的值为： 0,100之间的偶数，100,400之间的4倍数 .width-100p { width: 100%; } 允许0,100之间的偶数

2. .margin-center { margin-left: auto; margin-right: auto;}
3. .min-height { min-height: 0; }

flex 弹性盒子类

1. .flex { display: flex; }
2. .flex.column { flex-direction: column; }
3. .flex.wrap { flex-wrap: wrap; }
4. .flex.start-center { justify-content: flex-start; align-items: center; } .flex.start-start { justify-content: flex-start; align-items: flex-start; } 等
5. .flex .flex-1 { flex: 1;} 1,10

text 文本类

1. .font-1 { font-size: 1px; transform: scale(1/12);} 1,12
2. .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-bold { font-weight: bold; }
3. .text-ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } 文本不换行 .text-unselect { user-select: none; }

other 其他类

1. .pointer { cursor: pointer; }
2. .full-screen { width: 100vw; height: 100vh; }
3. .overflow { overflow: hidden; }
4. .overflow-auto { overflow: auto; }
5. .relative { position: relative; }
6. .absolute { position: absolute; }

methods 混合

1. style-color(颜色名,颜色值) 创建 .text-name .bg-name .border-name .border-top-name .border-bottom-name .border-left-name .border-right-name 类 stylus 示例： color-style(success, SUCCESS_COLOR) less 示例： .color-style(warning, @WARNING_COLOR); sass 示例： @include color-style(error, $ERROR_COLOR);

init 初始化

初始化常用样式,如：

1. div { box-sizing: border-box; }
2. img { -webkit-user-drag: none; border-style: none; }
3. [class].iconfont { font-size: inherit; }
4. input:-webkit-autofill { box-shadow: 0 0 0 1000px white inset; -webkit-box-shadow: 0 0 0 1000px white inset; }