scss替换为less
This commit is contained in:
@@ -0,0 +1,94 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
//-----------------------------------------------------
|
||||
// animate less
|
||||
// 提供动画 mixin 及基础 placeholder 类
|
||||
//-----------------------------------------------------
|
||||
|
||||
// animation-basic 基础动画属性
|
||||
.animation-basic() {
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
// 公共动画基础属性
|
||||
//-----------------------------------------------------
|
||||
.anmCommon() {
|
||||
animation-duration: .5s;
|
||||
animation-fill-mode: both;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes leftIn {
|
||||
from {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
transform: translate(333px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes leftOut {
|
||||
from {
|
||||
transform: translate(333px, 0);
|
||||
}
|
||||
to {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.anmLeftIn() {
|
||||
.anmCommon();
|
||||
animation-name: leftIn;
|
||||
}
|
||||
|
||||
.anmLeftOut() {
|
||||
.anmCommon();
|
||||
animation-name: leftOut;
|
||||
}
|
||||
|
||||
@keyframes smallLeftIn {
|
||||
from {
|
||||
transform: translate(0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(300px, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes smallleftOut {
|
||||
from {
|
||||
transform: translate(300px, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
transform: translate(0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.anmSmallLeftIn() {
|
||||
.anmCommon();
|
||||
animation-name: smallLeftIn;
|
||||
}
|
||||
|
||||
.anmSmallLeftOut() {
|
||||
.anmCommon();
|
||||
animation-name: smallleftOut;
|
||||
}
|
||||
|
||||
// 头像旋转动画
|
||||
@keyframes profilepic {
|
||||
0% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
.picRotate() {
|
||||
animation: profilepic 5s linear infinite;
|
||||
}
|
||||
@@ -1,328 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
//-----------------------------------------------------
|
||||
// animate.scss
|
||||
// 提供6组动画 fade-in/out, shrink-in/out, up-in/out, down-in/out, left-in/out, right-in/out
|
||||
//-----------------------------------------------------
|
||||
|
||||
%animation-basic {
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
// fade in/out
|
||||
//-----------------------------------------------------
|
||||
|
||||
@mixin animation-fade-in($className: fade, $from: 0) {
|
||||
$name: str-insert(In, $className, 0);
|
||||
|
||||
.#{$className}-in {
|
||||
animation-name: $name;
|
||||
@extend %animation-basic;
|
||||
}
|
||||
@include animation-fade($name: $name, $from: $from);
|
||||
}
|
||||
|
||||
@mixin animation-fade-out($className: fade, $to: 0) {
|
||||
$name: str-insert(Out, $className, 0);
|
||||
|
||||
.#{$className}-out {
|
||||
animation-name: $name;
|
||||
@extend %animation-basic;
|
||||
}
|
||||
|
||||
@include animation-fade($name: $name, $from: 1, $to: $to);
|
||||
}
|
||||
|
||||
// shrink in/out
|
||||
//-----------------------------------------------------
|
||||
|
||||
@mixin animation-shrink-in($className: shrink, $from: 0.815) {
|
||||
$name: str-insert(In, $className, 0);
|
||||
|
||||
.#{$className}-in {
|
||||
animation-name: $name;
|
||||
@extend %animation-basic;
|
||||
}
|
||||
@keyframes #{$name} {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale($from);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin animation-shrink-out($className: shrink, $to: 1.185) {
|
||||
$name: str-insert(Out, $className, 0);
|
||||
|
||||
.#{$className}-out {
|
||||
animation-name: $name;
|
||||
@extend %animation-basic;
|
||||
}
|
||||
|
||||
@keyframes #{$name} {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale($to);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// down in/out
|
||||
//-----------------------------------------------------
|
||||
|
||||
@mixin animation-down-in($className: down, $value: 100%) {
|
||||
$name: str-insert(In, $className, 0);
|
||||
|
||||
.#{$className}-in {
|
||||
animation-name: $name;
|
||||
@extend %animation-basic;
|
||||
}
|
||||
|
||||
@keyframes #{$name} {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(0, $value);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin animation-down-out($className: down, $value: 100%) {
|
||||
$name: str-insert(Out, $className, 0);
|
||||
|
||||
.#{$className}-out {
|
||||
animation-name: $name;
|
||||
@extend %animation-basic;
|
||||
}
|
||||
|
||||
@keyframes #{$name} {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate(0, $value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// up in/out
|
||||
//-----------------------------------------------------
|
||||
|
||||
@mixin animation-up-in($className: up, $value: -100%) {
|
||||
$name: str-insert(In, $className, 0);
|
||||
|
||||
.#{$className}-in {
|
||||
animation-name: $name;
|
||||
@extend %animation-basic;
|
||||
}
|
||||
|
||||
@keyframes #{$name} {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(0, $value);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin animation-up-out($className: up, $value: -100%) {
|
||||
$name: str-insert(Out, $className, 0);
|
||||
|
||||
.#{$className}-out {
|
||||
animation-name: $name;
|
||||
@extend %animation-basic;
|
||||
}
|
||||
|
||||
@keyframes #{$name} {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate(0, $value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// left in/out
|
||||
//-----------------------------------------------------
|
||||
|
||||
@mixin animation-left-in($className: left, $value: -100%) {
|
||||
$name: str-insert(In, $className, 0);
|
||||
|
||||
.#{$className}-in {
|
||||
animation-name: $name;
|
||||
@extend %animation-basic;
|
||||
}
|
||||
|
||||
@keyframes #{$name} {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate($value, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin animation-left-out($className: left, $value: -100%) {
|
||||
$name: str-insert(Out, $className, 0);
|
||||
|
||||
.#{$className}-out {
|
||||
animation-name: $name;
|
||||
@extend %animation-basic;
|
||||
}
|
||||
|
||||
@keyframes #{$name} {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate($value, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// right in/out
|
||||
//-----------------------------------------------------
|
||||
|
||||
@mixin animation-right-in($className: right, $value: 100%) {
|
||||
$name: str-insert(In, $className, 0);
|
||||
|
||||
.#{$className}-in {
|
||||
animation-name: $name;
|
||||
@extend %animation-basic;
|
||||
}
|
||||
|
||||
@keyframes #{$name} {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate($value, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin animation-right-out($className: right, $value: 100%) {
|
||||
$name: str-insert(Out, $className, 0);
|
||||
|
||||
.#{$className}-out {
|
||||
animation-name: $name;
|
||||
@extend %animation-basic;
|
||||
}
|
||||
|
||||
@keyframes #{$name} {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate($value, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%anmCommon {
|
||||
animation-duration: .5s;
|
||||
animation-fill-mode: both;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes leftIn {
|
||||
from {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
transform: translate(333px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes leftOut {
|
||||
from {
|
||||
transform: translate(333px, 0);
|
||||
}
|
||||
to {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
%anmLeftIn {
|
||||
@extend %anmCommon;
|
||||
animation-name: leftIn;
|
||||
}
|
||||
|
||||
%anmLeftOut {
|
||||
@extend %anmCommon;
|
||||
animation-name: leftOut;
|
||||
}
|
||||
|
||||
@keyframes smallLeftIn {
|
||||
from {
|
||||
transform: translate(0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(300px, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes smallleftOut {
|
||||
from {
|
||||
transform: translate(300px, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
transform: translate(0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
%anmSmallLeftIn {
|
||||
@extend %anmCommon;
|
||||
animation-name: smallLeftIn;
|
||||
}
|
||||
|
||||
%anmSmallLeftOut {
|
||||
@extend %anmCommon;
|
||||
animation-name: smallleftOut;
|
||||
}
|
||||
|
||||
// 头像旋转动画
|
||||
@keyframes profilepic {
|
||||
0% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
%picRotate {
|
||||
animation: profilepic 5s linear infinite;
|
||||
}
|
||||
@@ -1,247 +0,0 @@
|
||||
@charset "utf-8";
|
||||
|
||||
//-----------------------------------------------------
|
||||
// media queries scss
|
||||
// author: Rafal Bromirski
|
||||
// github: http://github.com/paranoida/sass-mediaqueries
|
||||
// version: 1.6.1
|
||||
//-----------------------------------------------------
|
||||
|
||||
|
||||
// generator
|
||||
// ----------------------------------------------------
|
||||
|
||||
@mixin mq($args...) {
|
||||
$media-type: 'only screen';
|
||||
$media-type-key: 'media-type';
|
||||
$args: keywords($args);
|
||||
$expr: '';
|
||||
|
||||
@if map-has-key($args, $media-type-key) {
|
||||
$media-type: map-get($args, $media-type-key);
|
||||
$args: map-remove($args, $media-type-key);
|
||||
}
|
||||
|
||||
@each $key, $value in $args {
|
||||
@if $value {
|
||||
$expr: "#{$expr} and (#{$key}: #{$value})";
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$media-type} #{$expr} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// screen
|
||||
// ----------------------------------------------------
|
||||
|
||||
@mixin screen($min, $max, $orientation: false) {
|
||||
@include mq($min-width: $min, $max-width: $max, $orientation: $orientation) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin max-screen($max) {
|
||||
@include mq($max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin min-screen($min) {
|
||||
@include mq($min-width: $min) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin screen-height($min, $max, $orientation: false) {
|
||||
@include mq($min-height: $min, $max-height: $max, $orientation: $orientation) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin max-screen-height($max) {
|
||||
@include mq($max-height: $max) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin min-screen-height($min) {
|
||||
@include mq($min-height: $min) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// hdpi
|
||||
// ----------------------------------------------------
|
||||
|
||||
@mixin hdpi($ratio: 1.3) {
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: $ratio),
|
||||
screen and (min-resolution: #{round($ratio*96)}dpi) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// hdtv
|
||||
// ----------------------------------------------------
|
||||
|
||||
@mixin hdtv($standard: '1080') {
|
||||
$min-width: false;
|
||||
$min-height: false;
|
||||
|
||||
$standards: ('720p', 1280px, 720px)
|
||||
('1080', 1920px, 1080px)
|
||||
('2K', 2048px, 1080px)
|
||||
('4K', 4096px, 2160px);
|
||||
|
||||
@each $s in $standards {
|
||||
@if $standard == nth($s, 1) {
|
||||
$min-width: nth($s, 2);
|
||||
$min-height: nth($s, 3);
|
||||
}
|
||||
}
|
||||
|
||||
@include mq(
|
||||
$min-device-width: $min-width,
|
||||
$min-device-height: $min-height,
|
||||
$min-width: $min-width,
|
||||
$min-height: $min-height
|
||||
) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iphone 4
|
||||
// ----------------------------------------------------
|
||||
|
||||
@mixin iphone4($orientation: false) {
|
||||
$min: 320px;
|
||||
$max: 480px;
|
||||
$pixel-ratio: 2;
|
||||
$aspect-ratio: '2/3';
|
||||
|
||||
@include mq(
|
||||
$min-device-width: $min,
|
||||
$max-device-width: $max,
|
||||
$orientation: $orientation,
|
||||
$device-aspect-ratio: $aspect-ratio,
|
||||
$-webkit-device-pixel-ratio: $pixel-ratio
|
||||
) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iphone 5
|
||||
// ----------------------------------------------------
|
||||
|
||||
@mixin iphone5($orientation: false) {
|
||||
$min: 320px;
|
||||
$max: 568px;
|
||||
$pixel-ratio: 2;
|
||||
$aspect-ratio: '40/71';
|
||||
|
||||
@include mq(
|
||||
$min-device-width: $min,
|
||||
$max-device-width: $max,
|
||||
$orientation: $orientation,
|
||||
$device-aspect-ratio: $aspect-ratio,
|
||||
$-webkit-device-pixel-ratio: $pixel-ratio
|
||||
) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iphone 6
|
||||
// ----------------------------------------------------
|
||||
|
||||
@mixin iphone6($orientation: false) {
|
||||
$min: 375px;
|
||||
$max: 667px;
|
||||
$pixel-ratio: 2;
|
||||
|
||||
@include mq(
|
||||
$min-device-width: $min,
|
||||
$max-device-width: $max,
|
||||
$orientation: $orientation,
|
||||
$-webkit-device-pixel-ratio: $pixel-ratio
|
||||
) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iphone 6 plus
|
||||
// ----------------------------------------------------
|
||||
|
||||
@mixin iphone6-plus($orientation: false) {
|
||||
$min: 414px;
|
||||
$max: 736px;
|
||||
$pixel-ratio: 3;
|
||||
|
||||
@include mq(
|
||||
$min-device-width: $min,
|
||||
$max-device-width: $max,
|
||||
$orientation: $orientation,
|
||||
$-webkit-device-pixel-ratio: $pixel-ratio
|
||||
) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ipad (all)
|
||||
// ----------------------------------------------------
|
||||
|
||||
@mixin ipad($orientation: false) {
|
||||
$min: 768px;
|
||||
$max: 1024px;
|
||||
|
||||
@include mq(
|
||||
$min-device-width: $min,
|
||||
$max-device-width: $max,
|
||||
$orientation: $orientation
|
||||
) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ipad-retina
|
||||
// ----------------------------------------------------
|
||||
|
||||
@mixin ipad-retina($orientation: false) {
|
||||
$min: 768px;
|
||||
$max: 1024px;
|
||||
$pixel-ratio: 2;
|
||||
|
||||
@include mq(
|
||||
$min-device-width: $min,
|
||||
$max-device-width: $max,
|
||||
$orientation: $orientation,
|
||||
$-webkit-device-pixel-ratio: $pixel-ratio
|
||||
) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// orientation
|
||||
// ----------------------------------------------------
|
||||
|
||||
@mixin landscape() {
|
||||
@include mq($orientation: landscape) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin portrait() {
|
||||
@include mq($orientation: portrait) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,409 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
//-----------------------------------------------------
|
||||
// mixin less
|
||||
// 包括常用的 mixin 及辅助样式
|
||||
// LESS 中用 .name() 定义 mixin（不会输出到 CSS），用 .name() 调用
|
||||
//-----------------------------------------------------
|
||||
|
||||
|
||||
// Center-align a block level element
|
||||
//-----------------------------------------------------
|
||||
.center-block() {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// clearfix
|
||||
//-----------------------------------------------------
|
||||
.clearfix() {
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
&::after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide only visually, but have it available for screenreaders
|
||||
//-----------------------------------------------------
|
||||
.hidden-clip() {
|
||||
position: absolute;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
}
|
||||
|
||||
// ellipsis
|
||||
//-----------------------------------------------------
|
||||
.ellipsis() {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
// ellipsis lines (only old webkit flex box)
|
||||
//-----------------------------------------------------
|
||||
.ellipsis-lines(@lines: 2) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: @lines;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
// word-break
|
||||
//-----------------------------------------------------
|
||||
.word-break() {
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
// disabled
|
||||
//-----------------------------------------------------
|
||||
.disabled(@disabledText: @colorDisabled-text; @disabledBg: @colorDisabled-bg; @disabledBorder: false) {
|
||||
background-color: @disabledBg !important;
|
||||
color: @disabledText !important;
|
||||
cursor: default !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
// image replace text
|
||||
//-----------------------------------------------------
|
||||
.ir() {
|
||||
font: 0/0 a;
|
||||
text-shadow: none;
|
||||
border: 0 none;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
// fixed top or bottom
|
||||
//-----------------------------------------------------
|
||||
.fixed(@pos: 0) {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: @pos;
|
||||
}
|
||||
|
||||
.fixed-bottom() {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
// justify 左右对齐
|
||||
//-----------------------------------------------------
|
||||
.justify() {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
// retina border 0.5px 实现 (ios9)
|
||||
//-----------------------------------------------------
|
||||
.retina-one-px() {
|
||||
@supports (border-width: 0.5px) {
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), screen and (-webkit-min-device-pixel-ratio: 3) {
|
||||
border-width: 0.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// retina border via linear-gradient
|
||||
//-----------------------------------------------------
|
||||
.retina-one-px-bg(@direction: top; @color: @colorBorder) {
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
// retina border via transform
|
||||
//-----------------------------------------------------
|
||||
.retina-one-px-border(@direction: top; @color: @colorBorder) {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
box-sizing: border-box;
|
||||
right: 0;
|
||||
height: 0;
|
||||
transform: scaleY(0.5);
|
||||
border-top: 1px solid @color;
|
||||
}
|
||||
|
||||
.retina-one-px-border-bottom(@color: @colorBorder) {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 0;
|
||||
box-sizing: border-box;
|
||||
transform: scaleY(0.5);
|
||||
border-top: 1px solid @color;
|
||||
}
|
||||
|
||||
.retina-one-px-border-all(@color: @colorBorder) {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
box-sizing: border-box;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
transform-origin: left top;
|
||||
transform: scale(0.5);
|
||||
border: 1px solid @color;
|
||||
}
|
||||
|
||||
// border top & bottom placeholder
|
||||
//-----------------------------------------------------
|
||||
.border-tb() {
|
||||
position: relative;
|
||||
&::before {
|
||||
content: "";
|
||||
.retina-one-px-border();
|
||||
z-index: 1;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
.retina-one-px-border-bottom();
|
||||
}
|
||||
}
|
||||
|
||||
// border all placeholder
|
||||
//-----------------------------------------------------
|
||||
.border-all() {
|
||||
position: relative;
|
||||
&::before {
|
||||
content: "";
|
||||
.retina-one-px-border-all();
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
// equal-table
|
||||
//-----------------------------------------------------
|
||||
.equal-table(@child: ~"li") {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
@{child} {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
|
||||
// equal-flex
|
||||
//-----------------------------------------------------
|
||||
.equal-flex(@child: ~"li") {
|
||||
display: flex;
|
||||
@{child} {
|
||||
flex: 1;
|
||||
width: 1%;
|
||||
}
|
||||
}
|
||||
|
||||
// flex center
|
||||
//-----------------------------------------------------
|
||||
.center-flex() {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// translate center
|
||||
//-----------------------------------------------------
|
||||
.center-translate() {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
}
|
||||
|
||||
// triangle 三角箭头
|
||||
//-----------------------------------------------------
|
||||
.triangle-basic() {
|
||||
content: "";
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.triangle(@direction: top; @borderWidth: 6px; @borderColor: @colorC) {
|
||||
.triangle-basic();
|
||||
}
|
||||
|
||||
// v-arrow 方向箭头
|
||||
//-----------------------------------------------------
|
||||
.v-arrow(@direction: right; @borderWidth: 2px; @size: 10px) {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: @size;
|
||||
height: @size;
|
||||
border-top: @borderWidth solid currentColor;
|
||||
border-right: @borderWidth solid currentColor;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
// btn-size
|
||||
//-----------------------------------------------------
|
||||
.btn-size(@padding: 1em; @height: @barHeight; @radius: 3px) {
|
||||
padding: 0 @padding;
|
||||
line-height: (@height - 2px);
|
||||
border-radius: @radius;
|
||||
}
|
||||
|
||||
// btn-color (simplified)
|
||||
//-----------------------------------------------------
|
||||
.btn-color(@btnColorText: #333; @btnColorBg: #666; @btnColorBorder: false) {
|
||||
color: @btnColorText;
|
||||
background-color: @btnColorBg;
|
||||
&:hover, &:active {
|
||||
background-color: darken(@btnColorBg, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
// function: tint - 为颜色添加白色
|
||||
//-----------------------------------------------------
|
||||
.tint(@color; @percent) {
|
||||
// Use mix(white, @color, @percent) equivalent
|
||||
// In LESS: mix(white, @color, @percent)
|
||||
}
|
||||
|
||||
// function: shade - 为颜色添加黑色
|
||||
//-----------------------------------------------------
|
||||
.shade(@color; @percent) {
|
||||
// In LESS: mix(black, @color, @percent)
|
||||
}
|
||||
|
||||
|
||||
// 下面是常用 placeholder 转为 LESS mixin
|
||||
//-----------------------------------------------------
|
||||
|
||||
// shadow
|
||||
.shadow() {
|
||||
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, .75);
|
||||
}
|
||||
|
||||
// trans
|
||||
.trans() {
|
||||
transition: all 0.2s ease-in;
|
||||
-ms-transition: all 0.2s ease-in;
|
||||
}
|
||||
|
||||
// trans8
|
||||
.trans8() {
|
||||
transition: all 0.8s ease-in;
|
||||
-ms-transition: all 0.8s ease-in;
|
||||
}
|
||||
|
||||
// display-flex
|
||||
.display-flex() {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// transition-all
|
||||
.transition-all() {
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
// translate3d
|
||||
.translate3d() {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
// btn-basic 按钮基本样式
|
||||
.btn-basic() {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
border: 1px solid transparent;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
padding: 0 1em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// bar-line
|
||||
.bar-line() {
|
||||
line-height: (@barHeight - 10px);
|
||||
padding: 5px 10px;
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
&:active,
|
||||
&:hover {
|
||||
background-color: darken(@colorF, 3%);
|
||||
}
|
||||
&:not(:first-of-type)::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
box-sizing: border-box;
|
||||
right: 0;
|
||||
height: 0;
|
||||
transform: scaleY(0.5);
|
||||
border-top: 1px solid @colorBorder;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// item-v-right 右侧箭头
|
||||
.item-v-right() {
|
||||
&::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-top: 2px solid currentColor;
|
||||
border-right: 2px solid currentColor;
|
||||
color: @colorC;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
margin-top: -1px;
|
||||
transform: rotate(45deg) translate(0, -50%);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
// gap-item 间隔列表
|
||||
.gap-item() {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
margin: 10px 0;
|
||||
&:active,
|
||||
&:hover {
|
||||
background-color: darken(@colorF, 3%);
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
box-sizing: border-box;
|
||||
right: 0;
|
||||
height: 0;
|
||||
transform: scaleY(0.5);
|
||||
border-top: 1px solid @colorBorder;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 0;
|
||||
box-sizing: border-box;
|
||||
transform: scaleY(0.5);
|
||||
border-top: 1px solid @colorBorder;
|
||||
}
|
||||
}
|
||||
|
||||
// triangle-basic
|
||||
.triangle-basic-class() {
|
||||
content: "";
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -1,694 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
//-----------------------------------------------------
|
||||
// mixin scss
|
||||
// 包括常用的mixin, %, @function 及辅助的btn和背景图片icon
|
||||
// mixin，通过@include调用，样式通过拷贝的方式使用，尤其适用于传递参数
|
||||
// %，通过@extend调用，样式通过组合申明的方式使用，适用于不传参数的代码片段
|
||||
// @function，返回一个值，用于调用
|
||||
//-----------------------------------------------------
|
||||
|
||||
// mixin & %
|
||||
// 既定义了mixin也定义了%，根据需求使用@include或@extend调用
|
||||
//-----------------------------------------------------
|
||||
|
||||
// Center-align a block level element
|
||||
@mixin center-block($extend: true) {
|
||||
@if $extend {
|
||||
@extend %center-block;
|
||||
}
|
||||
@else {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
%center-block {
|
||||
@include center-block(false);
|
||||
}
|
||||
|
||||
// clearfix
|
||||
@mixin clearfix($extend: true) {
|
||||
@if $extend {
|
||||
@extend %clearfix;
|
||||
}
|
||||
@else {
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
&::after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%clearfix {
|
||||
@include clearfix(false);
|
||||
}
|
||||
|
||||
// Hide only visually, but have it available for screenreaders
|
||||
// 只隐藏于视觉，屏幕浏览器可以阅读
|
||||
@mixin hidden-clip($extend: true) {
|
||||
@if $extend {
|
||||
@extend %hidden-clip;
|
||||
}
|
||||
@else {
|
||||
position: absolute;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
}
|
||||
}
|
||||
|
||||
%hidden-clip {
|
||||
@include hidden-clip(false);
|
||||
}
|
||||
|
||||
// ellipsis
|
||||
@mixin ellipsis($extend: true) {
|
||||
@if $extend {
|
||||
@extend %ellipsis;
|
||||
}
|
||||
@else {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
%ellipsis {
|
||||
@include ellipsis(false);
|
||||
}
|
||||
|
||||
// ellipsis lines
|
||||
// only old webkit flex box
|
||||
@mixin ellipsis-lines($lines: 2) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: $lines;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
// word-break
|
||||
@mixin word-break($extend: true) {
|
||||
@if $extend {
|
||||
@extend %word-break;
|
||||
}
|
||||
@else {
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
%word-break {
|
||||
@include word-break(false);
|
||||
}
|
||||
|
||||
// disabled
|
||||
// add !important
|
||||
@mixin disabled($colorText: map-get($colorDisabled, text), $colorBg: map-get($colorDisabled, bg), $colorBorder: false) {
|
||||
background-color: $colorBg !important;
|
||||
color: $colorText !important;
|
||||
cursor: default !important;
|
||||
pointer-events: none !important;
|
||||
@if $colorBorder {
|
||||
border: 1px solid map-get($colorDisabled, border);
|
||||
}
|
||||
}
|
||||
|
||||
%disabled {
|
||||
@include disabled;
|
||||
}
|
||||
|
||||
// image replace text
|
||||
@mixin ir($extend: true) {
|
||||
@if $extend {
|
||||
@extend %ir;
|
||||
}
|
||||
@else {
|
||||
font: 0/0 a;
|
||||
text-shadow: none;
|
||||
border: 0 none;
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
%ir {
|
||||
@include ir(false);
|
||||
}
|
||||
|
||||
// fixed top or bottom or bottom & top
|
||||
@mixin fixed($pos: 0) {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@if $pos == bottom {
|
||||
bottom: 0;
|
||||
} @else if $pos == all {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
} @else {
|
||||
top: $pos;
|
||||
}
|
||||
}
|
||||
|
||||
%fixed-top {
|
||||
@include fixed;
|
||||
}
|
||||
|
||||
%fixed-bottom {
|
||||
@include fixed(bottom);
|
||||
}
|
||||
|
||||
// justify
|
||||
// 左右对齐
|
||||
@mixin justify($extend: true) {
|
||||
@if $extend {
|
||||
@extend %justify;
|
||||
}
|
||||
@else {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
%justify {
|
||||
@include justify(false);
|
||||
}
|
||||
|
||||
// retina border
|
||||
// 0.5px实现 ios9
|
||||
@mixin retina-one-px() {
|
||||
@supports (border-width: 0.5px) {
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2), screen and (-webkit-min-device-pixel-ratio: 3) {
|
||||
border-width: 0.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// linear-gradient实现
|
||||
// 安卓4.3- 不支持background-size的百分比
|
||||
@mixin retina-one-px-bg($direction: top, $color: $colorBorder) {
|
||||
background-repeat: no-repeat;
|
||||
@if $direction == top {
|
||||
background-image: linear-gradient(to bottom, $color 50%, transparent 50%);
|
||||
background-size: 100% 1px;
|
||||
}
|
||||
@if $direction == bottom {
|
||||
background-image: linear-gradient(to top, $color 50%, transparent 50%);
|
||||
background-size: 100% 1px;
|
||||
background-position: left bottom;
|
||||
}
|
||||
@if $direction == left {
|
||||
background-image: linear-gradient(to right, $color 50%, transparent 50%);
|
||||
background-size: 1px 100%;
|
||||
}
|
||||
@if $direction == right {
|
||||
background-image: linear-gradient(to left, $color 50%, transparent 50%);
|
||||
background-size: 1px 100%;
|
||||
background-position: right top;
|
||||
}
|
||||
@if $direction == v { // 左右两个边框
|
||||
background-image: linear-gradient(to right, $color 50%, transparent 50%),linear-gradient(to left, $color 50%, transparent 50%);
|
||||
background-size: 1px 100%;
|
||||
background-position: left top, right top;
|
||||
}
|
||||
@if $direction == h { // 上下两个边框
|
||||
background-image: linear-gradient(to bottom, $color 50%, transparent 50%), linear-gradient(to top, $color 50%, transparent 50%);
|
||||
background-size: 100% 1px;
|
||||
background-position: left top, left bottom;
|
||||
}
|
||||
@if $direction == all { // 上下左右四个边框
|
||||
background-image: linear-gradient(to bottom, $color 50%, transparent 50%), linear-gradient(to top, $color 50%, transparent 50%), linear-gradient(to right, $color 50%, transparent 50%),linear-gradient(to left, $color 50%, transparent 50%);
|
||||
background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
|
||||
background-position: left top, left bottom, left top, right top;
|
||||
}
|
||||
}
|
||||
|
||||
// border和transform实现
|
||||
// 注意before和after的层级问题
|
||||
@mixin retina-one-px-border($direction: top, $color: $colorBorder) {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
@if $direction == top or $direction == bottom{
|
||||
right: 0;
|
||||
height: 0;
|
||||
transform: scaleY(0.5);
|
||||
border-top: 1px solid $color;
|
||||
}
|
||||
@if $direction == bottom {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
@if $direction == right or $direction == left{
|
||||
width: 0;
|
||||
bottom: 0;
|
||||
transform: scaleX(0.5);
|
||||
border-left: 1px solid $color;
|
||||
}
|
||||
@if $direction == right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
@if $direction == all {
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
transform-origin: left top;
|
||||
transform: scale(0.5);
|
||||
border: 1px solid $color;
|
||||
}
|
||||
}
|
||||
|
||||
// border top & bottom
|
||||
%border-tb {
|
||||
position: relative;
|
||||
&::before {
|
||||
content: "";
|
||||
@include retina-one-px-border(top);
|
||||
z-index: 1;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
@include retina-one-px-border(bottom);
|
||||
}
|
||||
}
|
||||
|
||||
// border all
|
||||
%border-all {
|
||||
position: relative;
|
||||
&::before {
|
||||
content: "";
|
||||
@include retina-one-px-border(all);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
// mixin
|
||||
// 只定义了mixin，所以只能通过@include来调用
|
||||
//-----------------------------------------------------
|
||||
|
||||
// table 等
|
||||
// $child 参数请使用单引号，因为用于子元素选择器
|
||||
@mixin equal-table($child: 'li') {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
|
||||
#{unquote($child)} {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
|
||||
// flex 等分
|
||||
// $child 参数请使用单引号，因为用于子元素选择器
|
||||
@mixin equal-flex($child: 'li') {
|
||||
display: flex;
|
||||
|
||||
#{unquote($child)} {
|
||||
flex: 1;
|
||||
width: 1%;
|
||||
}
|
||||
}
|
||||
|
||||
// line equal gap
|
||||
// $child 参数请使用单引号，因为用于子元素选择器
|
||||
@mixin line-equal-gap($gap: 10px, $child: 'li', $lr: true) {
|
||||
display: flex;
|
||||
|
||||
@if $lr {
|
||||
padding-left: $gap;
|
||||
padding-right: $gap;
|
||||
}
|
||||
|
||||
#{unquote($child)} {
|
||||
flex: 1;
|
||||
width: 1%;
|
||||
&:not(:first-of-type){
|
||||
margin-left: $gap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// line equal item
|
||||
@mixin line-equal-item($lr: true) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@if $lr {
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// flex center
|
||||
@mixin center-flex($direction: both) {
|
||||
display: flex;
|
||||
@if $direction == both {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@else if $direction == x {
|
||||
justify-content: center;
|
||||
}
|
||||
@else if $direction == y {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
// translate center
|
||||
@mixin center-translate($direction: both) {
|
||||
position: absolute;
|
||||
@if $direction == both {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
}
|
||||
@else if $direction == x {
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
}
|
||||
@else if $direction == y {
|
||||
top: 50%;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
// object wrap
|
||||
// $child 参数请使用单引号，因为用于子元素选择器
|
||||
@mixin object-wrap($percent: 100%, $child: 'img') {
|
||||
position: relative;
|
||||
padding-top: $percent;
|
||||
height: 0;
|
||||
|
||||
#{unquote($child)} {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// triangle 三角箭头
|
||||
// 可采用空元素或伪元素生成，具体定位这里不涉及
|
||||
%triangle-basic {
|
||||
content: "";
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@mixin triangle($direction: top, $borderWidth: 6px, $borderColor: $colorC) {
|
||||
@extend %triangle-basic;
|
||||
@if $direction == top {
|
||||
border-bottom: $borderWidth solid $borderColor;
|
||||
border-left: $borderWidth dashed transparent;
|
||||
border-right: $borderWidth dashed transparent;
|
||||
}
|
||||
@else if $direction == right {
|
||||
border-left: $borderWidth solid $borderColor;
|
||||
border-top: $borderWidth dashed transparent;
|
||||
border-bottom: $borderWidth dashed transparent;
|
||||
}
|
||||
@else if $direction == bottom {
|
||||
border-top: $borderWidth solid $borderColor;
|
||||
border-left: $borderWidth dashed transparent;
|
||||
border-right: $borderWidth dashed transparent;
|
||||
}
|
||||
@else if $direction == left {
|
||||
border-right: $borderWidth solid $borderColor;
|
||||
border-top: $borderWidth dashed transparent;
|
||||
border-bottom: $borderWidth dashed transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// v arrow 方向箭头
|
||||
@mixin v-arrow($direction: right, $borderWidth: 2px, $size: 10px) {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: $size;
|
||||
height: $size;
|
||||
@if $direction == top {
|
||||
border-top: $borderWidth solid currentColor;
|
||||
border-right: $borderWidth solid currentColor;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
@else if $direction == right {
|
||||
border-top: $borderWidth solid currentColor;
|
||||
border-right: $borderWidth solid currentColor;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
@else if $direction == bottom {
|
||||
border-left: $borderWidth solid currentColor;
|
||||
border-bottom: $borderWidth solid currentColor;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
@if $direction == left {
|
||||
border-left: $borderWidth solid currentColor;
|
||||
border-bottom: $borderWidth solid currentColor;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
// selector
|
||||
// 改变父元素状态，如:hover或.active
|
||||
// 父元素不能有组合选择器，如.a, .b{}
|
||||
// .parent{
|
||||
// .child{
|
||||
// @include parent-state(":hover"){
|
||||
// color: #f00;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .parent:hover .child {
|
||||
// color: #f00;
|
||||
// }
|
||||
@mixin parent-state($states...) {
|
||||
$parent: nth(nth(&, 1), (length(nth(&, 1))-1));
|
||||
|
||||
@each $state in $states {
|
||||
@at-root #{selector-replace(&, $parent, str-insert($state, $parent, 0))} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// animation-fade
|
||||
// @include animation-fade
|
||||
// @include animation-fade($from: false, $to: .5);
|
||||
// @include animation-fade($from: 1, $to: 0);
|
||||
@mixin animation-fade($name: animationFade, $from: 0, $to: false){
|
||||
@keyframes #{animationFade} {
|
||||
@if $from {
|
||||
from {
|
||||
opacity: $from;
|
||||
}
|
||||
}
|
||||
@if $to {
|
||||
to {
|
||||
opacity: $to;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// animation-translate
|
||||
// @include animation-translate
|
||||
// @include animation-translate($from: x -100%);
|
||||
// @include animation-translate($from: xy -50% -50%, $to: y -100%);
|
||||
// @include animation-translate($from: y 100px, $to: y 0px);
|
||||
@mixin animation-translate($name: animationTranslate, $from: y -100%, $to: false) {
|
||||
@keyframes #{$name} {
|
||||
@if $from and length($from) > 1 {
|
||||
from {
|
||||
@if nth($from, 1) == x {
|
||||
transform: translate(nth($from, 2), 0);
|
||||
}
|
||||
@if nth($from, 1) == y {
|
||||
transform: translate(0, nth($from, 2));
|
||||
}
|
||||
@if nth($from, 1) == xy or nth($from, 1) == both {
|
||||
transform: translate(nth($from, 2), nth($from, 3));
|
||||
}
|
||||
}
|
||||
}
|
||||
@if $to andd length($to) > 1 {
|
||||
to {
|
||||
@if nth($to, 1) == x {
|
||||
transform: translate(nth($to, 2), 0);
|
||||
}
|
||||
@if nth($to, 1) == y {
|
||||
transform: translate(0, nth($to, 2));
|
||||
}
|
||||
@if nth($to, 1) == xy or nth($to, 1) == both {
|
||||
transform: translate(nth($to, 2), nth($to, 3));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// %
|
||||
// 只定义了%，所以只能通过@extend来调用
|
||||
//-----------------------------------------------------
|
||||
|
||||
// bar line
|
||||
%bar-line {
|
||||
line-height: $barHeight - 10px;
|
||||
padding: 5px 10px;
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
@if $activeStateSwitch{
|
||||
&:active,
|
||||
&:hover {
|
||||
background-color: darken($colorF, 3%);
|
||||
}
|
||||
}
|
||||
&:not(:first-of-type)::before {
|
||||
content: "";
|
||||
@include retina-one-px-border;
|
||||
}
|
||||
}
|
||||
|
||||
// item arrow, 右侧箭头跳转指向
|
||||
%item-v-right {
|
||||
&::after {
|
||||
content: "";
|
||||
@include v-arrow;
|
||||
color: $colorC;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
margin-top: -1px;
|
||||
transform: rotate(45deg) translate(0, -50%);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
// 间隔列表
|
||||
%gap-item{
|
||||
position: relative;
|
||||
background: #fff;
|
||||
margin: 10px 0;
|
||||
@if $activeStateSwitch{
|
||||
&:active,
|
||||
&:hover {
|
||||
background-color: darken($colorF, 3%);
|
||||
}
|
||||
}
|
||||
&::before{
|
||||
content: "";
|
||||
@include retina-one-px-border;
|
||||
}
|
||||
&::after{
|
||||
content: "";
|
||||
@include retina-one-px-border(bottom);
|
||||
}
|
||||
}
|
||||
|
||||
// 下面的几个%，由于版本或前缀，所以设计成%
|
||||
//-----------------------------------------------------
|
||||
// flex
|
||||
%display-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// all-transition
|
||||
%transition-all {
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
// translate3d
|
||||
%translate3d {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
|
||||
// btn
|
||||
//----------------------------------------------------
|
||||
// btn-basic
|
||||
// 按钮基本样式，联合申明
|
||||
%btn-basic {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
border: 1px solid transparent;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
padding: 0 1em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// btn-size
|
||||
// 按钮大小
|
||||
@mixin btn-size($padding: 1em, $height: $barHeight, $radius: 3px) {
|
||||
padding: 0 $padding;
|
||||
line-height: $height - 2px; // 减掉2px的上下高度
|
||||
@if $radius {
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
// btn-color
|
||||
// 包括按钮背景色，文本色，是否有边框
|
||||
@mixin btn-color($colorText: #333, $colorBg: #666, $colorBorder: false) {
|
||||
color: nth($colorText, 1);
|
||||
background-color: nth($colorBg, 1);
|
||||
@if $colorBorder {
|
||||
border-color: nth($colorBorder, 1);
|
||||
}
|
||||
&:hover,&:active {
|
||||
@if length($colorText) == 2 {
|
||||
color: nth($colorText, 2);
|
||||
}
|
||||
@if length($colorBg) == 2 {
|
||||
background-color: nth($colorBg, 2);
|
||||
} @else {
|
||||
@if lightness($colorBg) > 40% {
|
||||
background-color: darken($colorBg, 5%);
|
||||
}
|
||||
@else {
|
||||
background-color: lighten($colorBg, 5%);
|
||||
}
|
||||
}
|
||||
@if $colorBorder and length($colorBorder) == 2 {
|
||||
border-color: nth($colorBorder, 2); // $colorBorder: #dbdbdb #ccc => #ccc
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//function
|
||||
//-----------------------------------------------------
|
||||
|
||||
// 为颜色添加白色，以百分比形式
|
||||
@function tint($color, $percent) {
|
||||
@return mix(white, $color, $percent);
|
||||
}
|
||||
|
||||
// 为颜色添加黑色，以百分比形式
|
||||
@function shade($color, $percent) {
|
||||
@return mix(black, $color, $percent);
|
||||
}
|
||||
|
||||
%shadow {
|
||||
box-shadow: 0px 0px 6px 0px rgba(0,0,0,.75);
|
||||
}
|
||||
|
||||
%trans {
|
||||
transition: all 0.2s ease-in;
|
||||
-ms-transition: all 0.2s ease-in;
|
||||
}
|
||||
|
||||
%trans8 {
|
||||
transition: all 0.8s ease-in;
|
||||
-ms-transition: all 0.8s ease-in;
|
||||
}
|
||||
+39
-85
@@ -1,7 +1,7 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
//-----------------------------------------------------
|
||||
// reset scss
|
||||
//-----------------------------------------------------
|
||||
// reset less
|
||||
// 包括normalize，清零重置
|
||||
//-----------------------------------------------------
|
||||
|
||||
@@ -21,20 +21,17 @@ html {
|
||||
// 1. Remove default margin
|
||||
body {
|
||||
margin: 0; // 1
|
||||
font-size: $fontSize;
|
||||
font-family: $fontFamily;
|
||||
line-height: $fontLineHeight;
|
||||
color: $colorText;
|
||||
background-color: $colorBg;
|
||||
font-size: @fontSize;
|
||||
font-family: @fontFamily;
|
||||
line-height: @fontLineHeight;
|
||||
color: @colorText;
|
||||
background-color: @colorBg;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
// HTML5 display definitions
|
||||
//-----------------------------------------------------
|
||||
|
||||
// Correct `block` display not defined for any HTML5 element in IE 8/9.
|
||||
// Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
|
||||
// Correct `block` display not defined for `main` in IE 11.
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
@@ -73,7 +70,7 @@ progress {
|
||||
|
||||
// Address `[hidden]` styling not present in IE 8/9/10.
|
||||
// Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
|
||||
[hidden],template {
|
||||
[hidden], template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -86,8 +83,8 @@ progress {
|
||||
a {
|
||||
background: transparent; // 1
|
||||
text-decoration: none;
|
||||
color: nth($colorLink, 1);
|
||||
|
||||
color: @colorLink;
|
||||
|
||||
&:active {
|
||||
outline: 0; // 2
|
||||
}
|
||||
@@ -96,34 +93,28 @@ a {
|
||||
// Text-level semantics
|
||||
//-----------------------------------------------------
|
||||
|
||||
// Address styling not present in IE 8/9/10/11, Safari, and Chrome.
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
// Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
|
||||
b,strong {
|
||||
b, strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
// Address styling not present in Safari and Chrome.
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
// Address styling not present in IE 8/9.
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
// Address inconsistent and variable font size in all browsers.
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
// Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
sub,sup {
|
||||
sub, sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
@@ -156,15 +147,6 @@ svg:not(:root) {
|
||||
// Grouping content
|
||||
//-----------------------------------------------------
|
||||
|
||||
// 1. Contain overflow in all browsers.
|
||||
// 2. Improve readability of pre-formatted text in all browsers.
|
||||
// pre {
|
||||
// overflow: auto; // 1
|
||||
// white-space: pre; // 2
|
||||
// white-space: pre-wrap; // 2
|
||||
// word-wrap: break-word; // 2
|
||||
// }
|
||||
|
||||
// 1. Address odd `em`-unit font size rendering in all browsers.
|
||||
code,
|
||||
kbd,
|
||||
@@ -177,13 +159,6 @@ samp {
|
||||
// Forms
|
||||
//-----------------------------------------------------
|
||||
|
||||
// Known limitation: by default, Chrome and Safari on OS X allow very limited
|
||||
// styling of `select`, unless a `border` property is set.
|
||||
|
||||
// 1. Correct color not being inherited.
|
||||
// Known issue: affects color of disabled elements.
|
||||
// 2. Correct font properties not being inherited.
|
||||
// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
@@ -196,33 +171,25 @@ textarea {
|
||||
}
|
||||
|
||||
// Show the overflow in IE.
|
||||
// 1. Show the overflow in Edge.
|
||||
// 2. Show the overflow in Edge, Firefox, and IE.
|
||||
button,
|
||||
input, // 1
|
||||
select { // 2
|
||||
input,
|
||||
select {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
// Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
// All other form control elements do not inherit `text-transform` values.
|
||||
// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
|
||||
// Correct `select` style inheritance in Firefox.
|
||||
button,select {
|
||||
button, select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
// and `video` controls.
|
||||
// 2. Correct inability to style clickable `input` types in iOS.
|
||||
// 3. Improve usability and consistency of cursor style between image-type
|
||||
// `input` and others.
|
||||
// 1. Correct inability to style clickable `input` types in iOS.
|
||||
// 2. Improve usability and consistency of cursor style between image-type `input` and others.
|
||||
button,
|
||||
html input[type="button"], // 1
|
||||
html input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; // 2
|
||||
cursor: pointer; // 3
|
||||
-webkit-appearance: button; // 1
|
||||
cursor: pointer; // 2
|
||||
}
|
||||
|
||||
// Re-set default cursor for disabled elements.
|
||||
@@ -237,42 +204,33 @@ input::-moz-focus-inner {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// 1. Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
// the UA stylesheet.
|
||||
// 1. Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet.
|
||||
input {
|
||||
line-height: normal; // 1
|
||||
}
|
||||
|
||||
// It's recommended that you don't attempt to style these elements.
|
||||
// Firefox's implementation doesn't respect box-sizing, padding, or width.
|
||||
|
||||
// 1. Address box sizing set to `content-box` in IE 8/9/10.
|
||||
// 2. Remove excess padding in IE 8/9/10.
|
||||
// 1. Address `box-sizing` set to `border-box` in Safari and Chrome (include `-webkit-`).
|
||||
// 2. Address `height` property not being respected.
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; // 1
|
||||
padding: 0; // 2
|
||||
}
|
||||
|
||||
// Fix the cursor style for Chrome's increment/decrement buttons. For certain
|
||||
// `font-size` values of the `input`, it causes the cursor style of the
|
||||
// decrement button to change from `default` to `text`.
|
||||
// Fix the cursor style for Chrome's increment/decrement buttons.
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// 1. Address `appearance` set to `searchfield` in Safari and Chrome.
|
||||
// 2. Address `box-sizing` set to `border-box` in Safari and Chrome
|
||||
// (include `-moz` to future-proof).
|
||||
// 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; // 1
|
||||
box-sizing: border-box;
|
||||
box-sizing: content-box; // 2
|
||||
}
|
||||
|
||||
// Remove inner padding and search cancel button in Safari and Chrome on OS X.
|
||||
// Safari (but not Chrome) clips the cancel button when the search input has
|
||||
// padding (and `textfield` appearance).
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
@@ -292,15 +250,12 @@ legend {
|
||||
padding: 0; // 2
|
||||
}
|
||||
|
||||
// 1. Remove default vertical scrollbar in IE 8/9/10/11.
|
||||
// Remove default vertical scrollbar in IE 8/9/10/11.
|
||||
textarea {
|
||||
overflow: auto; // 1
|
||||
resize: vertical;
|
||||
vertical-align: top;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// Don't inherit the `font-weight` (applied by a rule above).
|
||||
// NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -314,7 +269,7 @@ button {
|
||||
}
|
||||
|
||||
// Android 下 input focus 消除高亮外框
|
||||
textarea,input {
|
||||
textarea, input {
|
||||
-webkit-user-modify: read-write-plaintext-only;
|
||||
}
|
||||
|
||||
@@ -325,39 +280,38 @@ input::-ms-reveal {
|
||||
}
|
||||
|
||||
// 表单placeholder样式
|
||||
// 注意不可联合申明，否则无效
|
||||
// Firefox 19+
|
||||
input::-moz-placeholder,
|
||||
textarea::-moz-placeholder {
|
||||
color: $colorPlaceholder;
|
||||
color: @colorPlaceholder;
|
||||
}
|
||||
|
||||
// Internet Explorer 10+
|
||||
input:-ms-input-placeholder,
|
||||
textarea:-ms-input-placeholder {
|
||||
color: $colorPlaceholder;
|
||||
color: @colorPlaceholder;
|
||||
}
|
||||
|
||||
// Safari and Chrome
|
||||
input::-webkit-input-placeholder,
|
||||
textarea::-webkit-input-placeholder {
|
||||
color: $colorPlaceholder;
|
||||
color: @colorPlaceholder;
|
||||
}
|
||||
|
||||
// 如不支持placeholder添加class 或者 设置提示的placeholder
|
||||
.placeholder{
|
||||
color: $colorPlaceholder;
|
||||
// 如不支持placeholder添加class
|
||||
.placeholder {
|
||||
color: @colorPlaceholder;
|
||||
}
|
||||
|
||||
// Tables
|
||||
//-----------------------------------------------------
|
||||
// Remove most spacing between table cells.
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
td,th {
|
||||
td, th {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@@ -408,5 +362,5 @@ i {
|
||||
|
||||
// 清除子元素浮动
|
||||
.clearfix {
|
||||
@extend %clearfix;
|
||||
}
|
||||
.clearfix();
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
//-----------------------------------------------------
|
||||
// variables less
|
||||
//-----------------------------------------------------
|
||||
|
||||
|
||||
// font相关
|
||||
//-----------------------------------------------------
|
||||
@fontSize: 14px;
|
||||
@fontLineHeight: 1.5;
|
||||
@fontFamily: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;
|
||||
// ios华文黑体, Android 4.0之后, Android 4.0之前
|
||||
@fontCn: STHeiTi, Roboto, "Droid Sans Fallback", Arial;
|
||||
// ios4.0+, ios4.0-, Android 4.0+, Android 4.0-
|
||||
@fontEn: "Helvetica Neue", Helvetica, Roboto, "Droid Sans", Arial;
|
||||
|
||||
// 背景色，文本色，边框色，链接色
|
||||
//-----------------------------------------------------
|
||||
@colorText: #333;
|
||||
@colorBodyBg: #e3d8cc;
|
||||
@colorBg: #f0eae3;
|
||||
@colorBorder: #dbdbdb;
|
||||
@colorLink: #08c;
|
||||
@colorPlaceholder: #999;
|
||||
|
||||
// 标签颜色组
|
||||
@tagColors: #88acdb, #ffa07a, #ca5757, #76becc, #7e608d, #6fc0e4, #bc8f8f;
|
||||
@tagcolorsLength: 7;
|
||||
|
||||
// disabled state (原 $colorDisabled map)
|
||||
@colorDisabled-text: #999;
|
||||
@colorDisabled-bg: #e3e3e3;
|
||||
@colorDisabled-border: #dbdbdb;
|
||||
|
||||
// 基本颜色
|
||||
//-----------------------------------------------------
|
||||
@color3: #333;
|
||||
@color6: #666;
|
||||
@color9: #999;
|
||||
@colorA: #aaa;
|
||||
@colorC: #ccc;
|
||||
@colorF: #f5f5f5;
|
||||
|
||||
|
||||
// 元素上下间距
|
||||
//-----------------------------------------------------
|
||||
@gap: 20px;
|
||||
|
||||
|
||||
// header,footer等的高度
|
||||
//-----------------------------------------------------
|
||||
@barHeight: 44px;
|
||||
|
||||
|
||||
// radius
|
||||
//-----------------------------------------------------
|
||||
@radiusBase: 5px;
|
||||
@radiusSmall: 3px;
|
||||
|
||||
|
||||
// timing-function
|
||||
//-----------------------------------------------------
|
||||
@timingFunction: cubic-bezier(0.42, 0, 0.58, 1);
|
||||
|
||||
|
||||
// active state switch
|
||||
//-----------------------------------------------------
|
||||
@activeStateSwitch: true;
|
||||
|
||||
|
||||
@articlePadding: 7.6923%;
|
||||
@@ -1,72 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
//-----------------------------------------------------
|
||||
// variables scss
|
||||
//-----------------------------------------------------
|
||||
|
||||
|
||||
// font相关
|
||||
//-----------------------------------------------------
|
||||
$fontSize: 14px !default;
|
||||
$fontLineHeight: 1.5 !default;
|
||||
$fontFamily: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif !default;
|
||||
// ios华文黑体,Android 4.0之后,Android 4.0之前
|
||||
$fontCn: STHeiTi, Roboto, "Droid Sans Fallback", Arial !default;
|
||||
// ios4.0+,ios4.0-,Android 4.0+,Android 4.0-
|
||||
$fontEn: "Helvetica Neue", Helvetica, Roboto, "Droid Sans", Arial !default;
|
||||
|
||||
|
||||
// 背景色，文本色，边框色，链接色
|
||||
//-----------------------------------------------------
|
||||
$colorText: #333 !default;
|
||||
$colorBodyBg: #e3d8cc !default;
|
||||
$colorBg: #f0eae3 !default;
|
||||
$colorBorder: #dbdbdb !default;
|
||||
$colorLink: #08c !default;
|
||||
$colorPlaceholder: #999 !default; // input placeholder color
|
||||
$tagcolorList: #88acdb #ffa07a #ca5757 #76becc #7e608d #6fc0e4 #bc8f8f; // 标签颜色组
|
||||
$colorDisabled: (text: #999, bg: #e3e3e3, border: #dbdbdb) !default; // textColor bgColor borderColor
|
||||
|
||||
|
||||
// 基本颜色
|
||||
// color function : http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
|
||||
// lighten($color, $amount)
|
||||
// darken($color, $amount)
|
||||
// opacity($color, $amount)
|
||||
// mix($color1, $color2[, $amount])
|
||||
//-----------------------------------------------------
|
||||
$color3: #333;
|
||||
$color6: #666;
|
||||
$color9: #999;
|
||||
$colorA: #aaa;
|
||||
$colorC: #ccc;
|
||||
$colorF: #f5f5f5;
|
||||
|
||||
|
||||
// 元素上下间距
|
||||
//-----------------------------------------------------
|
||||
$gap: 20px !default;
|
||||
|
||||
|
||||
// header,footer等的高度
|
||||
//-----------------------------------------------------
|
||||
$barHeight: 44px !default;
|
||||
|
||||
|
||||
// radius
|
||||
//-----------------------------------------------------
|
||||
$radiusBase: 5px !default;
|
||||
$radiusSmall: 3px !default;
|
||||
|
||||
|
||||
// timing-function
|
||||
//-----------------------------------------------------
|
||||
$timingFunction: cubic-bezier(0.42, 0, 0.58, 1);
|
||||
|
||||
|
||||
// active state switch
|
||||
//-----------------------------------------------------
|
||||
$activeStateSwitch: true !default;
|
||||
|
||||
|
||||
$articlePadding: 7.6923%;
|
||||
Reference in New Issue
Block a user