├── ext ├── font-face │ ├── fonts │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.ttf │ │ └── fontawesome-webfont.woff │ ├── _font-face.scss │ └── _variables.scss ├── _helper.scss ├── animate │ ├── _lightspeed.scss │ ├── _special.scss │ ├── _slide.scss │ ├── _flip.scss │ ├── _attention-seekers.scss │ ├── _rotate.scss │ ├── _bounce.scss │ └── _fade.scss ├── _typography.scss ├── _btn.scss ├── _message.scss ├── _table.scss └── _form.scss ├── _function.scss ├── _base.scss ├── README.md └── core ├── _setting.scss ├── _grid.scss ├── _media-queries.scss ├── _mixin.scss ├── _reset.scss └── _css3.scss /ext/font-face/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marvin1023/sassCore/HEAD/ext/font-face/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /ext/font-face/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marvin1023/sassCore/HEAD/ext/font-face/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /ext/font-face/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marvin1023/sassCore/HEAD/ext/font-face/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /ext/font-face/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/marvin1023/sassCore/HEAD/ext/font-face/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /_function.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | //----------------------------------------------------- 3 | // function scss 4 | // 提供所有的基础功能包括：变量设置，css3前缀填充，@media，基础mixin，栅格化grid 5 | // 默认不会解析出任何样式 6 | //----------------------------------------------------- 7 | 8 | //----------------------------------------------------- 9 | // author: 结一 (http://weibo.com/marvin1023) 10 | // version: 3.0 11 | // time: 2014-02-08 12 | // url: https://github.com/marvin1023/sassCore/ http://tobe.w3cplus.com/ 13 | //----------------------------------------------------- 14 | 15 | 16 | // 导入所有功能类相关文件 17 | //----------------------------------------------------- 18 | @import "core/setting"; 19 | @import "core/css3"; 20 | @import "core/media-queries"; 21 | @import "core/mixin"; 22 | @import "core/grid"; -------------------------------------------------------------------------------- /_base.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | //----------------------------------------------------- 3 | // base scss 4 | // 提供所有的基础功能包括：变量设置，css3前缀填充，@media，基础mixin，栅格化grid，reset样式 5 | // 默认会输出reset样式一份 6 | //----------------------------------------------------- 7 | 8 | //----------------------------------------------------- 9 | // author: 结一 (http://weibo.com/marvin1023) 10 | // version: 3.0 11 | // time: 2014-02-08 12 | // url: https://github.com/marvin1023/sassCore/ http://tobe.w3cplus.com/ 13 | //----------------------------------------------------- 14 | 15 | 16 | // 导入core中的基础文件 17 | //----------------------------------------------------- 18 | @import "core/setting"; 19 | @import "core/css3"; 20 | @import "core/media-queries"; 21 | @import "core/mixin"; 22 | @import "core/grid"; 23 | @import "core/reset"; 24 | -------------------------------------------------------------------------------- /ext/_helper.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | //----------------------------------------------------- 3 | // helpers scss 4 | //----------------------------------------------------- 5 | 6 | // ul/ol has list style 7 | ul.has-style{ 8 | @extend %ul-has-style; 9 | } 10 | // li float 11 | ul.inline-float{ 12 | @extend %clearfix; 13 | li{ 14 | @include float; 15 | } 16 | } 17 | // li inline-block 18 | ul.inline-block{ 19 | li{ 20 | @extend %inline-block; 21 | margin-right: 8px; 22 | &:last-child{ 23 | margin-right: 0; 24 | } 25 | } 26 | } 27 | 28 | // 浮动及闭合浮动 29 | .fl{ 30 | @extend %float; 31 | } 32 | .fr{ 33 | @include float(right); 34 | } 35 | .clearfix{ 36 | @extend %clearfix; 37 | } 38 | 39 | // 不同形式的隐藏 40 | .hidden{ 41 | @extend %hidden; 42 | } 43 | .visually-hidden { 44 | @extend %visually-hidden; 45 | } 46 | 47 | // text-align:left/right/center 48 | .tar{ 49 | text-align: right; 50 | } 51 | .tac{ 52 | text-align: center; 53 | } 54 | 55 | // 图片替换文字 56 | .ir{ 57 | @extend %ir; 58 | } 59 | 60 | // 灰色 61 | .gray{ 62 | color:$gray; 63 | } -------------------------------------------------------------------------------- /ext/animate/_lightspeed.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | //----------------------------------------------------- 3 | // lightspeed scss 4 | //----------------------------------------------------- 5 | 6 | 7 | // lightSpeedIn 8 | @mixin animate-lightSpeedIn () { 9 | @include keyframes(lightSpeedIn){ 10 | 0% { 11 | opacity: 0; 12 | @include transform(translateX(100%) skewX(-30deg)); 13 | } 14 | 60% { 15 | opacity: 1; 16 | @include transform(translateX(-20%) skewX(30deg)); 17 | } 18 | 80% { 19 | @include transform(translateX(0%) skewX(-15deg)); 20 | } 21 | 100% { 22 | @include transform(translateX(0%) skewX(0)); 23 | } 24 | } 25 | .lightSpeedIn { 26 | @include animation-name(lightSpeedIn); 27 | @include animation-timing-function(ease-out); 28 | @include backface-visibility; 29 | @extend %animated; 30 | } 31 | } 32 | 33 | // lightSpeedOut 34 | @mixin animate-lightSpeedOut () { 35 | @include keyframes(lightSpeedOut){ 36 | 0% { 37 | opacity: 1; 38 | @include transform(translateX(0%) skewX(0deg)); 39 | } 40 | 100% { 41 | opacity: 0; 42 | @include transform(translateX(100%) skewX(-30deg)); 43 | } 44 | } 45 | .lightSpeedOut { 46 | @include animation-name(lightSpeedOut); 47 | @include animation-timing-function(ease-in); 48 | @extend %animated; 49 | } 50 | } -------------------------------------------------------------------------------- /ext/animate/_special.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | //----------------------------------------------------- 3 | // special scss 4 | //----------------------------------------------------- 5 | 6 | 7 | // hinge 8 | @mixin animate-hinge () { 9 | @include keyframes(hinge){ 10 | 0% { 11 | @include rotate(0); 12 | } 13 | 20%,60% { 14 | @include rotate(80deg); 15 | } 16 | 40% { 17 | @include rotate(60deg); 18 | } 19 | 80% { 20 | opacity: 1; 21 | @include transform(rotate(60deg) translateY(0)); 22 | } 23 | 100% { 24 | opacity: 0; 25 | @include translateY(700px); 26 | } 27 | } 28 | .hinge { 29 | @include transform-origin(top left); 30 | @include animation-timing-function(ease-in-out); 31 | @include animation-name(hinge); 32 | @extend %animated; 33 | @include animation-duration(2s); 34 | } 35 | } 36 | 37 | // rollIn 38 | @mixin animate-rollIn () { 39 | @include keyframes(rollIn){ 40 | 0% { 41 | opacity: 0; 42 | @include transform(translateX(-100%) rotate(-120deg)); 43 | } 44 | 100% { 45 | opacity: 1; 46 | @include transform(translateX(0px) rotate(0deg)); 47 | } 48 | } 49 | .rollIn { 50 | @include animation-name(rollIn); 51 | @extend %animated; 52 | } 53 | } 54 | 55 | // rollOut 56 | @mixin animate-rollOut () { 57 | @include keyframes(rollOut){ 58 | 0% { 59 | opacity: 1; 60 | @include transform(translateX(0) rotate(0)); 61 | } 62 | 100% { 63 | opacity: 0; 64 | @include transform(translateX(100%) rotate(120deg)); 65 | } 66 | } 67 | .rollOut { 68 | @include animation-name(rollOut); 69 | @extend %animated; 70 | } 71 | } -------------------------------------------------------------------------------- /ext/font-face/_font-face.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | //----------------------------------------------------- 3 | // font-face scss 4 | // http://fontawesome.io/ 5 | // 支持ie8+ 6 | //----------------------------------------------------- 7 | 8 | 9 | //----------------------------------------------------- 10 | // 如需要全部的icon class，设置$fontClassAllSwitch为true即可 11 | // 如输出单个icon class，直接调用@include font-icon($name,fontSearch($name)); 12 | // 如要输出大于或等于2个icon，覆写$fontClassoutput即可，如$fontClassoutput:glass music search heart;则输出这四个icon的class 13 | //----------------------------------------------------- 14 | 15 | 16 | // 导入变量 17 | @import "variables"; 18 | 19 | 20 | // 申明@font-face 21 | @include font-face($fontFamily, $fontFilePath); 22 | 23 | 24 | // 定义mixin等基础功能 25 | //----------------------------------------------------- 26 | 27 | // 基础样式 28 | %font-basic{ 29 | display: inline-block; 30 | font-family: $fontFamily; 31 | font-style: normal; 32 | font-weight: normal; 33 | line-height: 1; 34 | -webkit-font-smoothing: antialiased; 35 | -moz-osx-font-smoothing: grayscale; 36 | } 37 | 38 | 39 | // 传入单个名字，以在所有的$ClassAll变量中查询到其对应的内容 40 | // 如glass，查询到的就是"\f000"，music对应的就是"\f001" 41 | @function fontSearch($needle, $sea: $fontClassAll){ 42 | @each $item in $sea { 43 | $index: index($item, $needle); 44 | 45 | @if $index { 46 | $return: if($index == 1, 2, $index); 47 | @return nth($item,$return); 48 | } 49 | } 50 | @warn "no #{$needle} in the variables, please check it!"; 51 | @return false; 52 | } 53 | 54 | 55 | // icon mixin 56 | @mixin font-icon($class){ 57 | .#{$fontClassPrefix}-#{$class}{ 58 | @extend %font-basic; 59 | 60 | &:before{ 61 | content: fontSearch($class); 62 | @extend %box-sizing-border; 63 | } 64 | } 65 | } 66 | 67 | 68 | // 全部输出 69 | @if $fontClassAllSwitch { 70 | @each $class in $fontClassAll { 71 | $name: nth($class,1); 72 | $content: nth($class,2); 73 | 74 | @include font-icon($name,$content); 75 | } 76 | } @else { 77 | // 部分输出的class 78 | @if length($fontClassoutput) >= 2{ 79 | @each $class in $fontClassoutput{ 80 | @include font-icon($class); 81 | } 82 | } 83 | } -------------------------------------------------------------------------------- /ext/_typography.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | //----------------------------------------------------- 3 | // typography scss 4 | //----------------------------------------------------- 5 | 6 | // 变量 7 | //----------------------------------------------------- 8 | $article: true article !default; //第一个变量为是否开启文章详细页样式，第二个为默认的class 9 | 10 | 11 | // Blockquotes 12 | blockquote { 13 | padding: 0 0 0 15px; 14 | margin: 0 0 10px; 15 | border-left: 3px solid $gray; 16 | small { 17 | font-size: $baseFontSize * 0.85; 18 | display: block; 19 | line-height: $baseLineHeight; 20 | color: $grayDark; 21 | &:before { 22 | content: '\2014 \00A0'; 23 | } 24 | } 25 | } 26 | 27 | 28 | // Quotes 29 | q:before, 30 | q:after, 31 | blockquote:before, 32 | blockquote:after { 33 | content: ""; 34 | } 35 | 36 | 37 | // Addresses 38 | address { 39 | display: block; 40 | margin-bottom: 10px; 41 | font-style: normal; 42 | line-height: $baseLineHeight; 43 | } 44 | 45 | 46 | // hr 47 | hr { 48 | display: block; 49 | height: 1px; 50 | border: 0; 51 | border-top: 1px solid #ccc; 52 | margin: 1em 0; 53 | padding: 0; 54 | } 55 | 56 | 57 | // article style 58 | // 详细页文章内容样式，通过变量$articleStyleSwitch来控制输出 59 | // 详细页内容的默认的class为.article，可通过变量$articleClass来设置 60 | //----------------------------------------------------- 61 | @if nth($article,1){ 62 | .#{nth($article,2)}{ 63 | line-height: 1.6; 64 | h1, h2, h3, h4, h5, h6 { 65 | line-height:1.3; 66 | margin-bottom:10px; 67 | } 68 | ul,ol{ 69 | margin-left: 25px; 70 | list-style-type:disc; 71 | } 72 | ol{ 73 | list-style-type:decimal; 74 | } 75 | p, ul, ol, dl{ 76 | margin-bottom:10px; 77 | } 78 | ul ul, ul ol, ol ol, ol ul{ 79 | margin-bottom: 0; 80 | } 81 | dt{ 82 | font-weight: bold; 83 | line-height: 1.8; 84 | } 85 | dd{ 86 | margin-left: 2em; 87 | } 88 | img{ 89 | margin-bottom: 10px; 90 | border:1px solid $gray; 91 | padding: 2px; 92 | } 93 | .fr img{ 94 | margin-left: 10px; 95 | } 96 | .fl img{ 97 | margin-right: 10px; 98 | } 99 | } 100 | } -------------------------------------------------------------------------------- /ext/animate/_slide.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | //----------------------------------------------------- 3 | // slide scss 4 | //----------------------------------------------------- 5 | 6 | 7 | // slideInDown 8 | @mixin animate-slideInDown () { 9 | @include keyframes(slideInDown){ 10 | 0% { 11 | opacity: 0; 12 | @include translateY(-2000px); 13 | } 14 | 100% { 15 | @include translateY(0); 16 | } 17 | } 18 | .slideInDown { 19 | @include animation-name(slideInDown); 20 | @extend %animated; 21 | } 22 | } 23 | 24 | // slideInLeft 25 | @mixin animate-slideInLeft () { 26 | @include keyframes(slideInLeft){ 27 | 0% { 28 | opacity: 0; 29 | @include translateX(-2000px); 30 | } 31 | 100% { 32 | @include translateX(0); 33 | } 34 | } 35 | .slideInLeft { 36 | @include animation-name(slideInLeft); 37 | @extend %animated; 38 | } 39 | } 40 | 41 | // slideInRight 42 | @mixin animate-slideInRight () { 43 | @include keyframes(slideInRight){ 44 | 0% { 45 | opacity: 0; 46 | @include translateX(2000px); 47 | } 48 | 100% { 49 | @include translateX(0); 50 | } 51 | } 52 | .slideInRight { 53 | @include animation-name(slideInRight); 54 | @extend %animated; 55 | } 56 | } 57 | 58 | // slideOutLeft 59 | @mixin animate-slideOutLeft () { 60 | @include keyframes(slideOutLeft){ 61 | 0% { 62 | @include translateX(0); 63 | } 64 | 100% { 65 | opacity: 0; 66 | @include translateX(-2000px); 67 | } 68 | } 69 | .slideOutLeft { 70 | @include animation-name(slideOutLeft); 71 | @extend %animated; 72 | } 73 | } 74 | 75 | // slideOutRight 76 | @mixin animate-slideOutRight () { 77 | @include keyframes(slideOutRight){ 78 | 0% { 79 | @include translateX(0); 80 | } 81 | 100% { 82 | opacity: 0; 83 | @include translateX(2000px); 84 | } 85 | } 86 | .slideOutRight { 87 | @include animation-name(slideOutRight); 88 | @extend %animated; 89 | } 90 | } 91 | 92 | // slideOutUp 93 | @mixin animate-slideOutUp () { 94 | @include keyframes(slideOutUp){ 95 | 0% { 96 | @include translateY(0); 97 | } 98 | 100% { 99 | opacity: 0; 100 | @include translateY(-2000px); 101 | } 102 | } 103 | .slideOutUp { 104 | @include animation-name(slideOutUp); 105 | @extend %animated; 106 | } 107 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # sassCore 3.0——Just for Better 2 | 3 | sassCore 很久都不更新了，如有需要请迁移至更精简的[sandal](https://github.com/marvin1023/sandal) 4 | 5 | sassCore参考了[compass](http://compass-style.org/)和[bourbon](http://bourbon.io/)等众多优秀的sass库，根据项目实践，归纳总结而成，一直以来为了更好而不断完善。 6 | 7 | sassCore提供了一些基础和常用的东西，基于它你可以扩展出很多组件等，如果你对这个有兴趣，可以参考下基于sassCore的[tobe](http://tobe.w3cplus.com)。 8 | 9 | ## 如何使用？ 10 | 11 | 12 | sassCore分核心文件和扩展文件两种。其中核心文件提供一些基础的样式和`@mixin`，`%`等方便调用；而扩展文件则提供一些模块的样式，如`form`，`table`等。 13 | 14 | 详细使用文档请移步：[w3cplus sassCore](http://w3cplus.com/sasscore/index.html) 15 | 16 | ### 核心文件调用 17 | 第一种除提供基础功能外，会产生一份reset样式： 18 | 19 | @import "d:/sassCore/base"; 20 | 21 | 第二种不产生任何样式，只提供功能的调用： 22 | 23 | @import "d:/sassCore/function"; 24 | 25 | ### 扩展文件调用 26 | 27 | 根据需要调用，以table为例： 28 | 29 | @import "d:/sassCore/ext/table"; 30 | 31 | 注：因为sass不能导入在线sass文件，而sassCore也没有提供安装版的使用，所以默认统一放在D盘进行调用。 32 | 33 | ##五大特点： 34 | 35 | * sassCore涵盖范围广。核心文件有setting，css3，media-queries，mixin，grid，reset；扩展文件有animate，font-face，btn，message，form，table，helps，typography；除此之外还有两个集合文件function和base。 36 | * sassCore对兼容采用了开关控制机制。如对是否支持ie6/7可以通过设置为true或false以生成对应的代码。 37 | * sassCore严格控制样式冗余累赘。使用开关变量做到需要什么样式就加载什么样式，按需开启，避免样式冗余累赘。 38 | * sassCore设计了两种调用方式，一种是只调用功能，不产生任何多余的css代码；另一种是包含了些重置样式。为团队的合作开发提供了良好的解决方案。 39 | * sassCore借鉴优秀的作品，根据实战创造新的方法，紧跟前沿，每一个文件都是经过深思熟虑，几易其稿，在实用和卓越上狠下功夫。 40 | 41 | ## 文件简述 42 | 43 | sassCore包括两个集合文件（base，function）和两个文件夹（core，ext）。其中core文件夹中为核心基础文件，包括setting，css3，media-queries，mixin，grid，reset；而ext文件夹中是一些扩展文件，包括animate，font-face，btn，message，form，table，typography，helper。 44 | 45 | 两个集合文件（base，function）导入的都是core中的文件，区别在于base除了提供基本功能之外还会生成一份reset样式，而function则只提供基本功能。至于ext中的文件则属于额外的一些模块扩展，可根据需求导入。 46 | 47 | ### core文件 48 | 49 | #### setting 50 | 负责基础变量的文件，如常用的颜色，字体等变量。 51 | 52 | #### css3 53 | 建议使用 postCSS 的 autoprefix 来解决前缀。负责css3属性前缀的文件。参考了[bourbon](http://bourbon.io/)，然后进行一系列的扩展及优化，以使解析出来的代码更加合理。 54 | 55 | #### media-queries 56 | 负责响应式宽度判断的文件。主要是对响应式布局的一些宽度判断，来自paranoida的[sass-mediaqueries](https://github.com/paranoida/sass-mediaqueries)。 57 | 58 | #### mixin 59 | 负责功能方面的文件。这里我们大概分成三个部分，一个是混合部分即mixin，一个是placeholder选择器部分即%，最后就是我们的function函数部分。我们常用的include及extend当然就是来自于这里了。 60 | 61 | #### grid 62 | 负责网格系统的文件。默认为固定宽度布局（1000px），可以通过设置$gridPercentSwitch为true来切换为流体布局，也可以通过设置$gridSpanSwitch为true或false来控制是否输出各个网格的class。 63 | 64 | ### reset 65 | 在[normalize](http://necolas.github.io/normalize.css/)的基础上，根据目前我们大家的使用习惯进行了一些归零行动，及设置文字字体颜色，是否输出打印样式。 66 | 67 | ### ext文件 68 | 69 | #### animate 70 | 将[animate.css](http://daneden.github.io/animate.css/)转成scss版本，默认不输出任何样式，需要什么动画先导入对应的动画文件，然后include调用即可。 71 | 72 | #### font-face 73 | 来自[Font Awesome](http://fontawesome.io/)的字体图标，可以根据自己的需求使用其他字体图标，默认不输出任何class，可根据实际需求输出其中的某些icon。参考了大漠的[font-awesome](https://github.com/airen/w3cplusSass/tree/master/lib/module/font-awesome)模块 74 | 75 | #### btn 76 | 为按钮设计的文件，里面定义了一系列mixin，可用于自定义按钮，默认生成两种按钮 77 | 78 | #### message 79 | 交互提示信息，包括警告，错误，成功，提示四种状态的样式 80 | 81 | #### form 82 | 提供了表单元素样式及几种常见的表单组合样式，可通过变量控制输出 83 | 84 | #### table 85 | 提供几种常用的表格样式，可通过变量来控制输出 86 | 87 | #### helper 88 | 常用的几个class，可以根据自己的喜好定义。 89 | 90 | #### typography 91 | 负责文字排版的文件。这里主要考虑到文章详细页和其他页面的一些不同情况而给详细页加入了article这个class，里面的一些元素如ul，li，p给予一定的样式，而不是清零。 92 | -------------------------------------------------------------------------------- /core/_setting.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | //----------------------------------------------------- 3 | // setting scss 4 | //----------------------------------------------------- 5 | 6 | 7 | // 开关设置 8 | //----------------------------------------------------- 9 | $lte7: true !default; //是否兼容ie6-7 10 | $filter: false !default; //是否为ie6-8开启css3滤镜兼容，常用于渐变背景 11 | $printStyleSwitch: false !default; //是否开启打印样式 12 | 13 | 14 | // font相关 15 | //----------------------------------------------------- 16 | $baseFontSize: 14px !default; 17 | $baseLineHeight: 1.5 !default; 18 | $baseFontFamily: "Helvetica Neue", Helvetica, Tahoma, sans-serif !default; 19 | $fontCn: "SimSun"; //宋体 20 | $fontYaHei: "Microsoft Yahei"; //微软雅黑 21 | $fontHeiTi: "SimHei"; //黑体 22 | 23 | 24 | // 元素上下间距 25 | //----------------------------------------------------- 26 | $baseGap: 20px !default; 27 | 28 | 29 | // 基本颜色 30 | // color function : http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html 31 | // lighten($color, $amount) 32 | // darken($color, $amount) 33 | // opacify($color, $amount) 34 | // mix($color1, $color2[, $amount]) 35 | //----------------------------------------------------- 36 | $black: #000 !default; 37 | $grayDarker: #333 !default; 38 | $grayDark: #999 !default; 39 | $gray: #ccc !default; 40 | $grayLight: #f5f5f5 !default; 41 | $white: #fff !default; 42 | 43 | $red: #cc3300 !default; 44 | $blue: #00A3CF !default; 45 | $blueDark: #0064cd !default; 46 | $orange: #F47837 !default; 47 | $green: #51B148 !default; 48 | $yellow: #ffc40d !default; 49 | $pink: #c3325f !default; 50 | $purple: #7a43b6 !default; 51 | 52 | $primary: #0078E7 !default;//主色 53 | 54 | 55 | // link 56 | //----------------------------------------------------- 57 | // 如果只有一个值则滑过的值为这个值的darken 5%，如果 58 | // 有两个值则第二个值为滑过的值 59 | $linkColor: #08c !default; 60 | 61 | 62 | // scaffolding 63 | //----------------------------------------------------- 64 | $bodyBgColor: $white !default; 65 | $textColor: $grayDarker !default; 66 | 67 | 68 | // placeholder 69 | //----------------------------------------------------- 70 | // 变量分别为：是否输出表单的占位符placeholder样式，文本色 71 | $placeholder: true $gray !default; 72 | 73 | 74 | // 交互配色 75 | // 警告，错误，成功，提示 76 | //----------------------------------------------------- 77 | // 每个变量都有三个颜色值，分别为：文本色，背景色，边框色 78 | $warningColor: #514721 #FFF6BF #FFD324 !default; 79 | $errorColor: #8A1F11 #FBE3E4 #FBC2C4 !default; 80 | $successColor: #264409 #E6EFC2 #C6D880 !default; 81 | $infoColor: #205791 #D5EDF8 #92CAE4 !default; 82 | 83 | 84 | // radius 85 | //----------------------------------------------------- 86 | $baseRadius: 5px !default; 87 | $smallRadius: 3px !default; 88 | 89 | 90 | // z-index 91 | //----------------------------------------------------- 92 | $zindexDropdown: 1000 !default; 93 | $zindexFixedTopbar: 1010 !default; 94 | $zindexTooltip: 1020 !default; 95 | $zindexAlert: 1030 !default; 96 | $zindexModal: 1100 !default; -------------------------------------------------------------------------------- /ext/animate/_flip.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | //----------------------------------------------------- 3 | // flip scss 4 | //----------------------------------------------------- 5 | 6 | 7 | // flip 8 | @mixin animate-flip () { 9 | @include keyframes(flip){ 10 | 0% { 11 | @include transform(perspective(400px) translateZ(0) rotateY(0) scale(1)); 12 | } 13 | 40% { 14 | @include transform(perspective(400px) translateZ(150px) rotateY(170deg) scale(1)); 15 | } 16 | 50% { 17 | @include transform(perspective(400px) translateZ(150px) rotateY(190deg) scale(1)); 18 | } 19 | 80% { 20 | @include transform(perspective(400px) translateZ(0) rotateY(360deg) scale(.95)); 21 | } 22 | 100% { 23 | @include transform(perspective(400px) translateZ(0) rotateY(360deg) scale(1)); 24 | } 25 | } 26 | .flip { 27 | @include animation-name(flip); 28 | @include backface-visibility(visible); 29 | @include animation-timing-function(ease-out); 30 | @extend %animated; 31 | } 32 | } 33 | 34 | // flipInX 35 | @mixin animate-flipInX () { 36 | @include keyframes(flipInX){ 37 | 0% { 38 | @include transform(perspective(400px) rotateX(90deg)); 39 | opacity: 0; 40 | } 41 | 40% { 42 | @include transform(perspective(400px) rotateX(-10deg)); 43 | } 44 | 70% { 45 | @include transform(perspective(400px) rotateX(10deg)); 46 | } 47 | 100% { 48 | @include transform(perspective(400px) rotateX(0deg)); 49 | opacity: 1; 50 | } 51 | } 52 | .flipInX { 53 | @include animation-name(flipInX); 54 | @include backface-visibility(visible); 55 | @extend %animated; 56 | } 57 | } 58 | 59 | // flipInY 60 | @mixin animate-flipInY () { 61 | @include keyframes(flipInY){ 62 | 0% { 63 | @include transform(perspective(400px) rotateY(90deg)); 64 | opacity: 0; 65 | } 66 | 40% { 67 | @include transform(perspective(400px) rotateY(-10deg)); 68 | } 69 | 70% { 70 | @include transform(perspective(400px) rotateY(10deg)); 71 | } 72 | 100% { 73 | @include transform(perspective(400px) rotateY(0deg)); 74 | opacity: 1; 75 | } 76 | } 77 | .flipInY { 78 | @include animation-name(flipInY); 79 | @include backface-visibility(visible); 80 | @extend %animated; 81 | } 82 | } 83 | 84 | // flipOutX 85 | @mixin animate-flipOutX () { 86 | @include keyframes(flipOutX){ 87 | 0% { 88 | @include transform(perspective(400px) rotateX(0deg)); 89 | opacity: 1; 90 | } 91 | 100% { 92 | @include transform(perspective(400px) rotateX(90deg)); 93 | opacity: 0; 94 | } 95 | } 96 | .flipOutX { 97 | @include animation-name(flipOutX); 98 | @include backface-visibility(visible); 99 | @extend %animated; 100 | } 101 | } 102 | 103 | // flipOutY 104 | @mixin animate-flipOutY () { 105 | @include keyframes(flipOutY){ 106 | 0% { 107 | @include transform(perspective(400px) rotateY(0deg)); 108 | opacity: 1; 109 | } 110 | 100% { 111 | @include transform(perspective(400px) rotateY(90deg)); 112 | opacity: 0; 113 | } 114 | } 115 | .flipOutY { 116 | @include animation-name(flipOutY); 117 | @include backface-visibility(visible); 118 | @extend %animated; 119 | } 120 | } -------------------------------------------------------------------------------- /ext/animate/_attention-seekers.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | //----------------------------------------------------- 3 | // attention seekers scss 4 | //----------------------------------------------------- 5 | 6 | 7 | //bounce 8 | @mixin animate-bounce () { 9 | @include keyframes(bounce){ 10 | 0%, 20%, 50%, 80%, 100% { 11 | @include translateY(0); 12 | } 13 | 14 | 40% { 15 | @include translateY(-30px); 16 | } 17 | 18 | 60% { 19 | @include translateY(-15px); 20 | } 21 | } 22 | .bounce { 23 | @include animation-name(bounce); 24 | @extend %animated; 25 | } 26 | } 27 | 28 | // flash 29 | @mixin animate-flash () { 30 | @include keyframes(flash){ 31 | 0%, 50%, 100% { 32 | opacity: 1; 33 | } 34 | 35 | 25%, 75% { 36 | opacity: 0; 37 | } 38 | } 39 | .flash { 40 | @include animation-name(flash); 41 | @extend %animated; 42 | } 43 | } 44 | 45 | // pulse 46 | @mixin animate-pulse () { 47 | @include keyframes(pulse){ 48 | 0% { 49 | @include scale(1); 50 | } 51 | 50% { 52 | @include scale(1.1); 53 | } 54 | 100% { 55 | @include scale(1); 56 | } 57 | } 58 | .pulse { 59 | @include animation-name(pulse); 60 | @extend %animated; 61 | } 62 | } 63 | 64 | // shake 65 | @mixin animate-shake () { 66 | @include keyframes(shake){ 67 | 0%,100%{ 68 | @include translateX(0); 69 | } 70 | 10%,30%,50%,70%,90%{ 71 | @include translateX(-10px); 72 | } 73 | 20%,40%,60%,80%{ 74 | @include translateX(10px); 75 | } 76 | } 77 | .shake { 78 | @include animation-name(shake); 79 | @extend %animated; 80 | } 81 | } 82 | 83 | // swing 84 | @mixin animate-swing () { 85 | @include keyframes(swing){ 86 | 20% { 87 | @include rotate(15deg); 88 | } 89 | 40%{ 90 | @include rotate(-10deg); 91 | } 92 | 60% { 93 | @include rotate(5deg); 94 | } 95 | 80% { 96 | @include rotate(-5deg); 97 | } 98 | 100% { 99 | @include rotate(0deg); 100 | } 101 | } 102 | .swing { 103 | @include transform-origin(top center); 104 | @include animation-name(swing); 105 | @extend %animated; 106 | } 107 | } 108 | 109 | // tada 110 | @mixin animate-tada () { 111 | @include keyframes(tada){ 112 | 0% { 113 | @include scale(1); 114 | } 115 | 10%,20% { 116 | @include transform(scale(.9) rotate(-3deg)); 117 | } 118 | 30%,50%,70%,90%{ 119 | @include transform(scale(1.1) rotate(3deg)); 120 | } 121 | 40%,60%,80%{ 122 | @include transform(scale(1.1) rotate(-3deg)); 123 | } 124 | 100%{ 125 | @include transform(scale(1) rotate(0)); 126 | } 127 | } 128 | .tada { 129 | @include animation-name(tada); 130 | @extend %animated; 131 | } 132 | } 133 | 134 | // wobble 135 | @mixin animate-wobble () { 136 | @include keyframes(wobble){ 137 | 0% { 138 | @include translateX(0%); 139 | } 140 | 15% { 141 | @include transform(translateX(-25%) rotate(-5deg)); 142 | } 143 | 30% { 144 | @include transform(translateX(20%) rotate(3deg)); 145 | } 146 | 45% { 147 | @include transform(translateX(-15%) rotate(-3deg)); 148 | } 149 | 60% { 150 | @include transform(translateX(10%) rotate(2deg)); 151 | } 152 | 75% { 153 | @include transform(translateX(-5%) rotate(-1deg)); 154 | } 155 | 100% { 156 | @include translateX(0%); 157 | } 158 | } 159 | .wobble { 160 | @include animation-name(wobble); 161 | @extend %animated; 162 | } 163 | } -------------------------------------------------------------------------------- /ext/_btn.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /* ------------------------------------------------- 3 | * btn scss 4 | * ------------------------------------------------- 5 | */ 6 | 7 | 8 | // 变量 9 | //---------------------------------- 10 | $btnBaseClass: btn !default; //按钮的基本class 11 | $btnFormBaseClass: formbtn !default; //form中input和button元素按钮的class 12 | $btnNormalSize: 16px 28px 14px !default; //默认按钮的左右padding，高度，字体大小，圆角 13 | $btnSizeClass: () !default; //(small 5px 21px 12px) 每个括号为一组，里面四个参数分别为：class 左右padding，高度，字体大小 14 | $btnColorClass: () !default; //(primary $primary #fff) 每个括号为一组，里面三个参数分别为：class 背景色 文本色 15 | 16 | // 开关按钮 17 | $btnBgGradientSwitch: false !default;//是否启用渐变背景 18 | 19 | 20 | 21 | // btn placeholder selectors and mixin 22 | //---------------------------------- 23 | 24 | // btn common style 25 | // 按钮基本样式，联合申明 26 | %btn-basic{ 27 | @include inline-block; 28 | cursor: pointer; 29 | text-align:center; 30 | border:0 none; 31 | } 32 | 33 | // btn-gradient 34 | // 半透明到全透明的白色渐变，通过设置不同的背景色来表示不同的渐变 35 | %btn-gradient { 36 | box-shadow: 0 1px 1px rgba(255, 255, 255, 0.5) inset, 0 0 1px rgba(255, 255, 255, 0.5) inset; 37 | @extend %gradient-linear-light; 38 | } 39 | 40 | // btn-size 41 | @mixin btn-size($padding:nth($btnNormalSize,1), $height:nth($btnNormalSize,2), $fontSize:nth($btnNormalSize,3), $formbtn: false){ 42 | padding:0 $padding; 43 | font-size:$fontSize; 44 | 45 | @if $formbtn{ 46 | // form元素按钮（如button,input:submit），设置height来反应其高度 47 | height: $height; 48 | } @else { 49 | // 普通按钮，通过设置line-height来反应其高度 50 | line-height: $height; 51 | } 52 | } 53 | 54 | // btn-color 55 | // 包括按钮背景，文本色，是否有边框 56 | @mixin btn-color($bgColor:#e6e6e6, $textColor:#333){ 57 | color:$textColor; 58 | background-color: $bgColor; 59 | @if $btnBgGradientSwitch { 60 | border:1px solid darken($bgColor, 5%); 61 | border-color:lighten($bgColor, 2%) darken($bgColor, 5%) darken($bgColor, 5%) lighten($bgColor, 2%); 62 | } 63 | 64 | &:hover{ 65 | background-color: darken($bgColor,5%); 66 | color:$textColor; 67 | } 68 | } 69 | 70 | 71 | // 两种类别按钮，普通的和form表单元素的 72 | //---------------------------------- 73 | 74 | .#{$btnBaseClass}{ 75 | @extend %btn-basic; 76 | @include btn-size; 77 | @include btn-color; 78 | } 79 | .#{$btnFormBaseClass}{ 80 | @extend %btn-basic; 81 | @include btn-size($formbtn: true); 82 | @include btn-color; 83 | } 84 | 85 | // 如果启用渐变背景，引入%btn-gradient； 86 | @if $btnBgGradientSwitch { 87 | .#{$btnBaseClass}, .#{$btnFormBaseClass}{ 88 | @extend %btn-gradient; 89 | } 90 | } 91 | 92 | 93 | // 不同大小的btn class 94 | //---------------------------------- 95 | 96 | // 如果输出单个大小按钮，直接调用btn-size 97 | // @include btn-size($padding, $height, $fontSize, $formbtn) 98 | // 最后一个$formbtn参数，如果是普通按钮可以忽略（默认为false），如果是form表单元素按钮则传入true 99 | 100 | // 如果输出多个大小按钮，则直接调用下面的mixin 101 | // @include btn-size-multi(); 102 | @mixin btn-size-multi($sizeLists: $btnSizeClass){ 103 | @each $size in $sizeLists{ 104 | $class: nth($size, 1); 105 | $padding: nth($size, 2); 106 | $height: nth($size, 3); 107 | $fontSize: nth($size, 4); 108 | 109 | .#{$btnBaseClass}-#{$class}{ 110 | @include btn-size($padding, $height, $fontSize); 111 | } 112 | .#{$btnFormBaseClass}-#{$class}{ 113 | @include btn-size($padding, $height, $fontSize, true); 114 | } 115 | } 116 | } 117 | 118 | 119 | 120 | // 不同颜色的btn class 121 | //---------------------------------- 122 | 123 | // 如果输出单个颜色按钮，直接调用btn-color 124 | // @include btn-color($bgColor,$textColor); 125 | .#{$btnBaseClass}-primary { 126 | @include btn-color($primary, #fff); 127 | } 128 | 129 | //如果输出至少两个不同颜色按钮，则调用下面的mixin 130 | // @include btn-color-multi(); 131 | @mixin btn-color-multi($colorLists: $btnColorClass){ 132 | @each $color in $colorLists{ 133 | $class: nth($color,1); 134 | $bgColor: nth($color,2); 135 | $textColor: nth($color,3); 136 | 137 | .#{$btnBaseClass}-#{$class}{ 138 | @include btn-color($bgColor,$textColor); 139 | } 140 | } 141 | } -------------------------------------------------------------------------------- /ext/_message.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | //----------------------------------------------------- 3 | // message scss 4 | // 交互提示信息：包括警告，错误，成功，提示四种状态 5 | //----------------------------------------------------- 6 | 7 | // 变量 8 | //----------------------------------------------------- 9 | $msgIconSwitch: true !default;// 是否启用icon背景，背景图片使用base64，ie8+支持 10 | $msgRadius: 0 !default; // 样式圆角大小，设置为0将不产生圆角。 11 | $msgClassSwitch: true false false false !default; //错误 成功 警告 提示 12 | 13 | 14 | // mixin 15 | //----------------------------------------------------- 16 | // 基本样式 17 | @mixin message-basic{ 18 | padding:8px; 19 | a{ 20 | text-decoration:underline; 21 | } 22 | 23 | @if $msgIconSwitch { 24 | padding-left:25px; 25 | background-position: 5px center; 26 | background-repeat: no-repeat; 27 | } 28 | @if not(unitless($msgRadius)) { 29 | border-radius: $msgRadius; 30 | } 31 | } 32 | %message-basic{ 33 | @include message-basic; 34 | } 35 | 36 | // 配色方案，包括文本色，背景色，边框颜色 37 | @mixin message-skin($textColor, $bgColor, $borderColor ){ 38 | background-color:$bgColor; 39 | border:2px solid $borderColor; 40 | color: $textColor; 41 | 42 | a{ 43 | color: $textColor; 44 | } 45 | } 46 | 47 | 48 | // 样式 49 | //----------------------------------------------------- 50 | @if nth($msgClassSwitch, 1){ 51 | .error{ 52 | @extend %message-basic; 53 | @include message-skin(nth($errorColor,1), nth($errorColor,2), nth($errorColor,3)); 54 | @if $msgIconSwitch { 55 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAw1BMVEX////////uVVXuVFTkSEjVb1HsUlLnS0vvW1vmS0vuWVnvXV3dPj7rUFDkyLz2o6P1mZndQD3rUVHVbU/dPz3kR0fUclLdQTzbUDvaWj/69fP60dHeQjvTg2btVFTcTzvmSkrdTTr//f3lzL/UgWTvYWH++fniwbLvX1/zhYXVbEzygYH0k5P709P95ub+8fHwZ2fjxbj1nZ3839/6z8/xcXHdSzrdTDreQzv83d32n5/eQjz3q6v+9fXwa2v96+v84eGH3JX9AAAAAXRSTlMAQObYZgAAALlJREFUeF49jlWSxDAMBSXZDjLDMDPPMt7/VCsnU9t/3VV+FmhmRRXHVTGDB4P+2BfCH/cHrTZ1nlBLktcNh1S6nxtWJ9yTVACrTISIEVl3xO9hdoHUpKcl4jv7zSFbwQsP7LiwL3hmArEgos0U8Yedhq9tsHrIXHX4gGeDrAPiccmlfbI1KUJ8W/PO9Exmyt/S7qu35uXTryuyFcBW0j8y7U43OjX06Zp5aSe8Z5dzeBCokeeNVKDlD2nuD2i4ItR8AAAAAElFTkSuQmCC); 56 | } 57 | } 58 | } 59 | 60 | @if nth($msgClassSwitch, 2){ 61 | .success{ 62 | @extend %message-basic; 63 | @include message-skin(nth($successColor,1), nth($successColor,2), nth($successColor,3)); 64 | @if $msgIconSwitch { 65 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAwFBMVEX///////+TzSPD44WSzCOUziaSyyOXzyuZ0DCNxCKn1kyEuCDs9tjt99uOxiKDtx+MwyGx22HP6Z2l1UfC44ORyiOQySKp10/K5ZePxyLv9uDt9d2RyiWZwUuHvCONuTaRyyPI3KCnyGXk7s+Yzy233G3P5Kbx9ueQyCL8/fq81YuTzCOg0UHN36mOvDfu9938/vrg78Gd0TqIviDh78b1+u3C34ms1VuNwSmGuyCh0z+PyCL6/PeXzS+KwCHj7c4XsX5IAAAAAXRSTlMAQObYZgAAAKZJREFUeF5lj9XKQ0EQg3dm5bhr1d1dfn3/t+r0dCmFfncJCSTswYYXUhZ8wzSxgRVGXMlthC+iLRkc3+CMeVILMdrtUXqvwOIyg7OiSKKN5QkG1wwTZpL4QvxtwGQdKjTJECWUzSP8tP4yxCFV8jFAHaB/yBGpkuK03QOA+e0biZS5UlnBCv4dX5CWLqOIspxOYIkq8JyuaqHf1dM/zun7NqL9vH8HBjcL2lWtIocAAAAASUVORK5CYII=); 66 | } 67 | } 68 | } 69 | 70 | @if nth($msgClassSwitch, 3){ 71 | .warning{ 72 | @extend %message-basic; 73 | @include message-skin(nth($warningColor,1), nth($warningColor,2), nth($warningColor,3)); 74 | @if $msgIconSwitch { 75 | background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAZlBMVEX/////sCfvmQL3oxHLq2XLrGj5phb/rybj3czMtoPm4dL9rCHYnCn/6cL8qx/xmQD/68f8rCDLqmLXnC33ohDrmQf6+vj////Rnz/9rSHdmh/qmQr+ryXtmQXbmyTomQ3k38/cmiEJVN6mAAAAAXRSTlMAQObYZgAAAH9JREFUeF5lj+cKAzEMg2Vn3t6ru+//ksVNwqVUPwz+QJYFUWkm5smUiCoW2xK1dikgWvf5oK+OeV8BaCVL38tUBvDsBGybTMcvaEsnIGvwrnJQPXB3Obg9E2iaAK64xExKlvH3qIZnymM9MKrTofTf66ncQDSEcrF+3XV1qP8Bl2gGuNYIt7kAAAAASUVORK5CYII=); 76 | } 77 | } 78 | } 79 | 80 | @if nth($msgClassSwitch, 4){ 81 | .info{ 82 | @extend %message-basic; 83 | @include message-skin(nth($infoColor,1), nth($infoColor,2), nth($infoColor,3)); 84 | @if $msgIconSwitch{ 85 | background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAaVBMVEX///9PktVWouyawedRmN9Sm+Lg7Pedwuf///9Wou1VoOlSmuJTldZUn+hVn+mYwOZWoexvptzu9v1NkdTf7fxxp937/P5/sOCvzuzk7vhRmN5Xl9dmodpVoexqo9tRlNVVltbi7fhootuUx1cjAAAAAXRSTlMAQObYZgAAAH5JREFUeF5lj1cOA0EIQ83Usr239PsfMgKtlFHWH2CehMBgbX4imvyGU2tZVDFWRbkKmJc9RVHalxmANjyEnqvxgCPFtg9cW3pD25ip8PjU4sZRWv3AU4kLQdr9+APtC7eUAV5pbA6shqMMKHJAY35Xjb68fg13xu+GoZP4+AI3MwnTKJ+ruwAAAABJRU5ErkJggg==); 86 | } 87 | } 88 | } -------------------------------------------------------------------------------- /ext/animate/_rotate.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | //----------------------------------------------------- 3 | // rotate scss 4 | //----------------------------------------------------- 5 | 6 | 7 | // rotateIn 8 | @mixin animate-rotateIn () { 9 | @include keyframes(rotateIn){ 10 | 0% { 11 | opacity: 0; 12 | @include rotate(-200deg); 13 | } 14 | 100% { 15 | opacity: 1; 16 | @include rotate(0); 17 | } 18 | } 19 | .rotateIn { 20 | @include animation-name(rotateIn); 21 | @extend %animated; 22 | } 23 | } 24 | 25 | // rotateInDownLeft 26 | @mixin animate-rotateInDownLeft () { 27 | @include keyframes(rotateInDownLeft){ 28 | 0% { 29 | opacity: 0; 30 | @include rotate(-90deg); 31 | } 32 | 100% { 33 | opacity: 1; 34 | @include rotate(0); 35 | } 36 | } 37 | .rotateInDownLeft { 38 | @include transform-origin(left bottom); 39 | @include animation-name(rotateInDownLeft); 40 | @extend %animated; 41 | } 42 | } 43 | 44 | // rotateInDownRight 45 | @mixin animate-rotateInDownRight () { 46 | @include keyframes(rotateInDownRight){ 47 | 0% { 48 | opacity: 0; 49 | @include rotate(90deg); 50 | } 51 | 100% { 52 | opacity: 1; 53 | @include rotate(0); 54 | } 55 | } 56 | .rotateInDownRight { 57 | @include transform-origin(right bottom); 58 | @include animation-name(rotateInDownRight); 59 | @extend %animated; 60 | } 61 | } 62 | 63 | // rotateInUpLeft 64 | @mixin animate-rotateInUpLeft () { 65 | @include keyframes(rotateInUpLeft){ 66 | 0% { 67 | opacity: 0; 68 | @include rotate(90deg); 69 | } 70 | 100% { 71 | opacity: 1; 72 | @include rotate(0); 73 | } 74 | } 75 | .rotateInUpLeft { 76 | @include transform-origin(left bottom); 77 | @include animation-name(rotateInUpLeft); 78 | @extend %animated; 79 | } 80 | } 81 | 82 | // rotateInUpRight 83 | @mixin animate-rotateInUpRight () { 84 | @include keyframes(rotateInUpRight){ 85 | 0% { 86 | opacity: 0; 87 | @include rotate(-90deg); 88 | } 89 | 100% { 90 | opacity: 1; 91 | @include rotate(0); 92 | } 93 | } 94 | .rotateInUpRight { 95 | @include transform-origin(right bottom); 96 | @include animation-name(rotateInUpRight); 97 | @extend %animated; 98 | } 99 | } 100 | 101 | // rotateOut 102 | @mixin animate-rotateOut () { 103 | @include keyframes(rotateOut){ 104 | 0% { 105 | opacity: 1; 106 | @include rotate(0); 107 | } 108 | 100% { 109 | opacity: 0; 110 | @include rotate(200deg); 111 | } 112 | } 113 | .rotateOut { 114 | @include animation-name(rotateOut); 115 | @extend %animated; 116 | } 117 | } 118 | 119 | // rotateOutDownLeft 120 | @mixin animate-rotateOutDownLeft () { 121 | @include keyframes(rotateOutDownLeft){ 122 | 0% { 123 | opacity: 1; 124 | @include rotate(0); 125 | } 126 | 100% { 127 | opacity: 0; 128 | @include rotate(90deg); 129 | } 130 | } 131 | .rotateOutDownLeft { 132 | @include transform-origin(left bottom); 133 | @include animation-name(rotateOutDownLeft); 134 | @extend %animated; 135 | } 136 | } 137 | 138 | // rotateOutDownRight 139 | @mixin animate-rotateOutDownRight () { 140 | @include keyframes(rotateOutDownRight){ 141 | 0% { 142 | opacity: 1; 143 | @include rotate(0); 144 | } 145 | 100% { 146 | opacity: 0; 147 | @include rotate(-90deg); 148 | } 149 | } 150 | .rotateOutDownRight { 151 | @include transform-origin(right bottom); 152 | @include animation-name(rotateOutDownRight); 153 | @extend %animated; 154 | } 155 | } 156 | 157 | // rotateOutUpLeft 158 | @mixin animate-rotateOutUpLeft () { 159 | @include keyframes(rotateOutUpLeft){ 160 | 0% { 161 | opacity: 1; 162 | @include rotate(0); 163 | } 164 | 100% { 165 | opacity: 0; 166 | @include rotate(-90deg); 167 | } 168 | } 169 | .rotateOutUpLeft { 170 | @include transform-origin(left bottom); 171 | @include animation-name(rotateOutUpLeft); 172 | @extend %animated; 173 | } 174 | } 175 | 176 | // rotateOutUpRight 177 | @mixin animate-rotateOutUpRight () { 178 | @include keyframes(rotateOutUpRight){ 179 | 0% { 180 | opacity: 1; 181 | @include rotate(0); 182 | } 183 | 100% { 184 | opacity: 0; 185 | @include rotate(90deg); 186 | } 187 | } 188 | .rotateOutUpRight { 189 | @include transform-origin(right bottom); 190 | @include animation-name(rotateOutUpRight); 191 | @extend %animated; 192 | } 193 | } -------------------------------------------------------------------------------- /ext/animate/_bounce.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | //----------------------------------------------------- 3 | // bounce scss 4 | //----------------------------------------------------- 5 | 6 | 7 | // bounceIn 8 | @mixin animate-bounceIn () { 9 | @include keyframes(bounceIn){ 10 | 0% { 11 | opacity: 0; 12 | @include scale(.3); 13 | } 14 | 50% { 15 | opacity: 1; 16 | @include scale(1.05); 17 | } 18 | 70% { 19 | @include scale(.9); 20 | } 21 | 100% { 22 | @include scale(1); 23 | } 24 | } 25 | .bounceIn { 26 | @include animation-name(bounceIn); 27 | @extend %animated; 28 | } 29 | } 30 | 31 | // bounceInDown 32 | @mixin animate-bounceInDown () { 33 | @include keyframes(bounceInDown){ 34 | 0% { 35 | opacity: 0; 36 | @include translateY(-2000px); 37 | } 38 | 60% { 39 | opacity: 1; 40 | @include translateY(30px); 41 | } 42 | 80% { 43 | @include translateY(-10px); 44 | } 45 | 100% { 46 | @include translateY(0); 47 | } 48 | } 49 | .bounceInDown { 50 | @include animation-name(bounceInDown); 51 | @extend %animated; 52 | } 53 | } 54 | 55 | // bounceInLeft 56 | @mixin animate-bounceInLeft () { 57 | @include keyframes(bounceInLeft){ 58 | 0% { 59 | opacity: 0; 60 | @include translateX(-2000px); 61 | } 62 | 60% { 63 | opacity: 1; 64 | @include translateX(30px); 65 | } 66 | 80% { 67 | @include translateX(-10px); 68 | } 69 | 100% { 70 | @include translateY(0); 71 | } 72 | } 73 | .bounceInLeft { 74 | @include animation-name(bounceInLeft); 75 | @extend %animated; 76 | } 77 | } 78 | 79 | // bounceInRight 80 | @mixin animate-bounceInRight () { 81 | @include keyframes(bounceInRight){ 82 | 0% { 83 | opacity: 0; 84 | @include translateX(2000px); 85 | } 86 | 60% { 87 | opacity: 1; 88 | @include translateX(-30px); 89 | } 90 | 80% { 91 | @include translateX(10px); 92 | } 93 | 100% { 94 | @include translateY(0); 95 | } 96 | } 97 | .bounceInRight { 98 | @include animation-name(bounceInRight); 99 | @extend %animated; 100 | } 101 | } 102 | 103 | // bounceInUp 104 | @mixin animate-bounceInUp () { 105 | @include keyframes(bounceInUp){ 106 | 0% { 107 | opacity: 0; 108 | @include translateY(2000px); 109 | } 110 | 60% { 111 | opacity: 1; 112 | @include translateY(-30px); 113 | } 114 | 80% { 115 | @include translateY(10px); 116 | } 117 | 100% { 118 | @include translateY(0); 119 | } 120 | } 121 | .bounceInUp { 122 | @include animation-name(bounceInUp); 123 | @extend %animated; 124 | } 125 | } 126 | 127 | // bounceOut 128 | @mixin animate-bounceOut () { 129 | @include keyframes(bounceOut){ 130 | 0% { 131 | @include scale(1); 132 | } 133 | 25% { 134 | @include scale(.95); 135 | } 136 | 75% { 137 | opacity: 1; 138 | @include scale(1.1); 139 | } 140 | 100% { 141 | opacity: 0; 142 | @include scale(.3); 143 | } 144 | } 145 | .bounceOut { 146 | @include animation-name(bounceOut); 147 | @extend %animated; 148 | } 149 | } 150 | 151 | // bounceOutDown 152 | @mixin animate-bounceOutDown () { 153 | @include keyframes(bounceOutDown){ 154 | 0% { 155 | @include translateY(0); 156 | } 157 | 20% { 158 | opacity: 1; 159 | @include translateY(-20px); 160 | } 161 | 100% { 162 | opacity: 0; 163 | @include translateY(2000px); 164 | } 165 | } 166 | .bounceOutDown { 167 | @include animation-name(bounceOutDown); 168 | @extend %animated; 169 | } 170 | } 171 | 172 | // bounceOutLeft 173 | @mixin animate-bounceOutLeft () { 174 | @include keyframes(bounceOutLeft){ 175 | 0% { 176 | @include translateX(0); 177 | } 178 | 20% { 179 | opacity: 1; 180 | @include translateX(20px); 181 | } 182 | 100% { 183 | opacity: 0; 184 | @include translateX(-2000px); 185 | } 186 | } 187 | .bounceOutLeft { 188 | @include animation-name(bounceOutLeft); 189 | @extend %animated; 190 | } 191 | } 192 | 193 | // bounceOutRight 194 | @mixin animate-bounceOutRight () { 195 | @include keyframes(bounceOutRight){ 196 | 0% { 197 | @include translateX(0); 198 | } 199 | 20% { 200 | opacity: 1; 201 | @include translateX(-20px); 202 | } 203 | 100% { 204 | opacity: 0; 205 | @include translateX(2000px); 206 | } 207 | } 208 | .bounceOutRight { 209 | @include animation-name(bounceOutRight); 210 | @extend %animated; 211 | } 212 | } 213 | 214 | // bounceOutUp 215 | @mixin animate-bounceOutUp () { 216 | @include keyframes(bounceOutUp){ 217 | 0% { 218 | @include translateY(0); 219 | } 220 | 20% { 221 | opacity: 1; 222 | @include translateY(20px); 223 | } 224 | 100% { 225 | opacity: 0; 226 | @include translateY(-2000px); 227 | } 228 | } 229 | .bounceOutUp { 230 | @include animation-name(bounceOutUp); 231 | @extend %animated; 232 | } 233 | } 234 | -------------------------------------------------------------------------------- /core/_grid.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | //----------------------------------------------------- 3 | // grid scss 4 | // 支持固定宽度和百分比宽度，可以控制是否输出span的class 5 | //----------------------------------------------------- 6 | 7 | // thanks: 8 | // http://www.blankwork.net/ 9 | // http://semantic.gs/ 10 | // http://heygrady.com/blog/2011/02/17/using-sass-with-the-1kb-grid-system/ 11 | // https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_flex-grid.scss 12 | // http://bjorkoy.com/2010/05/css-grids-with-sass/ 13 | 14 | // variables 15 | // 这里设计的是1000px的布局，每个栅格为65px，共12个，计算公式：(65+20)*12-20 = 1000 16 | // 如果将gridColumnWidth设置为60px，就是盛名的960网格系统 17 | //----------------------------------------------------- 18 | $gridColumns: 12 !default; // Total number of columns 19 | $gridColumnWidth: 65px !default; // Width of a single column 20 | $gridGutter: 20px !default; // Width of the gutter 21 | $gridSystemWidth: $gridColumns * ($gridColumnWidth + $gridGutter); //grid system width 22 | 23 | 24 | // percent layout setting 25 | // 百分比布局的变量设置 26 | //----------------------------------------------------- 27 | $gridPercentSwitch: false !default; // 默认为固定宽度布局，设置为true为百分比 28 | $gridRealWidth: $gridSystemWidth !default; 29 | $gridGutterPercent: percentage($gridGutter / $gridSystemWidth) !default; 30 | 31 | @if $gridPercentSwitch{ 32 | $gridRealWidth: 100%; 33 | } 34 | 35 | // ie6/7 fluid layout bug: http://tylertate.com/blog/2012/01/05/subpixel-rounding.html 36 | // ie6/7 getWidth($i, true, $correction) 37 | $gridMinWidth: 1000 !default; 38 | $gridCorrection: 0.5 / $gridMinWidth * 100 * 1%; 39 | 40 | 41 | // margin value 42 | //----------------------------------------------------- 43 | // if fluid layout the value is $gridGutterPercent 44 | // if fixed layout the value is $gridGutter 45 | $gridMarginValue: if($gridPercentSwitch, $gridGutterPercent, $gridGutter) !default; 46 | 47 | 48 | // true for grid class(.span1, .span2...) 49 | // ---------------------------------------- 50 | $gridSpanSwitch: false !default; 51 | 52 | 53 | // A Function to calculate width: 54 | // 这个函数几乎是blankwork的灵魂，用来计算宽度的 55 | // Example usage: (based on default values) 56 | // getWidth(3, false) would return 240px 57 | // getWidth(3) or getWidth(3, true) would return 220px; 58 | // and plain getWidth() or getWidth would return 940px; 59 | @function getWidth($i:$gridColumns, $onlyInnerWidth:true, $subtract:0){ 60 | // First set a default return value 61 | $return: (($gridColumnWidth + $gridGutter) * $i / $gridSystemWidth) * $gridRealWidth - $subtract !default; 62 | 63 | // If we want to get only the inner width (without gutter) 64 | @if $onlyInnerWidth == true { 65 | // Return the total calculated width, without the margins 66 | // If the second parameter of this function is not specified 67 | // This is what is going to be returned 68 | $return: ((($gridColumnWidth + $gridGutter) * $i - $gridGutter) / $gridSystemWidth) * $gridRealWidth - $subtract; 69 | } 70 | 71 | @return $return; 72 | } 73 | 74 | 75 | // A Function to calculate percent width: 76 | // Example:getPercent(3,6) 77 | @function getPercent($i, $container-columns:$gridColumns, $onlyInnerWidth:false, $subtract:0) { 78 | $percentage: percentage($i / $container-columns); 79 | 80 | @if $onlyInnerWidth == true { 81 | $width: $i * $gridColumnWidth + ($i - 1) * $gridGutter; 82 | $container-width: $container-columns * $gridColumnWidth + ($container-columns - 1) * $gridGutter; 83 | $percentage: percentage($width / $container-width); 84 | } 85 | 86 | @return $percentage - $subtract; 87 | } 88 | 89 | 90 | // span or column's gutter 91 | %margin-gutter{ 92 | margin-right: $gridMarginValue; 93 | 94 | @if $gridPercentSwitch and $lte7{ 95 | *margin-right: $gridMarginValue - $gridCorrection; 96 | } 97 | } 98 | 99 | // Column Mixin: 100 | // We're defining the default values as follows: 101 | // Default Column Count: Max Column Count 102 | // Padding (explained below): 0 103 | @mixin column($i: $gridColumns, $subtract:0){ 104 | // 解决当$i 小于$gridColumns的时候需要float 105 | @if $i < $gridColumns { 106 | @extend %float; 107 | } 108 | @extend %margin-gutter; 109 | 110 | $getWidth: getWidth($i, true, $subtract); // Use the width calculation function to get the width 111 | width: $getWidth; 112 | 113 | @if $gridPercentSwitch and $lte7{ 114 | *width:$getWidth - $gridCorrection; 115 | } 116 | } 117 | 118 | // wrapper 119 | // This typically is a main content wrapper, 120 | // But just in case someone finds an alternative use of this, 121 | // we shouldhave the flexibility 122 | // So wrapper( column count, center ?, subtract) 123 | @mixin wrapper($i: $gridColumns, $center:true, $subtract:0){ 124 | @extend %clearfix; 125 | 126 | // Because this is a wrapper, we don't need the outer gutter - we need the full width 127 | $getWrapperWidth: getWidth($i, false); 128 | // In case there is a need to subtract the wrapper 129 | $wrapperWidth: $getWrapperWidth - $subtract; 130 | width:$wrapperWidth; 131 | 132 | // If we want the wrapper to be centered (by default we do) 133 | @if $center == true { 134 | margin-left:auto; 135 | margin-right:auto; 136 | } 137 | } 138 | 139 | 140 | // alpha & omega 141 | //----------------------------------------------------- 142 | @mixin alpha{ 143 | margin-left:0; 144 | } 145 | @mixin omega{ 146 | margin-right:0; 147 | } 148 | 149 | 150 | // prepend & append 151 | //----------------------------------------------------- 152 | @mixin prepend($i:1, $subtract:0){ 153 | margin-left: getWidth($i,false,$subtract); 154 | } 155 | @mixin append($i:1, $subtract:0){ 156 | margin-right: getWidth($i,false,$subtract); 157 | } 158 | 159 | 160 | // class span1-$gridColumns 161 | // span的class循环输出，通过变量$gridSpanSwitch来控制是否输出 162 | //----------------------------------------------------- 163 | @if $gridSpanSwitch { 164 | @for $i from 1 through $gridColumns { 165 | .span#{$i} { 166 | @extend %float; 167 | @extend %margin-gutter; 168 | 169 | width:getWidth($i); 170 | 171 | @if $gridPercentSwitch and $lte7{ 172 | *width:getWidth($i) - $gridCorrection; 173 | } 174 | } 175 | } 176 | } 177 | -------------------------------------------------------------------------------- /ext/animate/_fade.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | //----------------------------------------------------- 3 | // fade scss 4 | //----------------------------------------------------- 5 | 6 | 7 | // fadeIn 8 | @mixin animate-fadeIn () { 9 | @include keyframes(fadeIn){ 10 | 0% { 11 | opacity: 0; 12 | } 13 | 100% { 14 | opacity: 1; 15 | } 16 | } 17 | .fadeIn { 18 | @include animation-name(fadeIn); 19 | @extend %animated; 20 | } 21 | } 22 | 23 | 24 | // fadeInDown 25 | @mixin animate-fadeInDown () { 26 | @include keyframes(fadeInDown){ 27 | 0% { 28 | opacity: 0; 29 | @include translateY(-20px); 30 | } 31 | 100% { 32 | opacity: 1; 33 | @include translateY(0); 34 | } 35 | } 36 | .fadeInDown { 37 | @include animation-name(fadeInDown); 38 | @extend %animated; 39 | } 40 | } 41 | 42 | // fadeInDownBig 43 | @mixin animate-fadeInDownBig () { 44 | @include keyframes(fadeInDownBig){ 45 | 0% { 46 | opacity: 0; 47 | @include translateY(-2000px); 48 | } 49 | 100% { 50 | opacity: 1; 51 | @include translateY(0); 52 | } 53 | } 54 | 55 | .fadeInDownBig { 56 | @include animation-name(fadeInDownBig); 57 | @extend %animated; 58 | } 59 | } 60 | 61 | // fadeInLeft 62 | @mixin animate-fadeInLeft () { 63 | @include keyframes(fadeInLeft){ 64 | 0% { 65 | opacity: 0; 66 | @include translateX(-20px); 67 | } 68 | 100% { 69 | opacity: 1; 70 | @include translateX(0); 71 | } 72 | } 73 | .fadeInLeft { 74 | @include animation-name(fadeInLeft); 75 | @extend %animated; 76 | } 77 | } 78 | 79 | // fadeInLeftBig 80 | @mixin animate-fadeInLeftBig () { 81 | @include keyframes(fadeInLeftBig){ 82 | 0% { 83 | opacity: 0; 84 | @include translateX(-2000px); 85 | } 86 | 100% { 87 | opacity: 1; 88 | @include translateX(0); 89 | } 90 | } 91 | .fadeInLeftBig { 92 | @include animation-name(fadeInLeftBig); 93 | @extend %animated; 94 | } 95 | } 96 | 97 | // fadeInRight 98 | @mixin animate-fadeInRight () { 99 | @include keyframes(fadeInRight){ 100 | 0% { 101 | opacity: 0; 102 | @include translateX(20px); 103 | } 104 | 100% { 105 | opacity: 1; 106 | @include translateX(0); 107 | } 108 | } 109 | .fadeInRight { 110 | @include animation-name(fadeInRight); 111 | @extend %animated; 112 | } 113 | } 114 | 115 | // fadeInRightBig 116 | @mixin animate-fadeInRightBig () { 117 | @include keyframes(fadeInRightBig){ 118 | 0% { 119 | opacity: 0; 120 | @include translateX(2000px); 121 | } 122 | 100% { 123 | opacity: 1; 124 | @include translateX(0); 125 | } 126 | } 127 | .fadeInRightBig { 128 | @include animation-name(fadeInRightBig); 129 | @extend %animated; 130 | } 131 | } 132 | 133 | // fadeInUp 134 | @mixin animate-fadeInUp () { 135 | @include keyframes(fadeInUp){ 136 | 0% { 137 | opacity: 0; 138 | @include translateY(20px); 139 | } 140 | 100% { 141 | opacity: 1; 142 | @include translateY(0); 143 | } 144 | } 145 | .fadeInUp { 146 | @include animation-name(fadeInUp); 147 | @extend %animated; 148 | } 149 | } 150 | 151 | // fadeInUpBig 152 | @mixin animate-fadeInUpBig () { 153 | @include keyframes(fadeInUpBig){ 154 | 0% { 155 | opacity: 0; 156 | @include translateY(2000px); 157 | } 158 | 100% { 159 | opacity: 1; 160 | @include translateY(0); 161 | } 162 | } 163 | .fadeInUpBig { 164 | @include animation-name(fadeInUpBig); 165 | @extend %animated; 166 | } 167 | } 168 | 169 | // fadeOut 170 | @mixin animate-fadeOut () { 171 | @include keyframes(fadeOut){ 172 | 0% { 173 | opacity: 1; 174 | } 175 | 100% { 176 | opacity: 0; 177 | } 178 | } 179 | .fadeOut { 180 | @include animation-name(fadeOut); 181 | @extend %animated; 182 | } 183 | } 184 | 185 | // fadeOutDown 186 | @mixin animate-fadeOutDown () { 187 | @include keyframes(fadeOutDown){ 188 | 0% { 189 | opacity: 1; 190 | @include translateY(0); 191 | } 192 | 100% { 193 | opacity: 0; 194 | @include translateY(20px); 195 | } 196 | } 197 | .fadeOutDown { 198 | @include animation-name(fadeOutDown); 199 | @extend %animated; 200 | } 201 | } 202 | 203 | // fadeOutDownBig 204 | @mixin animate-fadeOutDownBig () { 205 | @include keyframes(fadeOutDownBig){ 206 | 0% { 207 | opacity: 1; 208 | @include translateY(0); 209 | } 210 | 100% { 211 | opacity: 0; 212 | @include translateY(2000px); 213 | } 214 | } 215 | .fadeOutDownBig { 216 | @include animation-name(fadeOutDownBig); 217 | @extend %animated; 218 | } 219 | } 220 | 221 | // fadeOutLeft 222 | @mixin animate-fadeOutLeft () { 223 | @include keyframes(fadeOutLeft){ 224 | 0% { 225 | opacity: 1; 226 | @include translateX(0px); 227 | } 228 | 100% { 229 | opacity: 0; 230 | @include translateX(-20px); 231 | } 232 | } 233 | .fadeOutLeft { 234 | @include animation-name(fadeOutLeft); 235 | @extend %animated; 236 | } 237 | } 238 | 239 | // fadeOutLeftBig 240 | @mixin animate-fadeOutLeftBig () { 241 | @include keyframes(fadeOutLeftBig){ 242 | 0% { 243 | opacity: 1; 244 | @include translateX(0px); 245 | } 246 | 100% { 247 | opacity: 0; 248 | @include translateX(-2000px); 249 | } 250 | } 251 | .fadeOutLeftBig { 252 | @include animation-name(fadeOutLeftBig); 253 | @extend %animated; 254 | } 255 | } 256 | 257 | // fadeOutRight 258 | @mixin animate-fadeOutRight () { 259 | @include keyframes(fadeOutRight){ 260 | 0% { 261 | opacity: 1; 262 | @include translateX(0); 263 | } 264 | 100% { 265 | opacity: 0; 266 | @include translateX(20px); 267 | } 268 | } 269 | .fadeOutRight { 270 | @include animation-name(fadeOutRight); 271 | @extend %animated; 272 | } 273 | } 274 | 275 | // fadeOutRightBig 276 | @mixin animate-fadeOutRightBig () { 277 | @include keyframes(fadeOutRightBig){ 278 | 0% { 279 | opacity: 1; 280 | @include translateX(0); 281 | } 282 | 100% { 283 | opacity: 0; 284 | @include translateX(2000px); 285 | } 286 | } 287 | .fadeOutRightBig { 288 | @include animation-name(fadeOutRightBig); 289 | @extend %animated; 290 | } 291 | } 292 | 293 | // fadeOutUp 294 | @mixin animate-fadeOutUp () { 295 | @include keyframes(fadeOutUp){ 296 | 0% { 297 | opacity: 1; 298 | @include translateY(0); 299 | } 300 | 100% { 301 | opacity: 0; 302 | @include translateY(-20px); 303 | } 304 | } 305 | .fadeOutUp { 306 | @include animation-name(fadeOutUp); 307 | @extend %animated; 308 | } 309 | } 310 | 311 | // fadeOutUpBig 312 | @mixin animate-fadeOutUpBig () { 313 | @include keyframes(fadeOutUpBig){ 314 | 0% { 315 | opacity: 1; 316 | @include translateY(0); 317 | } 318 | 100% { 319 | opacity: 0; 320 | @include translateY(-2000px); 321 | } 322 | } 323 | .fadeOutUpBig { 324 | @include animation-name(fadeOutUpBig); 325 | @extend %animated; 326 | } 327 | } -------------------------------------------------------------------------------- /ext/_table.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | //----------------------------------------------------- 3 | // table scss 4 | //----------------------------------------------------- 5 | 6 | // thanks:https://github.com/thomas-mcdonald/bootstrap-sass/blob/master/vendor/assets/stylesheets/bootstrap/_tables.scss 7 | 8 | // 变量 9 | //--------------------------------- 10 | $zebraLte8: false !default; //斑马线效果是否支持ie8，如果支持请在tr里面添加class odd 11 | $tableBgColor: transparent !default; // overall background-color 12 | $tableBgColorEven: #f9f9f9 !default; // for striping zebra 13 | $tableBgColorHover: #e9f5ff !default; // for hover 14 | $tableBorderColor: $gray !default; // table and cell border 15 | $tableThBgColor: #f4f4f4 !default;//默认th背景色 16 | $tableColThWidth: 80px !default;//默认左边第一栏为th表格的th宽度 17 | $tableCellPadding: 8px !default;//单元格的padding 18 | $tableRadius: $baseRadius !default;//圆角大小 19 | $tableResetSwitch: true !default;//是否已经有了table的重置border-collapse: collapse;border-spacing: 0; 20 | 21 | //各个table开关设置 22 | $tableBorderSwitch: true !default; 23 | $tableListSwitch: false !default; 24 | $tableColThSwitch: false !default; 25 | $tableRadiusSwitch: false !default; 26 | $tableLineSwitch: false !default; 27 | $tableStripedSwitch: false !default; 28 | $tableHoverSwitch: false !default; 29 | $tableCondensedSwitch: false !default; 30 | $tableStatusSwitch: false !default; 31 | 32 | 33 | //table mixin 34 | //--------------------------------- 35 | @mixin table-radius($radius: $tableRadius){ 36 | border-collapse: separate; // Done so we can round those corners! 37 | @if $lte7 { 38 | *border-collapse: collapse; // IE7 can't round corners anyway 39 | } 40 | border-radius: $radius; 41 | // For first th/td in the first row in the first thead or tbody 42 | thead:first-child tr:first-child > th:first-child, 43 | tbody:first-child tr:first-child > td:first-child, 44 | tbody:first-child tr:first-child > th:first-child { 45 | border-top-left-radius: $radius; 46 | } 47 | // For last th/td in the first row in the first thead or tbody 48 | thead:first-child tr:first-child > th:last-child, 49 | tbody:first-child tr:first-child > td:last-child, 50 | tbody:first-child tr:first-child > th:last-child { 51 | border-top-right-radius: $radius; 52 | } 53 | // For first th/td (can be either) in the last row in the last thead, tbody, and tfoot 54 | thead:last-child tr:last-child > th:first-child, 55 | tbody:last-child tr:last-child > td:first-child, 56 | tbody:last-child tr:last-child > th:first-child, 57 | tfoot:last-child tr:last-child > td:first-child, 58 | tfoot:last-child tr:last-child > th:first-child { 59 | border-bottom-left-radius: $radius; 60 | } 61 | // For last th/td (can be either) in the last row in the last thead, tbody, and tfoot 62 | thead:last-child tr:last-child > th:last-child, 63 | tbody:last-child tr:last-child > td:last-child, 64 | tbody:last-child tr:last-child > th:last-child, 65 | tfoot:last-child tr:last-child > td:last-child, 66 | tfoot:last-child tr:last-child > th:last-child { 67 | border-bottom-right-radius: $radius; 68 | } 69 | 70 | // Clear border-radius for first and last td in the last row in the last tbody for table with tfoot 71 | tfoot + tbody:last-child tr:last-child td:first-child { 72 | border-bottom-left-radius: $radius; 73 | } 74 | tfoot + tbody:last-child tr:last-child td:last-child { 75 | border-bottom-right-radius: $radius; 76 | } 77 | 78 | // Special fixes to round the left border on the first td/th 79 | caption + thead tr:first-child th:first-child, 80 | caption + tbody tr:first-child td:first-child, 81 | colgroup + thead tr:first-child th:first-child, 82 | colgroup + tbody tr:first-child td:first-child { 83 | border-top-left-radius: $radius; 84 | } 85 | caption + thead tr:first-child th:last-child, 86 | caption + tbody tr:first-child td:last-child, 87 | colgroup + thead tr:first-child th:last-child, 88 | colgroup + tbody tr:first-child td:last-child { 89 | border-top-right-radius: $radius; 90 | } 91 | } 92 | 93 | @mixin table-border($borderColor:$tableBorderColor){ 94 | th, 95 | td { 96 | border: 1px solid $borderColor; 97 | } 98 | } 99 | 100 | @mixin zebra-stripe($even: $tableBgColorEven){ 101 | tbody { 102 | > tr:nth-child(even) > td{ 103 | background-color: $even; 104 | } 105 | } 106 | @if $zebraLte8 { 107 | tr.even td{ 108 | background-color: $even; 109 | } 110 | } 111 | } 112 | 113 | @mixin tr-hover($hover: $tableBgColorHover){ 114 | tbody { 115 | tr:hover > td{ 116 | background-color: $hover; 117 | } 118 | } 119 | } 120 | 121 | @mixin table-thead($thBgColor:$primary,$thTextColor:$white){ 122 | th{ 123 | background-color: $thBgColor; 124 | color:$thTextColor; 125 | font-weight: normal; 126 | } 127 | } 128 | 129 | 130 | //table class 131 | //--------------------------------- 132 | .table { 133 | width: 100%; 134 | margin-bottom: $baseGap; 135 | 136 | @if not $tableResetSwitch{ 137 | border-collapse: collapse; 138 | border-spacing: 0; 139 | } 140 | th,td{ 141 | padding: $tableCellPadding; 142 | } 143 | thead th{ 144 | text-align: left; 145 | } 146 | } 147 | 148 | .table-fixed{ 149 | table-layout: fixed; 150 | } 151 | 152 | @if $tableBorderSwitch{ 153 | .table-border{ 154 | @include table-border; 155 | } 156 | } 157 | 158 | @if $tableListSwitch{ 159 | .table-list{ 160 | @include table-thead; 161 | td{ 162 | border-bottom:1px dashed $tableBorderColor; 163 | } 164 | @include zebra-stripe; 165 | @include tr-hover; 166 | } 167 | } 168 | 169 | @if $tableCondensedSwitch{ 170 | .table-condensed { 171 | th, 172 | td { 173 | padding: 4px 5px; 174 | } 175 | } 176 | } 177 | 178 | @if $tableLineSwitch{ 179 | .table-line{ 180 | th,td{ 181 | border-top:1px solid $tableBorderColor; 182 | } 183 | thead:first-child tr:first-child th, 184 | thead:first-child tr:first-child td { 185 | border-top: 0; 186 | } 187 | @if $lte7 { 188 | _border-bottom:1px solid $tableBorderColor; 189 | } 190 | } 191 | } 192 | 193 | @if $tableRadiusSwitch{ 194 | .table-radius { 195 | border-top:1px solid $tableBorderColor; 196 | border-left:1px solid $tableBorderColor; 197 | th,td{ 198 | border-right:1px solid $tableBorderColor; 199 | border-bottom:1px solid $tableBorderColor; 200 | } 201 | @include table-radius($tableRadius); 202 | } 203 | } 204 | 205 | @if $tableStripedSwitch{ 206 | .table-striped { 207 | @include zebra-stripe($tableBgColorEven); 208 | } 209 | } 210 | 211 | @if $tableHoverSwitch{ 212 | .table-hover { 213 | @include tr-hover($tableBgColorHover); 214 | } 215 | } 216 | 217 | @if $tableColThSwitch{ 218 | .table-col-th{ 219 | @include table-border; 220 | th{ 221 | background-color: $tableThBgColor; 222 | width: $tableColThWidth; 223 | vertical-align: middle; 224 | } 225 | } 226 | } 227 | 228 | // TABLE BACKGROUNDS 229 | // Exact selectors below required to override .table-striped 230 | //--------------------------------- 231 | @if $tableStatusSwitch { 232 | .table tr { 233 | &.tr-success td { 234 | background-color: nth($successColor,2); 235 | } 236 | &.tr-error td { 237 | background-color: nth($errorColor,2); 238 | } 239 | &.tr-warning td { 240 | background-color: nth($warningColor,2); 241 | } 242 | &.tr-info td { 243 | background-color: nth($infoColor,2); 244 | } 245 | } 246 | 247 | // Hover states for .table-hover 248 | .table-hover tr { 249 | &.tr-success:hover td { 250 | background-color: darken(nth($successColor,2), 5%); 251 | } 252 | &.tr-error:hover td { 253 | background-color: darken(nth($errorColor,2), 5%); 254 | } 255 | &.tr-warning:hover td { 256 | background-color: darken(nth($warningColor,2), 5%); 257 | } 258 | &.tr-info:hover td { 259 | background-color: darken(nth($infoColor,2), 5%); 260 | } 261 | } 262 | } -------------------------------------------------------------------------------- /core/_media-queries.scss: -------------------------------------------------------------------------------- 1 | //----------------------------------------------------- 2 | // media queries scss 3 | // Author: Rafal Bromirski 4 | // https://github.com/paranoida/sass-mediaqueries/blob/master/_media-queries.scss 5 | //----------------------------------------------------- 6 | 7 | //----------------------------------------------------- 8 | // Version: 1.3 9 | // developed on 14/11/2013 10 | // 11 | // Mixins: 12 | // @ min-screen(width) // shortcut for @media screen and (min-width ...) 13 | // @ max-screen(width) // shortcut for @media screen and (max-width ...) 14 | // @ screen(min-width, max-width) // shortcut for @media screen and (min-width ...) and (max-width ...) 15 | // --- 16 | // @ min-screen-height(height) // shortcut for @media screen and (min-height ...) 17 | // @ max-screen-height(height) // shortcut for @media screen and (max-height ...) 18 | // @ screen-height(min-height, max-height) // shortcut for @media screen and (min-height ...) and (max-height ...) 19 | // --- 20 | // @ iphone3 // only iPhone (2, 3G, 3GS) landscape & portrait 21 | // @ iphone3(landscape) // only iPhone (2, 3G, 3GS) only landscape 22 | // @ iphone3(portrait) // only iPhone (2, 3G, 3GS) only portrait 23 | // --- 24 | // @ iphone4 // only iPhone (4, 4S) landscape & portrait 25 | // @ iphone4(landscape) // only iPhone (4, 4S) only landscape 26 | // @ iphone4(portrait) // only iPhone (4, 4S) only portrait 27 | // --- 28 | // @ iphone5 // only iPhone (5) landscape & portrait 29 | // @ iphone5(landscape) // only iPhone (5) only landscape 30 | // @ iphone5(portrait) // only iPhone (5) only portrait 31 | // --- 32 | // @ ipad // all iPads (1, 2, 3, 4, Mini) landscape & portrait 33 | // @ ipad(landscape) // all iPads (1, 2, 3, 4, Mini) only landscape 34 | // @ ipad(portrait) // all iPads (1, 2, 3, 4, Mini) only portrait 35 | // --- 36 | // @ ipad-retina // only iPad (3, 4) landscape & portrait 37 | // @ ipad-retina(landscape) // only iPad (3, 4) only landscape 38 | // @ ipad-retina(portrait) // only iPad (3, 4) only portrait 39 | // --- 40 | // @ hdpi(ratio) // devices with hidpi displays (default ratio: 1.3) 41 | // 42 | //----------------------------------------------------- 43 | 44 | // screen 45 | //----------------------------------------------------- 46 | 47 | @mixin screen($resMin, $resMax) 48 | { 49 | @media screen and (min-width: $resMin) and (max-width: $resMax) 50 | { 51 | @content; 52 | } 53 | } 54 | 55 | @mixin max-screen($res) 56 | { 57 | @media screen and (max-width: $res) 58 | { 59 | @content; 60 | } 61 | } 62 | 63 | @mixin min-screen($res) 64 | { 65 | @media screen and (min-width: $res) 66 | { 67 | @content; 68 | } 69 | } 70 | 71 | @mixin screen-height($resMin, $resMax) 72 | { 73 | @media screen and (min-height: $resMin) and (max-height: $resMax) 74 | { 75 | @content; 76 | } 77 | } 78 | 79 | @mixin max-screen-height($res) 80 | { 81 | @media screen and (max-height: $res) 82 | { 83 | @content; 84 | } 85 | } 86 | 87 | @mixin min-screen-height($res) 88 | { 89 | @media screen and (min-height: $res) 90 | { 91 | @content; 92 | } 93 | } 94 | 95 | 96 | // hdpi 97 | //----------------------------------------------------- 98 | 99 | // Based on bourbon hidpi-media-queries file (https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_hidpi-media-query.scss) 100 | // HIDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/) 101 | 102 | @mixin hdpi($ratio: 1.3) 103 | { 104 | @media only screen and (-webkit-min-device-pixel-ratio: $ratio), 105 | only screen and (min--moz-device-pixel-ratio: $ratio), 106 | only screen and (-o-min-device-pixel-ratio: #{$ratio}/1), 107 | only screen and (min-resolution: #{round($ratio*96)}dpi), 108 | only screen and (min-resolution: #{$ratio}dppx) 109 | { 110 | @content; 111 | } 112 | } 113 | 114 | // iphone 115 | //----------------------------------------------------- 116 | 117 | @mixin iphone3($orientation: all) 118 | { 119 | $deviceMinWidth: 320px; 120 | $deviceMaxWidth: 480px; 121 | $devicePixelRatio: 1; 122 | 123 | @if $orientation == all 124 | { 125 | @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) 126 | and (-webkit-device-pixel-ratio: $devicePixelRatio) 127 | { 128 | @content; 129 | } 130 | } 131 | @else 132 | { 133 | @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) 134 | and (-webkit-device-pixel-ratio: $devicePixelRatio) and (orientation:#{$orientation}) 135 | { 136 | @content; 137 | } 138 | } 139 | } 140 | 141 | // iphone-retina 142 | //----------------------------------------------------- 143 | 144 | @mixin iphone4($orientation: all) 145 | { 146 | $deviceMinWidth: 320px; 147 | $deviceMaxWidth: 480px; 148 | $devicePixelRatio: 2; 149 | $deviceAspectRatio: '2/3'; 150 | 151 | @if $orientation == all 152 | { 153 | @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) 154 | and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio) 155 | { 156 | @content; 157 | } 158 | } 159 | @else 160 | { 161 | @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) 162 | and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: 2/3) and (orientation:#{$orientation}) 163 | { 164 | @content; 165 | } 166 | } 167 | } 168 | 169 | // iphone-5 170 | //----------------------------------------------------- 171 | 172 | @mixin iphone5($orientation: all) 173 | { 174 | $deviceMinWidth: 320px; 175 | $deviceMaxWidth: 568px; 176 | $devicePixelRatio: 2; 177 | $deviceAspectRatio: '40/71'; 178 | 179 | @if $orientation == all 180 | { 181 | @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) 182 | and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio) 183 | { 184 | @content; 185 | } 186 | } 187 | @else 188 | { 189 | @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) 190 | and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio) and (orientation:#{$orientation}) 191 | { 192 | @content; 193 | } 194 | } 195 | } 196 | 197 | // ipads (all) 198 | //----------------------------------------------------- 199 | 200 | @mixin ipad($orientation: all) 201 | { 202 | $deviceMinWidth: 768px; 203 | $deviceMaxWidth: 1024px; 204 | 205 | @if $orientation == all 206 | { 207 | @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) 208 | { 209 | @content; 210 | } 211 | } 212 | @else 213 | { 214 | @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) 215 | and (orientation:#{$orientation}) 216 | { 217 | @content; 218 | } 219 | } 220 | } 221 | 222 | // ipad-retina 223 | //----------------------------------------------------- 224 | 225 | @mixin ipad-retina($orientation: all) 226 | { 227 | $deviceMinWidth: 768px; 228 | $deviceMaxWidth: 1024px; 229 | $devicePixelRatio: 2; 230 | 231 | @if $orientation == all 232 | { 233 | @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) 234 | and (-webkit-device-pixel-ratio: $devicePixelRatio) 235 | { 236 | @content; 237 | } 238 | } 239 | @else 240 | { 241 | @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) 242 | and (-webkit-device-pixel-ratio: $devicePixelRatio) and (orientation:#{$orientation}) 243 | { 244 | @content; 245 | } 246 | } 247 | } 248 | -------------------------------------------------------------------------------- /ext/_form.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | //----------------------------------------------------- 3 | // form scss 4 | // 提交按钮样式基于_btn.scss 5 | // 交互提示报错信息样式基于_message.scss 6 | //----------------------------------------------------- 7 | 8 | 9 | //变量 10 | //--------------------------------- 11 | $formItemMargin: 10px !default; //上下元素的间距 12 | $formLabelWidth: 100px !default; //当label和元素同行时，label的宽度 13 | $formTextWidth: 200px !default; //输入框的宽度 14 | $formTextarea: 500px 80px !default; //文本域宽度和高度 15 | $formEleHeight: 28px !default; //输入框的高度，label的高度，选择框的高度... 16 | $formInlineMargin: 10px !default; //相邻同行元素的间距 17 | $formUploadBgColor: $primary !default; //upload按钮默认背景颜色 18 | $formRadius: 0 !default; //圆角大小，默认0将不会产生圆角 19 | 20 | $formBasicResetSwitch: true !default; //是否开启表单元素基本重置，如果你已经有了重置或normalize，就不用开启了。 21 | $formMsgSwitch: false !default; //是否开启报错等信息，如设为true则需导入message.scss 22 | $formConditionSwitch: false !default; //是否开启条件选项 23 | 24 | $formHorizontalSwitch: false !default; //是否启用水平表单样式 25 | $formInlineSwitch: false !default; //是否启用单行表单样式 26 | $formSimpleSwitch: false !default; //是否启用简洁表单样式 27 | 28 | 29 | // 基本重置 30 | //--------------------------------- 31 | @if $formBasicResetSwitch { 32 | .form-text, 33 | .form-select, 34 | .form-raido, 35 | .form-checkbox, 36 | .form-textarea, 37 | .form-file, 38 | .formbtn { 39 | font-family: inherit; 40 | font-size: 100%; 41 | margin: 0; 42 | vertical-align: middle; 43 | } 44 | } 45 | 46 | 47 | // mixin 48 | //--------------------------------- 49 | // radio & checkbox 的重置 50 | @mixin reset-radio-checkbox{ 51 | margin:0 5px 0 0; 52 | padding:0; 53 | font-size:13px; 54 | //ie6,7得设置宽度和高度才能表现和其他浏览器一样的重置 55 | //radio和checkbox的大小为13px 56 | @if $lte7 { 57 | width:13px; 58 | height:13px; 59 | } 60 | } 61 | // 默认的样式mixin定义 62 | // 定义了border，padding及圆角 63 | @mixin ele-border($borderColor:$gray, $radius:$baseRadius){ 64 | border: 1px solid $borderColor; 65 | padding:4px; 66 | @if not(unitless($formRadius)) { 67 | border-radius: $formRadius; 68 | } 69 | } 70 | // 边框及阴影的动画效果 71 | @mixin ele-border-transition(){ 72 | @include ele-border; 73 | @include transition(border linear 0.2s, box-shadow linear 0.2s); 74 | @include box-shadow(inset 0 1px 3px rgba(0, 0, 0, 0.1)); 75 | 76 | &:focus{ 77 | border-color: rgba(82, 168, 236, 0.8); 78 | @include box-shadow(inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6)); 79 | } 80 | } 81 | 82 | 83 | // 基本元素 84 | //--------------------------------- 85 | .form-label{ 86 | font-size:14px; 87 | line-height:$formEleHeight; 88 | } 89 | .form-text{ 90 | vertical-align:middle; 91 | width:$formTextWidth; 92 | height:$formEleHeight - 10px;//padding:4px;border-width:1px; 93 | } 94 | .form-textarea{ 95 | resize:none; 96 | vertical-align:top; 97 | overflow:auto; 98 | width:nth($formTextarea,1); 99 | height:nth($formTextarea,2); 100 | } 101 | .form-text, .form-textarea{ 102 | @include ele-border-transition; 103 | } 104 | .form-select{ 105 | @include ele-border; 106 | // select lte ie7 107 | // ie6,7 不支持select的padding 108 | @if $lte7 { 109 | *margin-top:($formEleHeight - 18px) / 2; 110 | *margin-bottom:($formEleHeight - 18px) / 2; 111 | *vertical-align:top; 112 | } 113 | } 114 | .form-text:focus, .form-textarea:focus, .form-select:focus{ 115 | outline: 0 none; 116 | } 117 | // checkbox & radio 118 | // rc中的r表示radio，c表示checkbox 119 | .form-radio, .form-checkbox{ 120 | @include reset-radio-checkbox; 121 | } 122 | // rc's wrap 123 | .form-field-rc{ 124 | @extend %clearfix; 125 | } 126 | // rc inline 127 | .form-label-rc{ 128 | display: inline; 129 | float: left; 130 | font-size: 12px; 131 | margin-right:$formInlineMargin; 132 | line-height:$formEleHeight - 10px;// input height 133 | 134 | .form-radio, 135 | .form-checkbox, 136 | span{ 137 | @include float; 138 | } 139 | .form-radio, 140 | .form-checkbox{ 141 | margin-top:($formEleHeight - 10px - 13px) / 2; 142 | } 143 | } 144 | // rc block 145 | .field-rc-block .form-label-rc{ 146 | display: block; 147 | float: none; 148 | margin: 0 0 5px; 149 | overflow: auto; 150 | padding-left: 20px; 151 | 152 | @if $lte7 { 153 | *zoom:1; 154 | _padding-left: 17px; 155 | } 156 | 157 | .form-radio, 158 | .form-checkbox{ 159 | margin-left: -20px; 160 | @if $lte7 { 161 | *margin-left: -17px; 162 | } 163 | } 164 | } 165 | // 验证码 166 | .text-captcha{ 167 | width: 130px; 168 | } 169 | .form-captcha{ 170 | @extend %inline-block; 171 | border: 1px solid $gray; 172 | cursor: pointer; 173 | margin-left: $formInlineMargin; 174 | img{ 175 | height:$formEleHeight - 2px; 176 | vertical-align:middle; 177 | } 178 | } 179 | // 将upload简化为一个点击按钮，大小为70px/28px，各浏览器表现良好 180 | // 得使用js来配合显示其上传的路径 181 | .form-file-wrap{ 182 | @include inline-block; 183 | padding: 0px; 184 | width: 70px; 185 | height: 28px; 186 | background-color: $formUploadBgColor; 187 | position: relative; 188 | overflow: hidden; 189 | @if not(unitless($formRadius)) { 190 | border-radius: $formRadius; 191 | } 192 | 193 | .form-file-replace-text{ 194 | display: block; 195 | line-height: 28px; 196 | cursor: pointer; 197 | color: #fff; 198 | text-align: center; 199 | } 200 | .form-file{ 201 | opacity: 0; 202 | filter: alpha(opacity=0); 203 | width: 70px; 204 | height: 28px; 205 | left: 0; 206 | top: 0; 207 | display: block; 208 | cursor: pointer; 209 | position: absolute; 210 | z-index: 1; 211 | } 212 | &:hover{ 213 | background-color: darken($formUploadBgColor,10%); 214 | } 215 | } 216 | 217 | 218 | // 附加class 219 | //--------------------------------- 220 | // form element description 221 | // span inline 222 | .form-des{ 223 | color: $grayDark; 224 | margin-left:$formInlineMargin; 225 | } 226 | // p block 227 | p.form-des{ 228 | margin:0; 229 | line-height: $formEleHeight; 230 | } 231 | // form disabled 232 | .form-disabled{ 233 | @include disabled; 234 | &.form-text, 235 | &.form-textarea{ 236 | border-color: #bbb !important; 237 | } 238 | } 239 | // form required 240 | .form-required{ 241 | color: $red; 242 | margin-right: 5px; 243 | } 244 | // 前缀，后缀，连接 245 | .form-prefix{ 246 | margin-right: 5px; 247 | } 248 | .form-suffix{ 249 | margin-left: 5px; 250 | } 251 | .form-join{ 252 | margin: 0 5px; 253 | } 254 | // 提交按钮右侧的链接或按钮 255 | .btn-right{ 256 | @extend %inline-block; 257 | vertical-align: middle; 258 | line-height: $formEleHeight; 259 | margin-left: $formInlineMargin; 260 | } 261 | 262 | // 条件选项 263 | @if ($formConditionSwitch) { 264 | .form-field-condition{ 265 | $conditionWidth: 100px; 266 | 267 | margin-top: 3.5px; 268 | 269 | .form-label-rc{ 270 | margin-top: 2px; 271 | } 272 | .form-text, 273 | .form-select{ 274 | padding: 2px; 275 | } 276 | .condition-ele{ 277 | @extend %clearfix; 278 | margin-bottom: 5px; 279 | } 280 | .condition-content{ 281 | margin-left: $conditionWidth; 282 | } 283 | } 284 | } 285 | 286 | 287 | // 默认表单 288 | // label独立一行 289 | //--------------------------------- 290 | .form{ 291 | font-size: 12px; 292 | margin-bottom: $formItemMargin; 293 | fieldset { 294 | padding: 0; 295 | margin: 0; 296 | border: 0; 297 | } 298 | legend { 299 | display: block; 300 | width: 100%; 301 | padding: 0; 302 | margin-bottom: $formItemMargin; 303 | font-size: $baseFontSize * 1.5; 304 | line-height: $baseLineHeight * 2; 305 | color: $grayDark; 306 | border: 0; 307 | border-bottom: 1px solid #e5e5e5; 308 | } 309 | .form-item{ 310 | margin-bottom:$formItemMargin; 311 | clear: both; 312 | @extend %clearfix; 313 | } 314 | 315 | //提交操作按钮 316 | .form-action{ 317 | clear:both; 318 | text-align: center; 319 | } 320 | .action-left{ 321 | text-align: left; 322 | } 323 | 324 | // inline 325 | .inline-ele{ 326 | margin-right:$formInlineMargin; 327 | } 328 | .inline-item{ 329 | @include float; 330 | clear:none; 331 | } 332 | } 333 | 334 | 335 | // form-horizontal 336 | // label与input元素同行表单 337 | //--------------------------------- 338 | @if $formHorizontalSwitch { 339 | .form-horizontal{ 340 | .form-label{ 341 | @include float; 342 | text-align: right; 343 | width:$formLabelWidth; 344 | } 345 | .form-field, 346 | .action-left{ 347 | margin-left: $formLabelWidth + 10px; 348 | } 349 | .form-field-rc{ 350 | margin-top:5px; 351 | } 352 | } 353 | } 354 | 355 | // form-inline 356 | // 单行表单,所有的元素一行显示，用于单行登录表单 357 | //--------------------------------- 358 | @if $formInlineSwitch { 359 | .form-inline{ 360 | .form-label{ 361 | @extend %inline-block; 362 | vertical-align: middle; 363 | } 364 | .form-label-rc{ 365 | float: none; 366 | @extend %inline-block; 367 | vertical-align: middle; 368 | } 369 | .form-text,.form-label-rc{ 370 | margin-right: $formInlineMargin; 371 | } 372 | } 373 | } 374 | 375 | 376 | // form-simple 377 | // 应用于直接写表单元素，尽可能无嵌套，垂直格式 378 | //--------------------------------- 379 | @if $formSimpleSwitch { 380 | .form-simple{ 381 | .form-label{ 382 | display: block; 383 | } 384 | .form-text,.form-textarea,.form-select,.form-field-rc,.form-captcha{ 385 | margin-bottom: $formItemMargin; 386 | } 387 | } 388 | } 389 | 390 | 391 | // form messages 392 | //--------------------------------- 393 | @if $formMsgSwitch { 394 | .form{ 395 | // block status tips 396 | .error, .warning, .success, .info { 397 | margin-bottom: $formItemMargin; 398 | } 399 | // span inline status tips 400 | span.error, span.warning, span.success, span.info { 401 | @include inline-block; 402 | border-width:1px; 403 | line-height:$formEleHeight - 2px; 404 | vertical-align:middle; 405 | padding:0 5px 0 25px; 406 | @if $lte7{ 407 | *padding-left: 5px; 408 | } 409 | margin:0 0 0 $formInlineMargin; 410 | } 411 | 412 | .text-error{ 413 | border-color: nth($errorColor,3); 414 | @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); 415 | &:focus { 416 | border-color: rgba(82, 168, 236, 0.8); 417 | @include box-shadow(inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6)); 418 | } 419 | } 420 | } 421 | } -------------------------------------------------------------------------------- /ext/font-face/_variables.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | //----------------------------------------------------- 3 | // variables scss 4 | //----------------------------------------------------- 5 | 6 | $fontFamily: FontAwesome !default; 7 | $fontFilePath: "../fonts/fontawesome-webfont" !default; 8 | $fontClassAllSwitch: false !default; 9 | $fontClassPrefix: icon !default; 10 | $fontClassoutput: () !default; 11 | 12 | //名称&内容列表 13 | $fontClassAll: glass "\f000", 14 | music "\f001", 15 | search "\f002", 16 | envelope-o "\f003", 17 | heart "\f004", 18 | star "\f005", 19 | star-o "\f006", 20 | user "\f007", 21 | film "\f008", 22 | th-large "\f009", 23 | th "\f00a", 24 | th-list "\f00b", 25 | check "\f00c", 26 | times "\f00d", 27 | search-plus "\f00e", 28 | search-minus "\f010", 29 | power-off "\f011", 30 | signal "\f012", 31 | cog "\f013", 32 | trash-o "\f014", 33 | home "\f015", 34 | file-o "\f016", 35 | clock-o "\f017", 36 | road "\f018", 37 | download "\f019", 38 | arrow-circle-o-down "\f01a", 39 | arrow-circle-o-up "\f01b", 40 | inbox "\f01c", 41 | play-circle-o "\f01d", 42 | repeat "\f01e", 43 | refresh "\f021", 44 | list-alt "\f022", 45 | lock "\f023", 46 | flag "\f024", 47 | headphones "\f025", 48 | volume-off "\f026", 49 | volume-down "\f027", 50 | volume-up "\f028", 51 | qrcode "\f029", 52 | barcode "\f02a", 53 | tag "\f02b", 54 | tags "\f02c", 55 | book "\f02d", 56 | bookmark "\f02e", 57 | print "\f02f", 58 | camera "\f030", 59 | font "\f031", 60 | bold "\f032", 61 | italic "\f033", 62 | text-height "\f034", 63 | text-width "\f035", 64 | align-left "\f036", 65 | align-center "\f037", 66 | align-right "\f038", 67 | align-justify "\f039", 68 | list "\f03a", 69 | outdent "\f03b", 70 | indent "\f03c", 71 | video-camera "\f03d", 72 | picture-o "\f03e", 73 | pencil "\f040", 74 | map-marker "\f041", 75 | adjust "\f042", 76 | tint "\f043", 77 | pencil-square-o "\f044", 78 | share-square-o "\f045", 79 | check-square-o "\f046", 80 | arrows "\f047", 81 | step-backward "\f048", 82 | fast-backward "\f049", 83 | backward "\f04a", 84 | play "\f04b", 85 | pause "\f04c", 86 | stop "\f04d", 87 | forward "\f04e", 88 | fast-forward "\f050", 89 | step-forward "\f051", 90 | eject "\f052", 91 | chevron-left "\f053", 92 | chevron-right "\f054", 93 | plus-circle "\f055", 94 | minus-circle "\f056", 95 | times-circle "\f057", 96 | check-circle "\f058", 97 | question-circle "\f059", 98 | info-circle "\f05a", 99 | crosshairs "\f05b", 100 | times-circle-o "\f05c", 101 | check-circle-o "\f05d", 102 | ban "\f05e", 103 | arrow-left "\f060", 104 | arrow-right "\f061", 105 | arrow-up "\f062", 106 | arrow-down "\f063", 107 | share "\f064", 108 | expand "\f065", 109 | compress "\f066", 110 | plus "\f067", 111 | minus "\f068", 112 | asterisk "\f069", 113 | exclamation-circle "\f06a", 114 | gift "\f06b", 115 | leaf "\f06c", 116 | fire "\f06d", 117 | eye "\f06e", 118 | eye-slash "\f070", 119 | exclamation-triangle "\f071", 120 | plane "\f072", 121 | calendar "\f073", 122 | random "\f074", 123 | comment "\f075", 124 | magnet "\f076", 125 | chevron-up "\f077", 126 | chevron-down "\f078", 127 | retweet "\f079", 128 | shopping-cart "\f07a", 129 | folder "\f07b", 130 | folder-open "\f07c", 131 | arrows-v "\f07d", 132 | arrows-h "\f07e", 133 | bar-chart-o "\f080", 134 | twitter-square "\f081", 135 | facebook-square "\f082", 136 | camera-retro "\f083", 137 | key "\f084", 138 | cogs "\f085", 139 | comments "\f086", 140 | thumbs-o-up "\f087", 141 | thumbs-o-down "\f088", 142 | star-half "\f089", 143 | heart-o "\f08a", 144 | sign-out "\f08b", 145 | linkedin-square "\f08c", 146 | thumb-tack "\f08d", 147 | external-link "\f08e", 148 | sign-in "\f090", 149 | trophy "\f091", 150 | github-square "\f092", 151 | upload "\f093", 152 | lemon-o "\f094", 153 | phone "\f095", 154 | square-o "\f096", 155 | bookmark-o "\f097", 156 | phone-square "\f098", 157 | twitter "\f099", 158 | facebook "\f09a", 159 | github "\f09b", 160 | unlock "\f09c", 161 | credit-card "\f09d", 162 | rss "\f09e", 163 | hdd-o "\f0a0", 164 | bullhorn "\f0a1", 165 | bell "\f0f3", 166 | certificate "\f0a3", 167 | hand-o-right "\f0a4", 168 | hand-o-left "\f0a5", 169 | hand-o-up "\f0a6", 170 | hand-o-down "\f0a7", 171 | arrow-circle-left "\f0a8", 172 | arrow-circle-right "\f0a9", 173 | arrow-circle-up "\f0aa", 174 | arrow-circle-down "\f0ab", 175 | globe "\f0ac", 176 | wrench "\f0ad", 177 | tasks "\f0ae", 178 | filter "\f0b0", 179 | briefcase "\f0b1", 180 | arrows-alt "\f0b2", 181 | users "\f0c0", 182 | link "\f0c1", 183 | cloud "\f0c2", 184 | flask "\f0c3", 185 | scissors "\f0c4", 186 | files-o "\f0c5", 187 | paperclip "\f0c6", 188 | floppy-o "\f0c7", 189 | square "\f0c8", 190 | bars "\f0c9", 191 | list-ul "\f0ca", 192 | list-ol "\f0cb", 193 | strikethrough "\f0cc", 194 | underline "\f0cd", 195 | table "\f0ce", 196 | magic "\f0d0", 197 | truck "\f0d1", 198 | pinterest "\f0d2", 199 | pinterest-square "\f0d3", 200 | google-plus-square "\f0d4", 201 | google-plus "\f0d5", 202 | money "\f0d6", 203 | caret-down "\f0d7", 204 | caret-up "\f0d8", 205 | caret-left "\f0d9", 206 | caret-right "\f0da", 207 | columns "\f0db", 208 | sort "\f0dc", 209 | sort-down "\f0dc", 210 | sort-asc "\f0dd", 211 | sort-desc "\f0de", 212 | envelope "\f0e0", 213 | linkedin "\f0e1", 214 | undo "\f0e2", 215 | gavel "\f0e3", 216 | tachometer "\f0e4", 217 | dashboard "\f0e4", 218 | comment-o "\f0e5", 219 | comments-o "\f0e6", 220 | bolt "\f0e7", 221 | sitemap "\f0e8", 222 | umbrella "\f0e9", 223 | clipboard "\f0ea", 224 | lightbulb-o "\f0eb", 225 | exchange "\f0ec", 226 | cloud-download "\f0ed", 227 | cloud-upload "\f0ee", 228 | user-md "\f0f0", 229 | stethoscope "\f0f1", 230 | suitcase "\f0f2", 231 | bell-o "\f0a2", 232 | coffee "\f0f4", 233 | cutlery "\f0f5", 234 | file-text-o "\f0f6", 235 | building-o "\f0f7", 236 | hospital-o "\f0f8", 237 | ambulance "\f0f9", 238 | medkit "\f0fa", 239 | fighter-jet "\f0fb", 240 | beer "\f0fc", 241 | h-square "\f0fd", 242 | plus-square "\f0fe", 243 | angle-double-left "\f100", 244 | angle-double-right "\f101", 245 | angle-double-up "\f102", 246 | angle-double-down "\f103", 247 | angle-left "\f104", 248 | angle-right "\f105", 249 | angle-up "\f106", 250 | angle-down "\f107", 251 | desktop "\f108", 252 | laptop "\f109", 253 | tablet "\f10a", 254 | mobile "\f10b", 255 | mobile-phone "\f10b", 256 | circle-o "\f10c", 257 | quote-left "\f10d", 258 | quote-right "\f10e", 259 | spinner "\f110", 260 | circle "\f111", 261 | reply "\f112", 262 | github-alt "\f113", 263 | folder-o "\f114", 264 | folder-open-o "\f115", 265 | smile-o "\f118", 266 | frown-o "\f119", 267 | meh-o "\f11a", 268 | gamepad "\f11b", 269 | keyboard-o "\f11c", 270 | flag-o "\f11d", 271 | flag-checkered "\f11e", 272 | terminal "\f120", 273 | code "\f121", 274 | reply-all "\f122", 275 | mail-reply-all "\f122", 276 | star-half-o "\f123", 277 | location-arrow "\f124", 278 | crop "\f125", 279 | code-fork "\f126", 280 | chain-broken "\f127", 281 | question "\f128", 282 | info "\f129", 283 | exclamation "\f12a", 284 | superscript "\f12b", 285 | subscript "\f12c", 286 | eraser "\f12d", 287 | puzzle-piece "\f12e", 288 | microphone "\f130", 289 | microphone-slash "\f131", 290 | shield "\f132", 291 | calendar-o "\f133", 292 | fire-extinguisher "\f134", 293 | rocket "\f135", 294 | maxcdn "\f136", 295 | chevron-circle-left "\f137", 296 | chevron-circle-right "\f138", 297 | chevron-circle-up "\f139", 298 | chevron-circle-down "\f13a", 299 | html5 "\f13b", 300 | css3 "\f13c", 301 | anchor "\f13d", 302 | unlock-alt "\f13e", 303 | bullseye "\f140", 304 | ellipsis-h "\f141", 305 | ellipsis-v "\f142", 306 | rss-square "\f143", 307 | play-circle "\f144", 308 | ticket "\f145", 309 | minus-square "\f146", 310 | minus-square-o "\f147", 311 | level-up "\f148", 312 | level-down "\f149", 313 | check-square "\f14a", 314 | pencil-square "\f14b", 315 | external-link-square "\f14c", 316 | share-square "\f14d", 317 | compass "\f14e", 318 | caret-square-o-down "\f150", 319 | caret-square-o-up "\f151", 320 | caret-square-o-right "\f152", 321 | eur "\f153", 322 | gbp "\f154", 323 | usd "\f155", 324 | inr "\f156", 325 | jpy "\f157", 326 | rub "\f158", 327 | ruble "\f158", 328 | rouble "\f158", 329 | krw "\f159", 330 | btc "\f15a", 331 | file "\f15b", 332 | file-text "\f15c", 333 | sort-alpha-asc "\f15d", 334 | sort-alpha-desc "\f15e", 335 | sort-amount-asc "\f160", 336 | sort-amount-desc "\f161", 337 | sort-numeric-asc "\f162", 338 | sort-numeric-desc "\f163", 339 | thumbs-up "\f164", 340 | thumbs-down "\f165", 341 | youtube-square "\f166", 342 | youtube "\f167", 343 | xing "\f168", 344 | xing-square "\f169", 345 | youtube-play "\f16a", 346 | dropbox "\f16b", 347 | stack-overflow "\f16c", 348 | instagram "\f16d", 349 | flickr "\f16e", 350 | adn "\f170", 351 | bitbucket "\f171", 352 | bitbucket-square "\f172", 353 | tumblr "\f173", 354 | tumblr-square "\f174", 355 | long-arrow-down "\f175", 356 | long-arrow-up "\f176", 357 | long-arrow-left "\f177", 358 | long-arrow-right "\f178", 359 | apple "\f179", 360 | windows "\f17a", 361 | android "\f17b", 362 | linux "\f17c", 363 | dribbble "\f17d", 364 | skype "\f17e", 365 | foursquare "\f180", 366 | trello "\f181", 367 | female "\f182", 368 | male "\f183", 369 | gittip "\f184", 370 | sun-o "\f185", 371 | moon-o "\f186", 372 | archive "\f187", 373 | bug "\f188", 374 | vk "\f189", 375 | weibo "\f18a", 376 | renren "\f18b", 377 | pagelines "\f18c", 378 | stack-exchange "\f18d", 379 | arrow-circle-o-right "\f18e", 380 | arrow-circle-o-left "\f190", 381 | caret-square-o-left "\f191", 382 | toggle-left "\f191", 383 | dot-circle-o "\f192", 384 | wheelchair "\f193", 385 | vimeo-square "\f194", 386 | try "\f195", 387 | plus-square-o "\f196" !default; -------------------------------------------------------------------------------- /core/_mixin.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | //----------------------------------------------------- 3 | // mixin scss 4 | // 包括常用的mixin，%及@function 5 | // mixin，通过@include调用，样式通过拷贝的方式使用，尤其适用于传递参数 6 | // %，通过@extend调用，样式通过组合申明的方式使用，适用于不传参数的代码片段 7 | // @function，返回一个值，用于调用 8 | //----------------------------------------------------- 9 | 10 | // mixin & % 11 | // 既定义了mixin也定义了%，根据需求使用@include或@extend调用 12 | //----------------------------------------------------- 13 | 14 | // inline-block 15 | // ie6-7 *display: inline;*zoom:1; 16 | @mixin inline-block ($extend:true) { 17 | @if $extend { 18 | @extend %inline-block; 19 | } @else { 20 | display: inline-block; 21 | @if $lte7 { 22 | *display: inline;*zoom:1; 23 | } 24 | } 25 | } 26 | %inline-block{ 27 | @include inline-block(false); 28 | } 29 | 30 | // Center-align a block level element 31 | // block得有宽度margin左右为auto才能居中 32 | @mixin center-block ($extend:true) { 33 | @if $extend { 34 | @extend %center-block; 35 | } @else { 36 | margin-left: auto; 37 | margin-right: auto; 38 | } 39 | } 40 | %center-block{ 41 | @include center-block(false); 42 | } 43 | 44 | // float left & right 45 | @mixin float($float:left) { 46 | float: $float; 47 | @if $lte7 { 48 | display: inline; 49 | } 50 | } 51 | %float{ 52 | @include float; 53 | } 54 | 55 | // clearfix 56 | // 闭合子元素的浮动 57 | @mixin clearfix ($extend:true) { 58 | @if $extend { 59 | @extend %clearfix; 60 | } @else { 61 | @if $lte7 { 62 | *zoom: 1; 63 | } 64 | &:before, 65 | &:after { 66 | content: ""; 67 | display: table; 68 | } 69 | &:after { 70 | clear: both; 71 | } 72 | } 73 | } 74 | %clearfix{ 75 | @include clearfix(false); 76 | } 77 | 78 | // Hide from both screenreaders and browsers: h5bp.com/u 79 | // 既隐藏于视觉也隐藏于屏幕浏览器 80 | @mixin hidden ($extend:true) { 81 | @if $extend { 82 | @extend %hidden; 83 | } @else { 84 | display: none !important; 85 | visibility: hidden; 86 | } 87 | } 88 | %hidden{ 89 | @include hidden(false); 90 | } 91 | 92 | // Hide only visually, but have it available for screenreaders 93 | // 只隐藏于视觉，屏幕浏览器可以阅读 94 | @mixin visually-hidden ($extend:true) { 95 | @if $extend { 96 | @extend %visually-hidden; 97 | } @else { 98 | position: absolute; 99 | @if $lte7 { 100 | clip:rect(1px 1px 1px 1px);//ie6/7 101 | } 102 | clip:rect(1px, 1px, 1px, 1px);//standard 103 | } 104 | } 105 | %visually-hidden{ 106 | @include visually-hidden(false); 107 | } 108 | 109 | // ul has list style 110 | @mixin ul-has-style($style:disc){ 111 | margin-left:25px; 112 | list-style:disc; 113 | } 114 | %ul-has-style{ 115 | @include ul-has-style; 116 | } 117 | 118 | // 图片替换文字 119 | // 高级浏览器直接2就可以 120 | // 原生7,8不支持color的transparent，所以采用1; 121 | // ie6用1会有一条细线，所以采用3 122 | // 如果要兼容ie6，使用的时候请确定元素设置高度。 123 | @mixin ir($height:99){ 124 | font: 0/0 a; //1 125 | text-shadow: none; 126 | border:0 none; 127 | color: transparent; //2 128 | @if $lte7{ 129 | _overflow:hidden; //3 130 | _font-size: 10px; //3 131 | _line-height: $height; //3 132 | } 133 | } 134 | %ir{ 135 | @include ir; 136 | } 137 | 138 | // Text overflow 139 | // 元素可以设置宽度才可应用省略号 140 | %ellipsis-basic{ 141 | overflow: hidden; 142 | text-overflow: ellipsis; 143 | white-space: nowrap; 144 | } 145 | @mixin ellipsis($width:100%) { 146 | @extend %ellipsis-basic; 147 | width:$width; 148 | } 149 | 150 | // Opacity 151 | // lte8使用filter兼容 152 | @mixin opacity($opacity:50) { 153 | opacity: $opacity / 100; 154 | @if $filter{ 155 | filter: alpha(opacity=$opacity); 156 | } 157 | } 158 | %opacity{ 159 | @include opacity; 160 | } 161 | 162 | // triangle 163 | %triangle-basic{ 164 | content:""; 165 | height: 0; 166 | width: 0; 167 | overflow:hidden; 168 | } 169 | @mixin triangle($direction, $size, $borderColor ) { 170 | @extend %triangle-basic; 171 | @if $direction == top { 172 | border-bottom:$size solid $borderColor; 173 | border-left:$size dashed transparent; 174 | border-right:$size dashed transparent; 175 | } 176 | @else if $direction == right { 177 | border-left:$size solid $borderColor; 178 | border-top:$size dashed transparent; 179 | border-bottom:$size dashed transparent; 180 | } 181 | @else if $direction == bottom { 182 | border-top:$size solid $borderColor; 183 | border-left:$size dashed transparent; 184 | border-right:$size dashed transparent; 185 | } 186 | @else if $direction == left { 187 | border-right:$size solid $borderColor; 188 | border-top:$size dashed transparent; 189 | border-bottom:$size dashed transparent; 190 | } 191 | } 192 | 193 | //黑色背景色半透明 194 | @mixin bgcolor-alpha($bgcolor: rgba(0,0,0,.5)){ 195 | color:#fff; 196 | @if $filter{ 197 | filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#{ie-hex-str($bgcolor)}', endColorstr='#{ie-hex-str($bgcolor)}'); 198 | }@else{ 199 | background-color: #333; 200 | } 201 | background-color:$bgcolor; 202 | } 203 | %bgcolor-alpha{ 204 | @include bgcolor-alpha; 205 | } 206 | 207 | // disabled 208 | // 禁用样式，加!important 209 | @mixin disabled($bgColor:#e6e6e6,$textColor:#ababab){ 210 | background-color: $bgColor !important; 211 | color: $textColor !important; 212 | cursor: not-allowed !important; 213 | } 214 | %disabled{ 215 | @include disabled; 216 | } 217 | 218 | // 水平间隔线，适用于行列表 219 | @mixin horizontal-line($border:1px dashed $gray, $padding:10px){ 220 | border-bottom:$border; 221 | padding-top:$padding; 222 | padding-bottom:$padding; 223 | } 224 | %horizontal-line{ 225 | @include horizontal-line; 226 | } 227 | 228 | 229 | // mixin 230 | // 只定义了mixin，所以只能通过@include来调用 231 | //----------------------------------------------------- 232 | 233 | // rem 234 | // thanks:http://drublic.de/blog/rem-fallback-sass-less/; 235 | // @include rem(width,20) -> width: 280px; width: 20rem; 236 | @mixin rem($property, $px) { 237 | #{$property}: $px * $baseFontSize; 238 | #{$property}: #{$px}rem; 239 | } 240 | // @include rem-font-size(2) -> font-size: 28px; font-size: 2rem; 241 | @mixin rem-font-size($px) { 242 | font-size: $px * $baseFontSize; 243 | font-size: #{$px}rem; 244 | } 245 | 246 | //最小高度 247 | @mixin min-height($height){ 248 | min-height: $height; 249 | height: auto !important; 250 | @if $lte7{ 251 | _height: $height; 252 | } 253 | } 254 | 255 | // Retina images. 256 | // @include image-2x("../images/img-2x.png", 200px, 200px); 257 | // Use with care - http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss 258 | @mixin image-2x($url, $width, $height) { 259 | @media (min--moz-device-pixel-ratio: 1.3), 260 | (-o-min-device-pixel-ratio: 2.6/2), 261 | (-webkit-min-device-pixel-ratio: 1.3), 262 | (min-device-pixel-ratio: 1.3), 263 | (min-resolution: 1.3dppx) { 264 | // on retina, use image that's scaled by 2 265 | background-image: url('#{$url}'); 266 | background-size: $width $height; 267 | } 268 | } 269 | 270 | // 针对火狐浏览器打bug 271 | // @include firefox{.test{padding-bottom:3px;}} 272 | @mixin firefox { 273 | @-moz-document url-prefix(){ 274 | @content; 275 | } 276 | } 277 | 278 | 279 | // % 280 | // 只定义了%，所以只能通过@extend来调用 281 | //----------------------------------------------------- 282 | 283 | //为高级浏览器准备的box-sizing盒子模型，ie8+ 284 | %box-sizing-border{ 285 | @include box-sizing; 286 | } 287 | 288 | // 普通all transition特效 289 | %all-transition{ 290 | @include transition; 291 | } 292 | 293 | // ie6/7 haslayout 294 | %zoom{ 295 | @if $lte7 { 296 | *zoom:1; 297 | } 298 | } 299 | 300 | // 垂直渐变，渐变背景是半透明到全透明，这样就可以通过设置背景色来表现渐变 301 | //------------------------- 302 | // 白色，由半透明到全透明 303 | %gradient-linear-light { 304 | // IE9 SVG, needs conditional override of 'filter' to 'none' 305 | background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjMiLz4KICAgIDxzdG9wIG9mZnNldD0iNDYlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); 306 | @include gradient-vertical(rgba(255,255,255,0.3),rgba(255,255,255,0)); 307 | @if $filter{ 308 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-8 */ 309 | :root &{ 310 | @extend %reset-filter; 311 | } 312 | } 313 | } 314 | // 黑色，由全透明到半透明 315 | %gradient-linear-dark { 316 | // IE9 SVG, needs conditional override of 'filter' to 'none' 317 | background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4yNSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 318 | @include gradient-vertical(rgba(0,0,0,0), rgba(0,0,0,0.25)); 319 | @if $filter{ 320 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#40000000',GradientType=0 ); /* IE6-8 */ 321 | :root &{ 322 | @extend %reset-filter; 323 | } 324 | } 325 | } 326 | // Reset gradient filters for IE 327 | %reset-filter{ 328 | filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); 329 | } 330 | 331 | 332 | //function 333 | //----------------------------------------------------- 334 | 335 | // px转em 336 | @function pxToEm($px, $base: 16) { 337 | @return ($px / $base) * 1em; 338 | } 339 | 340 | // 为颜色添加白色，以百分比形式 341 | @function tint($color, $percent){ 342 | @return mix(white, $color, $percent); 343 | } 344 | 345 | // 为颜色添加黑色，以百分比形式 346 | @function shade($color, $percent){ 347 | @return mix(black, $color, $percent); 348 | } 349 | 350 | 351 | // 定义一些常见元素的简单样式(btn,table,form) 352 | // 这里只是满足简单的使用，更全更好的请参考各自的组件 353 | //----------------------------------------------------- 354 | 355 | // btn 356 | // @include simple-btn; 357 | // @include simple-btn(true); 358 | // @include simple-btn($bgColor:$green); 359 | @mixin simple-btn($formbtn:false, $bgColor: $primary, $textColor:$white){ 360 | @include inline-block; 361 | vertical-align: middle; 362 | cursor: pointer; 363 | text-align: center; 364 | 365 | font-size: 12px; 366 | padding:0 15px; 367 | @if $formbtn { 368 | height: 28px; 369 | }@else{ 370 | line-height: 28px; 371 | } 372 | color: $textColor; 373 | background-color: $bgColor; 374 | border:0 none; 375 | 376 | &:hover{ 377 | color: $textColor; 378 | background-color: darken($bgColor,5%); 379 | } 380 | } 381 | 382 | // table 383 | // @include simple-table; 384 | // @include simple-table(false); 385 | // @include simple-table(true, $thBgColor: $orange); 386 | @mixin simple-table($th:true, $borderColor: $gray, $thBgColor: $primary, $thTextColor:$white){ 387 | width: 100%; 388 | border-collapse: collapse; 389 | border-spacing: 0; 390 | margin-bottom: $baseGap; 391 | 392 | & th, 393 | & td{ 394 | border:1px solid $borderColor; 395 | } 396 | 397 | th,td{ 398 | padding: 8px; 399 | text-align: left; 400 | } 401 | // 如果 402 | @if $th{ 403 | th{ 404 | color: $thTextColor; 405 | background-color: $thBgColor; 406 | border-color:$thBgColor; 407 | border-bottom:0 none; 408 | } 409 | } 410 | } 411 | 412 | // input, select, textarea的基础样式 413 | // 边框，padding 414 | %simple-form-basic{ 415 | border: 1px solid $gray; 416 | padding: 4px; 417 | vertical-align: middle; 418 | &:focus{ 419 | outline: 0 none; 420 | } 421 | } 422 | 423 | // 输入框 424 | @mixin simple-text($borderColorFocus: #52a8ec){ 425 | @extend %simple-form-basic; 426 | height: 18px; 427 | 428 | @include transition(border linear 0.2s, box-shadow linear 0.2s); 429 | @include box-shadow(inset 0 1px 3px rgba(0, 0, 0, 0.1)); 430 | 431 | &:focus{ 432 | border-color: rgba($borderColorFocus, 0.8); 433 | @include box-shadow(inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba($borderColorFocus, 0.6)); 434 | } 435 | } 436 | %simple-text{ 437 | @include simple-text; 438 | } 439 | 440 | // textarea 441 | @mixin simple-textarea($borderColorFocus:#52a8ec, $width:500px, $height:80px){ 442 | @include simple-text($borderColorFocus); 443 | height: $height; 444 | width: $width; 445 | vertical-align: top; 446 | } 447 | %simple-textarea{ 448 | @include simple-textarea; 449 | } 450 | 451 | // select 452 | %simple-select{ 453 | @extend %simple-form-basic; 454 | 455 | // select lte ie7 456 | // ie6,7 不支持select的padding 457 | @if $lte7 { 458 | *margin-top:5px; 459 | *margin-bottom:5px; 460 | *vertical-align:top; 461 | } 462 | } 463 | 464 | // radio & checkbox 的重置 465 | %reset-radio-checkbox{ 466 | margin:0 5px 0 0; 467 | padding:0; 468 | font-size: 13px; 469 | //ie6,7得设置宽度和高度才能表现和其他浏览器一样的重置 470 | //radio和checkbox的大小为13px 471 | @if $lte7 { 472 | *width:13px; 473 | *height:13px; 474 | } 475 | } -------------------------------------------------------------------------------- /core/_reset.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | //----------------------------------------------------- 3 | // reset scss 4 | // 包括normalize，清零重置，打印样式三大部分 5 | //----------------------------------------------------- 6 | 7 | // normalize 3.1 8 | // http://necolas.github.io/normalize.css/ 9 | //----------------------------------------------------- 10 | 11 | /** 12 | * 1. Set default font family to sans-serif. 13 | * 2. Prevent iOS text size adjust after orientation change, without disabling 14 | * user zoom. 15 | * 0. sassCore's style 16 | */ 17 | 18 | html { 19 | font-family: sans-serif; /* 1 */ 20 | -ms-text-size-adjust: 100%; /* 2 */ 21 | -webkit-text-size-adjust: 100%; /* 2 */ 22 | overflow-y: scroll; /* 0 */ 23 | -webkit-overflow-scrolling: touch; /* 0 */ 24 | } 25 | 26 | /** 27 | * 1. Remove default margin 28 | * 0. sassCore's style. 29 | */ 30 | 31 | body { 32 | margin: 0; /* 1 */ 33 | font-size: $baseFontSize; /* 0 */ 34 | line-height: $baseLineHeight; /* 0 */ 35 | color:$textColor; /* 0 */ 36 | background-color:$bodyBgColor; /* 0 */ 37 | } 38 | 39 | /* HTML5 display definitions 40 | ========================================================================== */ 41 | 42 | /** 43 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 44 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. 45 | * Correct `block` display not defined for `main` in IE 11. 46 | */ 47 | 48 | article, 49 | aside, 50 | details, 51 | figcaption, 52 | figure, 53 | footer, 54 | header, 55 | hgroup, 56 | main, 57 | nav, 58 | section, 59 | summary { 60 | display: block; 61 | } 62 | 63 | /** 64 | * 1. Correct `inline-block` display not defined in IE 8/9. 65 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 66 | * 3. Correct `inline-block` display in IE 6/7. 67 | */ 68 | 69 | audio, 70 | canvas, 71 | progress, 72 | video { 73 | display: inline-block; /* 1 */ 74 | vertical-align: baseline; /* 2 */ 75 | 76 | @if $lte7 { 77 | *display: inline; /* 3 */ 78 | *zoom: 1; /* 3 */ 79 | } 80 | } 81 | 82 | /** 83 | * Prevent modern browsers from displaying `audio` without controls. 84 | * Remove excess height in iOS 5 devices. 85 | */ 86 | 87 | audio:not([controls]) { 88 | display: none; 89 | height: 0; 90 | } 91 | 92 | /** 93 | * Address `[hidden]` styling not present in IE 8/9/10. 94 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 95 | */ 96 | 97 | [hidden], 98 | template { 99 | display: none; 100 | } 101 | 102 | 103 | /* Links 104 | ========================================================================== */ 105 | 106 | /** 107 | * 1. Remove the gray background color from active links in IE 10. 108 | * 2. Improve readability when focused and also mouse hovered in all browsers. 109 | * 0. sassCore's style. 110 | */ 111 | 112 | a { 113 | background: transparent; /* 1 */ 114 | 115 | &:active, 116 | &:hover { 117 | outline: 0; /* 2 */ 118 | } 119 | 120 | /* 0 */ 121 | text-decoration:none; 122 | @if length($linkColor) > 1{ 123 | color:nth($linkColor,1); 124 | &:hover{ 125 | color:nth($linkColor,2); 126 | } 127 | } @else { 128 | color:$linkColor; 129 | &:hover{ 130 | color:darken($linkColor,10%); 131 | } 132 | } 133 | } 134 | 135 | /* Text-level semantics 136 | ========================================================================== */ 137 | 138 | /** 139 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 140 | */ 141 | 142 | abbr[title] { 143 | border-bottom: 1px dotted; 144 | } 145 | 146 | /** 147 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 148 | */ 149 | 150 | b, 151 | strong { 152 | font-weight: bold; 153 | } 154 | 155 | /** 156 | * Address styling not present in Safari and Chrome. 157 | */ 158 | 159 | dfn { 160 | font-style: italic; 161 | } 162 | 163 | /** 164 | * Address styling not present in IE 8/9. 165 | */ 166 | 167 | mark { 168 | background: #ff0; 169 | color: #000; 170 | } 171 | 172 | /** 173 | * Address inconsistent and variable font size in all browsers. 174 | */ 175 | 176 | small { 177 | font-size: 80%; 178 | } 179 | 180 | /** 181 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 182 | */ 183 | 184 | sub, 185 | sup { 186 | font-size: 75%; 187 | line-height: 0; 188 | position: relative; 189 | vertical-align: baseline; 190 | } 191 | 192 | sup { 193 | top: -0.5em; 194 | } 195 | 196 | sub { 197 | bottom: -0.25em; 198 | } 199 | 200 | /* Embedded content 201 | ========================================================================== */ 202 | 203 | /** 204 | * 1. Remove border when inside `a` element in IE 8/9/10. 205 | * 2. Improve image quality when scaled in IE 7. 206 | * 0. sassCore's style. 207 | */ 208 | 209 | img { 210 | border: 0; /* 1 */ 211 | vertical-align: middle; /* 0 */ 212 | 213 | @if $lte7 { 214 | -ms-interpolation-mode: bicubic; /* 2 */ 215 | } 216 | } 217 | 218 | /** 219 | * Correct overflow not hidden in IE 9/10/11. 220 | */ 221 | 222 | svg:not(:root) { 223 | overflow: hidden; 224 | } 225 | 226 | 227 | /* Grouping content 228 | ========================================================================== */ 229 | 230 | /** 231 | * Address differences between Firefox and other browsers. 232 | */ 233 | 234 | hr { 235 | -moz-box-sizing: content-box; 236 | box-sizing: content-box; 237 | height: 0; 238 | } 239 | 240 | /** 241 | * 1. Contain overflow in all browsers. 242 | * 2. Improve readability of pre-formatted text in all browsers. 243 | */ 244 | 245 | pre { 246 | overflow: auto; /* 1 */ 247 | white-space: pre; /* 2 */ 248 | white-space: pre-wrap; /* 2 */ 249 | word-wrap: break-word; /* 2 */ 250 | } 251 | 252 | /** 253 | * 1. Address odd `em`-unit font size rendering in all browsers. 254 | * 2. Correct font family set oddly in IE 6, Safari 4/5, and Chrome. 255 | */ 256 | 257 | code, 258 | kbd, 259 | pre, 260 | samp { 261 | font-family: monospace, monospace; /* 1 */ 262 | @if $lte7 { 263 | _font-family: 'courier new', monospace; /* 1 */ 264 | } 265 | font-size: 1em; /* 2 */ 266 | } 267 | 268 | /* Forms 269 | ========================================================================== */ 270 | 271 | /** 272 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 273 | * styling of `select`, unless a `border` property is set. 274 | */ 275 | 276 | /** 277 | * 1. Correct color not being inherited. 278 | * Known issue: affects color of disabled elements. 279 | * 2. Correct font properties not being inherited. 280 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 281 | */ 282 | 283 | button, 284 | input, 285 | optgroup, 286 | select, 287 | textarea { 288 | color: inherit; /* 1 */ 289 | font: inherit; /* 2 */ 290 | margin: 0; /* 3 */ 291 | } 292 | 293 | /** 294 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 295 | */ 296 | 297 | button { 298 | overflow: visible; 299 | } 300 | 301 | /** 302 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 303 | * All other form control elements do not inherit `text-transform` values. 304 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 305 | * Correct `select` style inheritance in Firefox. 306 | */ 307 | 308 | button, 309 | select { 310 | text-transform: none; 311 | } 312 | 313 | /** 314 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 315 | * and `video` controls. 316 | * 2. Correct inability to style clickable `input` types in iOS. 317 | * 3. Improve usability and consistency of cursor style between image-type 318 | * `input` and others. 319 | * 4. Remove inner spacing in IE 7 without affecting normal text inputs. 320 | * Known issue: inner spacing remains in IE 6. 321 | */ 322 | 323 | button, 324 | html input[type="button"], /* 1 */ 325 | input[type="reset"], 326 | input[type="submit"] { 327 | -webkit-appearance: button; /* 2 */ 328 | cursor: pointer; /* 3 */ 329 | @if $lte7 { 330 | *overflow: visible; /* 4 */ 331 | } 332 | } 333 | 334 | /** 335 | * Re-set default cursor for disabled elements. 336 | */ 337 | 338 | button[disabled], 339 | html input[disabled] { 340 | cursor: default; 341 | } 342 | 343 | /** 344 | * Remove inner padding and border in Firefox 4+. 345 | */ 346 | 347 | button::-moz-focus-inner, 348 | input::-moz-focus-inner { 349 | border: 0; 350 | padding: 0; 351 | } 352 | 353 | /** 354 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 355 | * the UA stylesheet. 356 | */ 357 | 358 | input { 359 | line-height: normal; 360 | } 361 | 362 | /** 363 | * It's recommended that you don't attempt to style these elements. 364 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 365 | * 366 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 367 | * 2. Remove excess padding in IE 8/9/10. 368 | * 3. Remove excess padding in IE 7. 369 | * Known issue: excess padding remains in IE 6. 370 | */ 371 | 372 | input[type="checkbox"], 373 | input[type="radio"] { 374 | box-sizing: border-box; /* 1 */ 375 | padding: 0; /* 2 */ 376 | 377 | @if $lte7 { 378 | *height: 13px; /* 3 */ 379 | *width: 13px; /* 3 */ 380 | } 381 | } 382 | 383 | /** 384 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 385 | * `font-size` values of the `input`, it causes the cursor style of the 386 | * decrement button to change from `default` to `text`. 387 | */ 388 | 389 | input[type="number"]::-webkit-inner-spin-button, 390 | input[type="number"]::-webkit-outer-spin-button { 391 | height: auto; 392 | } 393 | 394 | /** 395 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 396 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 397 | * (include `-moz` to future-proof). 398 | */ 399 | 400 | input[type="search"] { 401 | -webkit-appearance: textfield; /* 1 */ 402 | -moz-box-sizing: content-box; 403 | -webkit-box-sizing: content-box; /* 2 */ 404 | box-sizing: content-box; 405 | } 406 | 407 | /** 408 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 409 | * Safari (but not Chrome) clips the cancel button when the search input has 410 | * padding (and `textfield` appearance). 411 | */ 412 | 413 | input[type="search"]::-webkit-search-cancel-button, 414 | input[type="search"]::-webkit-search-decoration { 415 | -webkit-appearance: none; 416 | } 417 | 418 | /** 419 | * Define consistent border, margin, and padding. 420 | */ 421 | 422 | fieldset { 423 | border: 1px solid #c0c0c0; 424 | margin: 0 2px; 425 | padding: 0.35em 0.625em 0.75em; 426 | } 427 | 428 | /** 429 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 430 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 431 | * 3. Correct alignment displayed oddly in IE 6/7. 432 | */ 433 | 434 | legend { 435 | border: 0; /* 1 */ 436 | padding: 0; /* 2 */ 437 | 438 | @if $lte7 { 439 | *margin-left: -7px; /* 3 */ 440 | } 441 | } 442 | 443 | /** 444 | * 1. Remove default vertical scrollbar in IE 8/9/10/11. 445 | * 0. sassCore's style 446 | */ 447 | 448 | textarea { 449 | overflow: auto; /* 1 */ 450 | resize: vertical; /* 0 */ 451 | } 452 | 453 | /** 454 | * Don't inherit the `font-weight` (applied by a rule above). 455 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 456 | */ 457 | 458 | optgroup { 459 | font-weight: bold; 460 | } 461 | 462 | /* Tables 463 | ========================================================================== */ 464 | 465 | /** 466 | * Remove most spacing between table cells. 467 | */ 468 | 469 | table { 470 | border-collapse: collapse; 471 | border-spacing: 0; 472 | } 473 | 474 | td, 475 | th { 476 | padding: 0; 477 | } 478 | 479 | /** 480 | * Address CSS quotes not supported in IE 6/7. 481 | */ 482 | @if $lte7 { 483 | q { 484 | quotes: none; 485 | } 486 | } 487 | 488 | 489 | // 根据使用习惯，对normalize上进行补充 490 | //----------------------------------------------------- 491 | html, 492 | button, 493 | input, 494 | select, 495 | textarea{ 496 | font-family: $baseFontFamily; 497 | } 498 | h1,h2,h3,h4,h5,h6,p,figure,form,blockquote { 499 | margin:0; 500 | } 501 | // ul ol dl 502 | ul,ol,li,dl,dd{ 503 | margin: 0; 504 | padding:0; 505 | } 506 | ul,ol{ 507 | list-style: none outside none; 508 | } 509 | 510 | // hn 511 | h1,h2,h3{ 512 | line-height: 2; 513 | font-weight: normal; 514 | } 515 | h1 { 516 | font-size:$baseFontSize * 1.5; 517 | } 518 | h2 { 519 | font-size:$baseFontSize * 1.3; 520 | } 521 | h3 { 522 | font-size:$baseFontSize * 1.17; 523 | } 524 | h4 { 525 | font-size:$baseFontSize; 526 | } 527 | h5,h6 { 528 | font-size:$baseFontSize * 0.85; 529 | text-transform:uppercase; 530 | } 531 | 532 | // 表单placeholder样式 533 | // 注意不可联合申明，否则无效 534 | @if nth($placeholder,1) { 535 | // Firefox 4-18 536 | input:-moz-placeholder, 537 | textarea:-moz-placeholder { 538 | color: nth($placeholder,2); 539 | } 540 | // Firefox 19+ 541 | input::-moz-placeholder, 542 | textarea::-moz-placeholder{ 543 | color: nth($placeholder,2); 544 | } 545 | // Internet Explorer 10+ 546 | input:-ms-input-placeholder, 547 | textarea:-ms-input-placeholder{ 548 | color: nth($placeholder,2); 549 | } 550 | // Safari and Chrome 551 | input::-webkit-input-placeholder, 552 | textarea::-webkit-input-placeholder{ 553 | color: nth($placeholder,2); 554 | } 555 | } 556 | 557 | 558 | // 打印样式 559 | // 通过变量$printStyleSwitch来设置是否输出 560 | // 来自于html5 boilerplate:http://html5boilerplate.com/ 561 | //----------------------------------------------------- 562 | @if $printStyleSwitch { 563 | @media print { 564 | * { 565 | background: transparent !important; 566 | color: #000 !important; // Black prints faster: h5bp.com/s 567 | box-shadow: none !important; 568 | text-shadow: none !important; 569 | } 570 | 571 | a, 572 | a:visited { 573 | text-decoration: underline; 574 | } 575 | 576 | a[href]:after { 577 | content: " (" attr(href) ")"; 578 | } 579 | 580 | abbr[title]:after { 581 | content: " (" attr(title) ")"; 582 | } 583 | 584 | // Don't show links for images, or javascript/internal links 585 | 586 | .ir a:after, 587 | a[href^="javascript:"]:after, 588 | a[href^="#"]:after { 589 | content: ""; 590 | } 591 | 592 | pre, 593 | blockquote { 594 | border: 1px solid #999; 595 | page-break-inside: avoid; 596 | } 597 | 598 | thead { 599 | display: table-header-group; // h5bp.com/t 600 | } 601 | 602 | tr, 603 | img { 604 | page-break-inside: avoid; 605 | } 606 | 607 | img { 608 | max-width: 100% !important; 609 | } 610 | 611 | @page { 612 | margin: 0.5cm; 613 | } 614 | 615 | p, 616 | h2, 617 | h3 { 618 | orphans: 3; 619 | widows: 3; 620 | } 621 | 622 | h2, 623 | h3 { 624 | page-break-after: avoid; 625 | } 626 | } 627 | } 628 | -------------------------------------------------------------------------------- /core/_css3.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | //----------------------------------------------------- 3 | // css3 scss 4 | // thanks: 5 | // http://bourbon.io/ 6 | // https://github.com/thomas-mcdonald/bootstrap-sass/blob/master/vendor/assets/stylesheets/bootstrap/_mixins.scss 7 | // 关于css3的flex详细介绍可参考：https://github.com/marvin1023/flex-scss 8 | //----------------------------------------------------- 9 | 10 | 11 | // 各个浏览器的属性前缀，true表示开启，false表示不开启 12 | //----------------------------------------------------- 13 | $prefixForWebkit: true !default; 14 | $prefixForMozilla: true !default; 15 | $prefixForMicrosoft: true !default; 16 | $prefixForOpera: false !default; //opera从版本15开始转向webkit，所以默认为false，不输出o前缀 17 | $prefixNo: true !default; 18 | 19 | // 用于flex的兼容变量 20 | $flexOld: true !default; //09版本 用于兼容移动端，-webkit前缀 21 | $flexMid: true !default; //用于ie10 -ms前缀 22 | 23 | 24 | // prefixer 25 | // 用于在属性上加前缀 26 | // 默认这里将只输出webkit前缀和标准（如果要开启opera的可以将$prefixForOpera设置为true） 27 | //----------------------------------------------------- 28 | @mixin prefixer($property, $value, $prefixes: o webkit) { 29 | @each $prefix in $prefixes { 30 | @if $prefix == webkit and $prefixForWebkit == true { 31 | -webkit-#{$property}: $value; 32 | } 33 | @else if $prefix == moz and $prefixForMozilla == true { 34 | -moz-#{$property}: $value; 35 | } 36 | @else if $prefix == ms and $prefixForMicrosoft == true { 37 | -ms-#{$property}: $value; 38 | } 39 | @else if $prefix == o and $prefixForOpera == true { 40 | -o-#{$property}: $value; 41 | } 42 | } 43 | @if $prefixNo { 44 | #{$property}: $value; 45 | } 46 | } 47 | 48 | // prefixer-value 49 | // 用于在值上加前缀 50 | // 默认这里将输出webkit前缀，moz前缀和标准 51 | @mixin prefixer-value($property, $value, $prefixes: webkit moz) { 52 | @each $prefix in $prefixes { 53 | @if $prefix == webkit and $prefixForWebkit == true { 54 | #{$property}: -webkit-#{$value}; 55 | } 56 | @else if $prefix == moz and $prefixForMozilla == true { 57 | #{$property}: -moz-#{$value}; 58 | } 59 | @else if $prefix == o and $prefixForMozilla == true { 60 | #{$property}: -o-#{$value}; 61 | } 62 | @else if $prefix == ms and $prefixForMicrosoft == true { 63 | #{$property}: -ms-#{$value}; 64 | } 65 | } 66 | @if $prefixNo { 67 | #{$property}: $value; 68 | } 69 | } 70 | 71 | // disable prefix 72 | // 设置所有前缀和标准为false，用于@keyframes 73 | @mixin disable-prefix-for-all() { 74 | $prefixForWebkit: false !global; 75 | $prefixForMozilla: false !global; 76 | $prefixForMicrosoft: false !global; 77 | $prefixForOpera: false !global; 78 | $prefixNo: false !global; 79 | } 80 | 81 | // Return vendor-prefixed property names if appropriate 82 | // 将transition-property中的需要加前缀的属性添加相应的前缀，如transform 83 | // transitionPropertyNames((transform, color, background), moz) -> -moz-transform, color, background 84 | //----------------------------------------------------- 85 | @function transitionPropertyName($prop, $vendor: false) { 86 | // put other properties that need to be prefixed here aswell 87 | @if $vendor == webkit and $prefixForWebkit == true and $prop == transform { 88 | @return unquote('-webkit-'+$prop); 89 | } 90 | @if $vendor == moz and $prefixForMozilla == true and $prop == transform { 91 | @return unquote('-moz-'+$prop); 92 | } 93 | @if $vendor == o and $prefixForOpera == true and $prop == transform { 94 | @return unquote('-o-'+$prop); 95 | } 96 | @else { 97 | @return $prop; 98 | } 99 | } 100 | 101 | @function transitionPropertyNames($props, $vendor: false) { 102 | $new-props: (); 103 | @each $prop in $props { 104 | $new-props: append($new-props, transitionPropertyName($prop, $vendor), comma); 105 | } 106 | @return $new-props; 107 | } 108 | 109 | // Border Radius 110 | // 不建议使用 111 | //----------------------------------------------------- 112 | @mixin border-radius($radius: $baseRadius) { 113 | // @include prefixer(border-radius, $radius, webkit); 114 | border-radius:$radius; 115 | } 116 | 117 | // border-image 118 | // http://border-image.com/ 119 | @mixin border-image($image){ 120 | @include prefixer(border-image, $image); 121 | } 122 | 123 | // box-sizing 124 | @mixin box-sizing($type: border-box) { 125 | // border-box | padding-box | content-box 126 | @include prefixer(box-sizing, $type, webkit moz o); 127 | } 128 | 129 | // box-shadow 130 | @mixin box-shadow($shadow...) { 131 | @if length($shadow) >= 1 { 132 | @include prefixer(box-shadow, $shadow); 133 | } @else{ 134 | $shadow:0 0 4px rgba(0,0,0,.3); 135 | @include prefixer(box-shadow, $shadow); 136 | } 137 | } 138 | 139 | // appearance 140 | @mixin appearance($value) { 141 | @include prefixer(appearance, $value, webkit moz); 142 | } 143 | 144 | // hyphens 145 | @mixin hyphens($value: auto) { 146 | // none | manual | auto 147 | @include prefixer(hyphens, $value, webkit moz); 148 | } 149 | 150 | // image-rendering 151 | // https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering 152 | @mixin image-rendering($rendering: crisp-edges) { 153 | @if $rendering == crisp-edges{ 154 | image-rendering: -moz-crisp-edges; /* Firefox */ 155 | image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */ 156 | image-rendering: crisp-edges; 157 | -ms-interpolation-mode: nearest-neighbor; 158 | } @else { 159 | @include prefixer-value(image-rendering, webkit moz); 160 | } 161 | } 162 | 163 | // User select 164 | // https://developer.mozilla.org/en-US/docs/Web/CSS/user-select 165 | @mixin user-select($arg: text) { 166 | // none | text | all | element 167 | @include prefixer(user-select, $arg); 168 | } 169 | 170 | // http://www.css3files.com/font/ 171 | // 1 The eot fontfile. Can be omitted if you don`t want to support Internet Explorer prior to version 9 (including semicolon). 172 | // 2 Can also be omitted for Internet Explorer < 9. ?iefix prevents IE6 from interpreting all of the following. If the whole IE family (6 to 9) should be supported, 1 and 2 are needed. 173 | // 3 Can be omitted if iPad versions prior to iOS 4.2 shouldn’t be supported. 174 | // 4 The ttf fontfile. Necessary to support (Mobile) Safari and Opera. 175 | // 5 The woff fontfile for all modern browsers (best choice). 176 | @mixin font-face($font-family, $file-path, $weight: normal, $style: normal ) { 177 | @font-face { 178 | font-family: $font-family; 179 | font-weight: $weight; 180 | font-style: $style; 181 | src: url('#{$file-path}.eot'); // 1 182 | src: url('#{$file-path}.eot?#iefix') format('eot'), // 2 183 | url('#{$file-path}.svg##{$font-family}') format('svg'), // 3 184 | url('#{$file-path}.woff') format('woff'), // 4 185 | url('#{$file-path}.ttf') format('truetype'); //5 186 | } 187 | } 188 | 189 | 190 | // Background-image 191 | //----------------------------------------------------- 192 | @mixin background-clip($clip) { 193 | // border-box | padding-box | content-box 194 | @if length($clip) >= 1 { 195 | @include prefixer(background-clip, $clip, webkit); 196 | } @else { 197 | @include prefixer(background-clip, padding-box, webkit); 198 | } 199 | } 200 | 201 | @mixin background-origin($origin...) { 202 | // border-box | padding-box | content-box 203 | @if length($origin) >= 1 { 204 | @include prefixer(background-origin, $origin, webkit); 205 | } @else { 206 | @include prefixer(background-origin, border-box, webkit); 207 | } 208 | } 209 | 210 | @mixin background-size($size...) { 211 | // | auto | cover | contain 212 | @if length($size) >= 1 { 213 | @include prefixer(background-size, $size, webkit); 214 | } @else { 215 | @include prefixer(background-size, cover, webkit); 216 | } 217 | } 218 | 219 | 220 | // Gradients 221 | // Firefox 10+, Opera 11.6+, Chrome 26+ and IE10 also support the new "to (side)" syntax. 222 | //----------------------------------------------------- 223 | // 水平渐变，从左往右 224 | // @include gradient-horizontal(#333, #ccc); 225 | @mixin gradient-horizontal($gradient...){ 226 | background-image: -webkit-linear-gradient(left, $gradient); // Safari 5.1+, Chrome 10+ 227 | background-image: -o-linear-gradient(left, $gradient); // Opera 11.10 228 | background-image: linear-gradient(to right, $gradient); // Standard, IE10 229 | } 230 | // 水平渐变，从左往右，平铺 231 | // @include gradient-horizontal-repeating(#333 5%, #ccc 10%); 232 | @mixin gradient-horizontal-repeating($gradient...){ 233 | background-image: -webkit-repeating-linear-gradient(left, $gradient); // Safari 5.1+, Chrome 10+ 234 | background-image: -o-repeating-linear-gradient(left, $gradient); // Opera 11.10 235 | background-image: repeating-linear-gradient(to right, $gradient); // Standard, IE10 236 | } 237 | // 垂直渐变，从上往下 238 | // @include gradient-vertical(#333 30%, #ccc); 239 | @mixin gradient-vertical($gradient...) { 240 | background-image: -webkit-linear-gradient(top, $gradient); // Safari 5.1+, Chrome 10+ 241 | background-image: -o-linear-gradient(top, $gradient); // Opera 11.10 242 | background-image: linear-gradient(to bottom, $gradient); // Standard, IE10 243 | } 244 | // 垂直渐变，从上往下，平铺 245 | // @include gradient-vertical-repeating(#333 30%, #ccc 50%); 246 | @mixin gradient-vertical-repeating($gradient...) { 247 | background-image: -webkit-repeating-linear-gradient(top, $gradient); // Safari 5.1+, Chrome 10+ 248 | background-image: -o-repeating-linear-gradient(top, $gradient); // Opera 11.10 249 | background-image: repeating-linear-gradient(to bottom, $gradient); // Standard, IE10 250 | } 251 | // 角度渐变 252 | // @include gradient-angle(45deg, #333 30%, #ccc); 253 | @mixin gradient-angle($gradient...) { 254 | background-image: -webkit-linear-gradient($gradient); // Safari 5.1+, Chrome 10+ 255 | background-image: -o-linear-gradient($gradient); // Opera 11.10 256 | background-image: linear-gradient($gradient); // Standard, IE1 257 | } 258 | // 角度渐变 259 | // @include gradient-angle(45deg, #333 30%, #ccc 50%); 260 | @mixin gradient-angle-repeating($gradient...) { 261 | background-image: -webkit-repeating-linear-gradient($gradient); // Safari 5.1+, Chrome 10+ 262 | background-image: -o-repeating-linear-gradient($gradient); // Opera 11.10 263 | background-image: repeating-linear-gradient($gradient); // Standard, IE1 264 | } 265 | // 径向渐变，可以写点简单的 266 | // 如：@include gradient-radial(#00F,#FFF); 267 | // 而@include gradient-radial(farthest-side circle at right,#00F,#FFF);这种的将不会兼容，所以不要调用这个，可以去找工具生成 268 | @mixin gradient-radial($gradient...){ 269 | background-image: -webkit-radial-gradient($gradient); // Safari 5.1+, Chrome 10+ 270 | background-image: -o-radial-gradient($gradient); // Opera 11.10 271 | background-image: radial-gradient($gradient); // Standard, IE1 272 | background-repeat: no-repeat; 273 | } 274 | 275 | 276 | // Transform 277 | //----------------------------------------------------- 278 | @mixin transform($property...) { 279 | @include prefixer(transform, $property); 280 | } 281 | 282 | @mixin transform-origin($axes) { 283 | // x-axis - left | center | right | length | % 284 | // y-axis - top | center | bottom | length | % 285 | // z-axis - length 286 | @include prefixer(transform-origin, $axes); 287 | } 288 | 289 | @mixin transform-style ($style: preserve-3d) { 290 | // flat | preserve-3d 291 | @include prefixer(transform-style, $style); 292 | } 293 | 294 | // Transformations 295 | //------------------------------------ 296 | // rotate 297 | @mixin rotate($degrees...) { 298 | @include prefixer(transform, rotate($degrees)); 299 | } 300 | @mixin rotate3D($degrees...) { 301 | @include prefixer(transform, rotate3D($degrees)); 302 | } 303 | @mixin rotateX($degrees) { 304 | @include prefixer(transform, rotateX($degrees)); 305 | } 306 | @mixin rotateY($degrees) { 307 | @include prefixer(transform, rotateY($degrees)); 308 | } 309 | @mixin rotateZ($degrees) { 310 | @include prefixer(transform, rotateZ($degrees) ); 311 | } 312 | 313 | // scale 314 | @mixin scale($ratio...) { 315 | @include prefixer(transform, scale($ratio)); 316 | } 317 | @mixin scale3D($ratio...) { 318 | @include prefixer(transform, scale3D($ratio)); 319 | } 320 | @mixin scaleX($ratio) { 321 | @include prefixer(transform, scaleX($ratio)); 322 | } 323 | @mixin scaleY($ratio) { 324 | @include prefixer(transform, scaleY($ratio)); 325 | } 326 | @mixin scaleZ($ratio) { 327 | @include prefixer(transform, scaleZ($ratio)); 328 | } 329 | 330 | // translate 331 | @mixin translate($px...) { 332 | @include prefixer(transform, translate($px)); 333 | } 334 | @mixin translate3D($px...) { 335 | @include prefixer(transform, translate3D($px)); 336 | } 337 | @mixin translateX($px) { 338 | @include prefixer(transform, translateX($px)); 339 | } 340 | @mixin translateY($px) { 341 | @include prefixer(transform, translateY($px)); 342 | } 343 | @mixin translateZ($px) { 344 | @include prefixer(transform, translateZ($px)); 345 | } 346 | 347 | // skew 348 | // skew时一般会有锯齿什么的，解决方法是添加backface-visibility为hidden 349 | // 详见 https://github.com/twitter/bootstrap/issues/5319 350 | @mixin skew($degrees...) { 351 | @include prefixer(transform, skew($degrees)); 352 | @include backface-visibility; 353 | } 354 | @mixin skewX($degrees) { 355 | @include prefixer(transform, skewX($degrees)); 356 | @include backface-visibility; 357 | } 358 | @mixin skewY($degrees) { 359 | @include prefixer(transform, skewY($degrees)); 360 | @include backface-visibility; 361 | } 362 | 363 | // matrix 364 | @mixin matrix($args...){ 365 | @include prefixer(transform, matrix($args)); 366 | } 367 | @mixin matrix3D($args...){ 368 | @include prefixer(transform, matrix3D($args)); 369 | } 370 | 371 | 372 | // perspective 373 | //----------------------------------------------------- 374 | @mixin perspective($depth: none) { 375 | // none | 376 | @include prefixer(perspective, $depth); 377 | } 378 | 379 | @mixin perspective-origin($value: 50% 50%) { 380 | // x-axis - left | center | right | length | % 381 | // y-axis - top | center | bottom | length | % 382 | @include prefixer(perspective-origin, $value); 383 | } 384 | 385 | @mixin backface-visibility($visibility:hidden){ 386 | // visible | hidden 387 | @include prefixer(backface-visibility, $visibility); 388 | } 389 | 390 | 391 | // transition 392 | //----------------------------------------------------- 393 | @mixin transition($properties...) { 394 | @if length($properties) >= 1 { 395 | @include prefixer(transition, $properties); 396 | } 397 | @else { 398 | $properties: all 0.3s ease; 399 | @include prefixer(transition, $properties); 400 | } 401 | } 402 | 403 | // 默认不提供moz的，如有需要请自行添加 404 | // -moz-transition-property: transitionPropertyNames($properties, moz); 405 | @mixin transition-property($properties...) { 406 | -webkit-transition-property: transitionPropertyNames($properties, webkit); 407 | @if $prefixForOpera { 408 | -o-transition-property: transitionPropertyNames($properties, o); 409 | } 410 | transition-property: transitionPropertyNames($properties, false); 411 | } 412 | 413 | @mixin transition-duration($times...) { 414 | @include prefixer(transition-duration, $times); 415 | } 416 | 417 | @mixin transition-timing-function($motions...) { 418 | // timing-function 419 | // https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function 420 | @include prefixer(transition-timing-function, $motions); 421 | } 422 | 423 | @mixin transition-delay($times...) { 424 | @include prefixer(transition-delay, $times); 425 | } 426 | 427 | 428 | // animation 429 | //----------------------------------------------------- 430 | @mixin animation ($animations...) { 431 | @include prefixer(animation, $animations); 432 | } 433 | 434 | @mixin animation-name ($names...) { 435 | @include prefixer(animation-name, $names); 436 | } 437 | 438 | @mixin animation-duration ($times...) { 439 | @include prefixer(animation-duration, $times); 440 | } 441 | 442 | @mixin animation-timing-function ($motions...) { 443 | // timing-function 444 | // https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function 445 | @include prefixer(animation-timing-function, $motions); 446 | } 447 | 448 | @mixin animation-delay ($times...) { 449 | @include prefixer(animation-delay, $times); 450 | } 451 | 452 | @mixin animation-iteration-count ($values...) { 453 | // infinite | 454 | @if length($values) >= 1 { 455 | @include prefixer(animation-iteration-count, $values); 456 | } @else { 457 | @include prefixer(animation-iteration-count, infinite); 458 | } 459 | } 460 | 461 | @mixin animation-direction ($directions...) { 462 | // normal | alternate | reverse | alternate-reverse 463 | @include prefixer(animation-direction, $directions); 464 | } 465 | 466 | @mixin animation-fill-mode ($modes...) { 467 | // none | forwards | backwards | both 468 | @if length($modes) >= 1 { 469 | @include prefixer(animation-fill-mode, $modes); 470 | } @else { 471 | @include prefixer(animation-fill-mode, forwards); 472 | } 473 | } 474 | 475 | @mixin animation-play-state ($states...) { 476 | // running | paused 477 | @if length($modes) >= 1 { 478 | @include prefixer(animation-play-state, $states); 479 | } @else { 480 | @include prefixer(animation-play-state, paused); 481 | } 482 | } 483 | 484 | // 在各自的@if判断里面，先禁用所有的前缀，然后开启对应的前缀 485 | // 最后输出标准的时候，直接禁用所有的前缀，开启标准 486 | @mixin keyframes($name, $prefixes: webkit o ) { 487 | $originalPrefixForWebkit: $prefixForWebkit; 488 | $originalPrefixForMozilla: $prefixForMozilla; 489 | $originalPrefixForMicrosoft: $prefixForMicrosoft; 490 | $originalPrefixForOpera: $prefixForOpera; 491 | $originalPrefixNo: $prefixNo; 492 | 493 | @each $prefix in $prefixes { 494 | @if $prefix == webkit and $originalPrefixForWebkit == true { 495 | @include disable-prefix-for-all(); 496 | $prefixForWebkit: true !global; 497 | @-webkit-keyframes #{$name} { 498 | @content; 499 | } 500 | } 501 | @if $prefix == moz and $originalPrefixForMozilla == true { 502 | @include disable-prefix-for-all(); 503 | $prefixForMozilla: true !global; 504 | @-moz-keyframes #{$name} { 505 | @content; 506 | } 507 | } 508 | @if $prefix == ms and $originalPrefixForMicrosoft == true { 509 | @include disable-prefix-for-all(); 510 | $prefixForMicrosoft: true !global; 511 | @-ms-keyframes #{$name} { 512 | @content; 513 | } 514 | } 515 | @if $prefix == o and $originalPrefixForOpera == true { 516 | @include disable-prefix-for-all(); 517 | $prefixForOpera: true !global; 518 | @-o-keyframes #{$name} { 519 | @content; 520 | } 521 | } 522 | } 523 | 524 | @include disable-prefix-for-all(); 525 | $prefixNo: true !global; 526 | @keyframes #{$name} { 527 | @content; 528 | } 529 | 530 | $prefixForWebkit: $originalPrefixForWebkit !global; 531 | $prefixForMozilla: $originalPrefixForMozilla !global; 532 | $prefixForMicrosoft: $originalPrefixForMicrosoft !global; 533 | $prefixForOpera: $originalPrefixForOpera !global; 534 | $prefixNo: $originalPrefixNo !global; 535 | } 536 | 537 | // 为animate模块设计 538 | %animated { 539 | @include animation-duration(1s); 540 | @include animation-fill-mode(both); 541 | } 542 | 543 | //flex 544 | //----------------------------------------------------- 545 | // flex-old和flex-mid分别应用与old版本和mid版本 546 | //---------------------------- 547 | @mixin flex-old($property,$value,$propertyPrefix:true){ 548 | @if $flexOld { 549 | @if $propertyPrefix { 550 | -webkit-#{$property} : $value; 551 | } @else { 552 | #{$property} : -webkit-#{$value}; 553 | } 554 | } 555 | } 556 | 557 | @mixin flex-mid($property,$value,$propertyPrefix:true){ 558 | @if $flexMid { 559 | @if $propertyPrefix { 560 | -ms-#{$property} : $value; 561 | } @else { 562 | #{$property} : -ms-#{$value}; 563 | } 564 | } 565 | } 566 | 567 | @mixin display-flex($flex: flex) { 568 | // flex | inline-flex 569 | @if $flex == flex { 570 | @include flex-old(display,box,false); 571 | @include flex-mid(display,flexbox,false); 572 | } 573 | @if $flex == inline-flex { 574 | @include flex-old(display,inline-box,false); 575 | @include flex-mid(display,inline-flexbox,false); 576 | } 577 | @include prefixer-value(display,$flex); 578 | } 579 | 580 | @mixin flex-direction($direction: column){ 581 | // row | row-reverse | column | column-reverse 582 | @if $direction == row { 583 | @include flex-old(box-orient,horizontal); 584 | } 585 | @if $direction == column { 586 | @include flex-old(box-orient,vertical); 587 | } 588 | @if $direction == row-reverse { 589 | @include flex-old(box-orient,horizontal); 590 | @include flex-old(box-direction,reverse); 591 | } 592 | @if $direction == column-reverse { 593 | @include flex-old(box-orient,vertical); 594 | @include flex-old(box-direction,reverse); 595 | } 596 | @include flex-mid(flex-direction, $direction); 597 | @include prefixer(flex-direction, $direction, webkit moz); 598 | } 599 | 600 | @mixin flex-wrap($wrap: wrap){ 601 | // nowrap | wrap | wrap-reverse 602 | // old版本不支持wrap-reverse 603 | @if $wrap == wrap { 604 | @include flex-old(box-lines, multiple); 605 | } 606 | @if $wrap == nowrap { 607 | @include flex-old(box-lines, single); 608 | } 609 | @include flex-mid(flex-wrap, $wrap); 610 | @include prefixer(flex-wrap, $wrap, webkit moz); 611 | } 612 | 613 | // flex-flow is a shorthand for flex-direction and flex-wrap 614 | @mixin flex-flow($flow: row wrap){ 615 | // direction || wrap 616 | @include prefixer(flex-flow, $flow, webkit moz); 617 | } 618 | 619 | @mixin order($num: -1){ 620 | @include flex-old(box-ordinal-group,$num); 621 | @include flex-mid(flex-order,$num); 622 | @include prefixer(order, $num, webkit moz); 623 | } 624 | 625 | @mixin justify-content($align: space-between){ 626 | // flex-start | flex-end | center | space-between | space-around 627 | @if $align == flex-start { 628 | @include flex-old(box-pack,start); 629 | @include flex-mid(flex-pack,start); 630 | } @else if $align == flex-end { 631 | @include flex-old(box-pack,end); 632 | @include flex-mid(flex-pack,end); 633 | } @else if $align == space-between { 634 | @include flex-old(box-pack,justify); 635 | @include flex-mid(flex-pack,justify); 636 | } @else if $align == space-around { 637 | @include flex-mid(flex-pack,distribute); 638 | } @else { 639 | @include flex-old(box-pack,$align); 640 | @include flex-mid(flex-pack,$align); 641 | } 642 | @include prefixer(justify-content, $align, webkit moz); 643 | } 644 | 645 | @mixin align-items($align: center){ 646 | // flex-start | flex-end | center | baseline | stretch 647 | @if $align == flex-start { 648 | @include flex-old(box-align,start); 649 | @include flex-mid(flex-align,start); 650 | } @else if $align == flex-end { 651 | @include flex-old(box-align,end); 652 | @include flex-mid(flex-align,end); 653 | } @else { 654 | @include flex-old(box-align,$align); 655 | @include flex-mid(flex-align,$align); 656 | } 657 | @include prefixer(align-items, $align, webkit moz); 658 | } 659 | 660 | @mixin align-content($align: flex-start){ 661 | // stretch | flex-start | flex-end | center | space-between | space-around 662 | // old不支持 663 | @if $align == flex-start { 664 | @include flex-mid(flex-line-pack,start); 665 | } @else if $align == flex-end { 666 | @include flex-mid(flex-line-pack,end); 667 | } @else if $align == space-between { 668 | @include flex-mid(flex-line-pack,justify); 669 | } @else if $align == space-around { 670 | @include flex-mid(flex-line-pack,distribute); 671 | } @else { 672 | @include flex-mid(flex-line-pack,$align); 673 | } 674 | @include prefixer(align-content, $align, webkit moz); 675 | } 676 | 677 | @mixin align-self($align: flex-start){ 678 | // auto | flex-start | flex-end | center | baseline | stretch 679 | // old不支持 680 | @if $align == flex-start { 681 | @include flex-mid(flex-item-align,start); 682 | } @else if $align == flex-end { 683 | @include flex-mid(flex-item-align,end); 684 | } @else { 685 | @include flex-mid(flex-item-align,$align); 686 | } 687 | @include prefixer(align-self, $align, webkit moz); 688 | } 689 | 690 | // https://developer.mozilla.org/en-US/docs/Web/CSS/flex 691 | @mixin flex($arg){ 692 | //initial | auto | none | number 693 | // 只传入数字则三大版本都支持 694 | @if type-of($arg) == number { 695 | @include flex-old(box-flex,$arg); 696 | @include flex-mid(flex,$arg); 697 | } 698 | @include prefixer(flex, $arg, webkit moz); 699 | } 700 | 701 | 702 | // mask 703 | // http://www.w3.org/TR/css-masking-1/ 704 | // http://ued.ctrip.com/blog/wp-content/webkitcss/index.html 705 | // https://www.webkit.org/blog/181/css-masks/ 706 | // mask (background) 707 | // mask-image (background-image) 708 | // mask-position (background-position) 709 | // mask-size (background-size) 710 | // mask-repeat (background-repeat) 711 | // mask-clip (background-clip) 712 | // mask-origin (background-origin) 713 | // mask-box-image (border-image) 714 | //----------------------------------------------------- 715 | @mixin mask($mask...){ 716 | @include prefixer(mask, $mask, webkit moz); 717 | } 718 | 719 | @mixin mask-image($image...){ 720 | @include prefixer(mask-image, $image, webkit moz); 721 | } 722 | 723 | @mixin mask-position($position...){ 724 | @include prefixer(mask-position, $position, webkit moz); 725 | } 726 | 727 | @mixin mask-repeat($repeat...){ 728 | @include prefixer(mask-repeat, $repeat, webkit moz); 729 | } 730 | 731 | @mixin mask-origin($origin...){ 732 | @include prefixer(mask-origin, $origin, webkit moz); 733 | } 734 | 735 | @mixin mask-clip($clip...){ 736 | @include prefixer(mask-clip, $clip, webkit moz); 737 | } 738 | 739 | @mixin mask-type($type: luminance){ 740 | @include prefixer(mask-type, $type, webkit moz); 741 | } 742 | 743 | @mixin mask-box-image($box){ 744 | @include prefixer(mask-box-image, $box, webkit moz); 745 | } 746 | 747 | 748 | // filter 749 | //----------------------------------------------------- 750 | @mixin filter($function...){ 751 | // []* | none 752 | @include prefixer(filter, $function, webkit moz); 753 | } 754 | 755 | @mixin filter-blur($px){ 756 | @include prefixer(filter, blur($px), webkit moz); 757 | } 758 | 759 | @mixin filter-grayscale($percent: 100%){ 760 | @include prefixer(filter, grayscale($percent), webkit moz); 761 | } 762 | 763 | @mixin filter-drop-shadow($shadow...){ 764 | @include prefixer(filter, drop-shadow($shadow), webkit moz); 765 | } 766 | 767 | // @include url("filepath"); 768 | @mixin filter-url($url){ 769 | @include prefixer(filter, url(#{$url}), webkit moz); 770 | } 771 | 772 | @mixin filter-brightness($value: 0.5){ 773 | @include prefixer(filter, brightness($value), webkit moz); 774 | } 775 | 776 | @mixin filter-contrast($value){ 777 | @include prefixer(filter, contrast($value), webkit moz); 778 | } 779 | 780 | @mixin filter-hue-rotate($value: 90deg){ 781 | @include prefixer(filter, hue-rotate($value), webkit moz); 782 | } 783 | 784 | @mixin filter-invert($value: 100%){ 785 | @include prefixer(filter, invert($value), webkit moz); 786 | } 787 | 788 | @mixin filter-opacity($value){ 789 | @include prefixer(filter, opacity($value), webkit moz); 790 | } 791 | 792 | @mixin filter-saturate($value){ 793 | @include prefixer(filter, saturate($value), webkit moz); 794 | } 795 | 796 | @mixin filter-sepia($value: 100%){ 797 | @include prefixer(filter, sepia($value), webkit moz); 798 | } 799 | 800 | 801 | //columns 802 | //----------------------------------------------------- 803 | @mixin columns($arg) { 804 | // || || && 805 | @include prefixer(columns, $arg, webkit moz); 806 | } 807 | 808 | @mixin column-count($int: auto) { 809 | // auto | integer 810 | @include prefixer(column-count, $int, webkit moz); 811 | } 812 | 813 | @mixin column-width($length: auto) { 814 | // auto | length 815 | @include prefixer(column-width, $length, webkit moz); 816 | } 817 | 818 | @mixin column-gap($length: normal) { 819 | // normal | length 820 | @include prefixer(column-gap, $length, webkit moz); 821 | } 822 | 823 | @mixin column-fill($arg: balance) { 824 | // auto | balance 825 | @include prefixer(columns-fill, $arg, webkit moz); 826 | } 827 | 828 | @mixin column-rule($arg: 1px solid $gray) { 829 | // || || 830 | @include prefixer(column-rule, $arg, webkit moz); 831 | } 832 | 833 | @mixin column-rule-color($color) { 834 | @include prefixer(column-rule-color, $color, webkit moz); 835 | } 836 | 837 | @mixin column-rule-style($style: none) { 838 | // none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid 839 | @include prefixer(column-rule-style, $style, webkit moz); 840 | } 841 | 842 | @mixin column-rule-width ($width: none) { 843 | @include prefixer(column-rule-width, $width, webkit moz); 844 | } 845 | 846 | @mixin column-span($arg: none) { 847 | // none || all 848 | @include prefixer(column-span, $arg, webkit moz); 849 | } 850 | 851 | 852 | // webkit 853 | //----------------------------------------------------- 854 | 855 | // text 856 | @mixin text-fill-color($color){ 857 | @include prefixer(text-fill-color, $color, webkit); 858 | } 859 | @mixin text-stroke-color($color){ 860 | @include prefixer(text-stroke-color, $color, webkit); 861 | } 862 | @mixin text-stroke-width($width){ 863 | @include prefixer(text-stroke-width, $width, webkit); 864 | } 865 | 866 | @mixin margin-collapse($value: collapse){ 867 | // collapse | separate 868 | @include prefixer(margin-collapse, $value, webkit); 869 | } 870 | 871 | // https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW16 872 | @mixin box-reflect($reflect: below 1px){ 873 | // direction offset mask-box-image; 874 | @include prefixer(box-reflect, $reflect, webkit); 875 | } 876 | --------------------------------------------------------------------------------