初始化网站代码
This commit is contained in:
tianyongbao
280
src/components/less/mixin.less
Normal file
280
src/components/less/mixin.less
Normal file
@@ -0,0 +1,280 @@
|
||||
.transform(@t) {
|
||||
-webkit-transform: @t;
|
||||
transform: @t;
|
||||
}
|
||||
|
||||
.transform-origin(@to) {
|
||||
-webkit-transform-origin: @to;
|
||||
transform-origin: @to;
|
||||
}
|
||||
|
||||
.transition(@value) {
|
||||
-webkit-transition: @value;
|
||||
}
|
||||
|
||||
.hairline-top(@color) {
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
right: auto;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
border-top: 1px solid @color;
|
||||
display: block;
|
||||
z-index: 15;
|
||||
.transform-origin(50% 0%);
|
||||
html.pixel-ratio-2 & {
|
||||
.transform(scaleY(0.5));
|
||||
}
|
||||
html.pixel-ratio-3 & {
|
||||
.transform(scaleY(0.33));
|
||||
}
|
||||
html.pixel-ratio-4 & {
|
||||
.transform(scaleY(0.25));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hairline-left(@color) {
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
right: auto;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: @color;
|
||||
display: block;
|
||||
z-index: 15;
|
||||
.transform-origin(0% 50%);
|
||||
html.pixel-ratio-2 & {
|
||||
.transform(scaleX(0.5));
|
||||
}
|
||||
html.pixel-ratio-3 & {
|
||||
.transform(scaleX(0.33));
|
||||
}
|
||||
html.pixel-ratio-4 & {
|
||||
.transform(scaleX(0.25));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hairline-bottom(@color, @left:0) {
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: @left;
|
||||
bottom: 0;
|
||||
right: auto;
|
||||
top: auto;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
border-bottom: 1px solid @color;
|
||||
display: block;
|
||||
z-index: 15;
|
||||
.transform-origin(50% 100%);
|
||||
html.pixel-ratio-2 & {
|
||||
.transform(scaleY(0.5));
|
||||
}
|
||||
html.pixel-ratio-3 & {
|
||||
.transform(scaleY(0.33));
|
||||
}
|
||||
html.pixel-ratio-4 & {
|
||||
.transform(scaleY(0.25));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hairline-right(@color) {
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
left: auto;
|
||||
bottom: auto;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: @color;
|
||||
display: block;
|
||||
z-index: 15;
|
||||
.transform-origin(100% 50%);
|
||||
html.pixel-ratio-2 & {
|
||||
.transform(scaleX(0.5));
|
||||
}
|
||||
html.pixel-ratio-3 & {
|
||||
.transform(scaleX(0.33));
|
||||
}
|
||||
html.pixel-ratio-4 & {
|
||||
.transform(scaleX(0.25));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// For right and bottom
|
||||
.hairline-remove-right-bottom {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// For left and top
|
||||
.hairline-remove-left-top {
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Encoded SVG Background
|
||||
.encoded-svg-background(@svg) {
|
||||
@url: `encodeURIComponent(@{svg})`;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,@{url}");
|
||||
}
|
||||
|
||||
.align-self(@as) {
|
||||
-ms-flex-item-align: @as;
|
||||
-webkit-align-self: @as;
|
||||
align-self: @as;
|
||||
}
|
||||
|
||||
.ellipsis() {
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.backgroundSize(@width,@height) {
|
||||
-webkit-background-size: @width @height;
|
||||
}
|
||||
|
||||
.display-box() {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-direction(@direction: row) {
|
||||
flex-direction: @direction;
|
||||
}
|
||||
|
||||
.flex-wrap(@wrap: nowrap) {
|
||||
flex-wrap: @wrap;
|
||||
}
|
||||
|
||||
.flex-justify(@justify: flex-start) {
|
||||
justify-content: @justify;
|
||||
}
|
||||
|
||||
.box-align(@align: center) {
|
||||
align-items: @align;
|
||||
}
|
||||
|
||||
.box-align-content(@alignContent: stretch) {
|
||||
align-content: @alignContent;
|
||||
}
|
||||
|
||||
.box-flex(@scale: 1) {
|
||||
flex: @scale;
|
||||
}
|
||||
|
||||
.border-radius(@radius: 0) {
|
||||
border-top-left-radius: @radius;
|
||||
border-top-right-radius: @radius;
|
||||
border-bottom-left-radius: @radius;
|
||||
border-bottom-right-radius: @radius;
|
||||
-webkit-background-clip: padding-box;
|
||||
}
|
||||
|
||||
.background(@start: #ffffff, @end: #000000) {
|
||||
background: @end;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end)); /* Saf4+, Chrome */
|
||||
background-image: linear-gradient(@start, @end);
|
||||
}
|
||||
|
||||
.border-1px-bottom(@color: #d2d2d2) {
|
||||
background: left bottom repeat-x;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, @color), to(@color));
|
||||
background-image: linear-gradient(left top, left bottom, color-stop(.5, transparent), color-stop(.5, @color), to(@color));
|
||||
-webkit-background-size: 100% 1px;
|
||||
background-size: 100% 1px;
|
||||
}
|
||||
|
||||
.border-1px-top(@color: #d2d2d2) {
|
||||
background: left top repeat-x;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(@color), color-stop(.5, @color), color-stop(.5, transparent));
|
||||
background-image: linear-gradient(left top, left bottom, from(@color), color-stop(.5, @color), color-stop(.5, transparent));
|
||||
-webkit-background-size: 100% 1px;
|
||||
background-size: 100% 1px;
|
||||
}
|
||||
|
||||
.border-1px-both(@color: #d2d2d2) {
|
||||
background-position: left top, left bottom;
|
||||
background-repeat: repeat-x, repeat-x;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(@color), color-stop(.5, @color), color-stop(.5, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, @color), to(@color));
|
||||
background-image: linear-gradient(left top, left bottom, from(@color), color-stop(.5, @color), color-stop(.5, transparent)), linear-gradient(left top, left bottom, color-stop(.5, transparent), color-stop(.5, @color), to(@color));
|
||||
-webkit-background-size: 100% 1px, 100% 1px;
|
||||
background-size: 100% 1px, 100% 1px;
|
||||
}
|
||||
|
||||
.border-1px-scale(@color: #d2d2d2) {
|
||||
position: relative;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
border-bottom: 1px solid @color;
|
||||
-webkit-transform: scaleY(.5);
|
||||
-webkit-transform-origin: 0px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.box-sizing(@sizing: border-box) {
|
||||
-webkit-box-sizing: @sizing;
|
||||
}
|
||||
|
||||
.box-shadow(@value) {
|
||||
-webkit-box-shadow: @value;
|
||||
}
|
||||
|
||||
.box-shadow(@value1, @value2) {
|
||||
-webkit-box-shadow: @value1, @value2;
|
||||
}
|
||||
|
||||
.ellipsis(@w:auto) {
|
||||
width: @w;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
.float-clear() {
|
||||
&:after {
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
font-size: 0px;
|
||||
content: ' ';
|
||||
clear: both;
|
||||
height: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.cursor() {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.overflow-scroll() {
|
||||
overflow-y: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
@colorMain: #6ac2b6;
|
||||
@prefix: zui;
|
||||
Reference in New Issue
Block a user