btxui 1.0.1

package/sass/animation.scss

@@ -0,0 +1,400 @@
+$duration: .7s;
+$fast_duration: .4s;
+$slow_duration: 1.4s;
+
+%duration {
+    animation-duration: $duration;
+}
+%reverse {
+    animation-direction: reverse;
+}
+
+
+.trans {                                //中速过度动画
+    transition: all $duration;
+}
+.trans-fast {                           //快速过度动画
+    transition: all $fast_duration;
+}
+.trans-slow {                           //慢速过度动画
+    transition: all $slow_duration;
+}
+.trans-no {                             //无过度动画
+    transition: none;
+}
+
+
+//过渡动画延迟
+@for $i from 1 to 10{
+    .trans-delay-d#{$i} {
+        transition-delay: #{calc($i / 10)}s;
+    }
+    @if $i < 6 {
+        .trans-delay-#{$i} {
+            transition-delay: #{$i}s;
+        }
+        .trans-delay-#{$i}d5 {
+            transition-delay: #{$i + .5}s;
+        }
+    }
+}
+
+
+//animation 动画 ---------------------------------------------------------------
+
+.ani {                                      //中速动画
+    animation-duration: $duration;
+}
+
+.ani-fast {                                 //快速动画
+    animation-duration: $fast_duration;
+}
+
+.ani-slow {                                 //慢速动画
+    animation-duration: $slow_duration;
+}
+
+.ani-mode-forwards {
+    animation-fill-mode: forwards;
+}
+
+.ani-mode-backwards {
+    animation-fill-mode: backwards;
+}
+
+.ani-mode-both {
+    animation-fill-mode: both;
+}
+
+//animation 动画延迟
+@for $i from 1 to 11{
+    @if $i < 10 {
+        .ani-delay-d#{$i} {
+            animation-delay: #{calc($i / 10)}s !important;
+        }
+    }
+    .ani-delay-#{$i} {
+        animation-delay: #{$i}s !important;
+    }
+}
+
+
+//animation 动画迭代
+@for $i from 1 to 7{
+    .ani-loop-#{$i} {
+        animation-iteration-count: $i;
+    }
+}
+.ani-loop {
+    animation-iteration-count: infinite;
+}
+
+
+.ani-fade-in, 
+.ani-fade-out{                              //淡入动画               
+    animation-name: fadeIn; 
+    @extend %duration;
+}
+.ani-fade-out{                              //淡出动画 
+    @extend %reverse;
+}
+@-webkit-keyframes fadeIn {
+    from {
+        opacity: 0;
+        visibility: hidden;
+    }
+    to{
+        opacity: 1;
+        visibility: visible;
+    }
+}
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        visibility: hidden;
+    }
+    to{
+        opacity: 1;
+        visibility: visible;
+    }
+}
+
+
+.ani-scale-fade-in, 
+.ani-scale-fade-out{                        //缩放式淡入动画
+    animation-name: scaleFadeIn; 
+    @extend %duration;
+}
+.ani-scale-fade-out{                        //放缩式淡出动画
+    @extend %reverse;
+}
+@-webkit-keyframes scaleFadeIn {
+    from {
+        opacity: 0;
+        -webkit-transform: scale(0);
+    }
+    to{
+        opacity: 1;
+        -webkit-transform: scale(1);
+    }
+}
+@keyframes scaleFadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0);
+    }
+    to{
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+
+.ani-v-stretch-h-in {                       //先垂直后水平伸展式动画
+    animation-name: stretchV2HIn; 
+    animation-timing-function: ease-out;
+    @extend %duration;
+}
+@-webkit-keyframes stretchV2HIn {
+    0% {
+        opacity: 0;
+        -webkit-transform: scale(0, 0);
+    }
+    70% {
+        opacity: 1;
+        -webkit-transform: scale(.2, 1);
+    }
+    100%{
+        -webkit-transform: scale(1, 1);
+    }
+}
+@keyframes stretchV2HIn {
+    0% {
+        opacity: 0;
+        transform: scale(0, 0);
+    }
+    70% {
+        opacity: 1;
+        transform: scale(.2, 1);
+    }
+    100%{
+        transform: scale(1, 1);
+    }
+}
+
+
+.ani-h-stretch-v-in {                       //先水平后垂直伸展式动画
+    animation-name: stretchH2VIn; 
+    animation-timing-function: ease-out;
+    @extend %duration;
+}
+@-webkit-keyframes stretchH2VIn {
+    0% {
+        opacity: 0;
+        -webkit-transform: scale(0, 0);
+    }
+    70% {
+        opacity: 1;
+        -webkit-transform: scale(1, .2);
+    }
+    100%{
+        -webkit-transform: scale(1, 1);
+    }
+}
+@keyframes stretchH2VIn {
+    0% {
+        opacity: 0;
+        transform: scale(0, 0);
+    }
+    70% {
+        opacity: 1;
+        transform: scale(1, .2);
+    }
+    100%{
+        transform: scale(1, 1);
+    }
+}
+
+
+//由左向右滑动动画
+.ani-left-to-right{                         
+    animation-name: aniLeftSliderToRight; 
+    @extend %duration;
+}
+@-webkit-keyframes aniLeftSliderToRight {
+    from {
+        -webkit-transform: translateX(-150%);
+    }
+    to{
+        -webkit-transform: translateX(0%);
+    }
+}
+@keyframes aniLeftSliderToRight {
+    from {
+        transform: translateX(-150%);
+    }
+    to{
+        transform: translateX(0%);
+    }
+}
+
+
+//由右向左滑动动画
+.ani-right-to-left{                         
+    animation-name: aniRightSliderToLeft; 
+    @extend %duration;
+}
+@-webkit-keyframes aniRightSliderToLeft {
+    from {
+        -webkit-transform: translateX(150%);
+    }
+    to{
+        -webkit-transform: translateX(0%);
+    }
+}
+@keyframes aniRightSliderToLeft {
+    from {
+        transform: translateX(150%);
+    }
+    to{
+        transform: translateX(0%);
+    }
+}
+
+
+//由上向下滑动动画
+.ani-top-to-bottom{                         
+    animation-name: aniTopSliderToBottom; 
+    @extend %duration;
+}
+@-webkit-keyframes aniTopSliderToBottom {
+    from {
+        -webkit-transform: translateY(-150%);
+    }
+    to{
+        -webkit-transform: translateY(0%);
+    }
+}
+@keyframes aniTopSliderToBottom {
+    from {
+        transform: translateY(-150%);
+    }
+    to{
+        transform: translateY(0%);
+    }
+}
+
+
+//由下向上滑动动画
+.ani-bottom-to-top{                         
+    animation-name: aniBottomSliderToTop; 
+    @extend %duration;
+}
+@-webkit-keyframes aniBottomSliderToTop {
+    from {
+        -webkit-transform: translateY(150%);
+    }
+    to{
+        -webkit-transform: translateY(0%);
+    }
+}
+@keyframes aniBottomSliderToTop {
+    from {
+        transform: translateY(150%);
+    }
+    to{
+        transform: translateY(0%);
+    }
+}
+
+
+//旋转 360 度动画
+.ani-rotate {
+    animation-name: aniRotate; 
+    @extend %duration;
+}
+@-webkit-keyframes aniRotate {
+    0%{
+        -webkit-transform: rotate(0deg);
+    }
+    100%{
+        -webkit-transform: rotate(360deg);
+    }
+}
+@keyframes aniRotate {
+    0%{
+        transform: rotate(0deg);
+    }
+    100%{
+        transform: rotate(360deg);
+    }
+}
+
+
+//旋转 180 度动画
+.ani-rotate-half {
+    animation-name: aniRotateHalf; 
+    @extend %duration;
+}
+@-webkit-keyframes aniRotateHalf {
+    0%{
+        -webkit-transform: rotate(0deg);
+    }
+    100%{
+        -webkit-transform: rotate(180deg);
+    }
+}
+@keyframes aniRotateHalf {
+    0%{
+        transform: rotate(0deg);
+    }
+    100%{
+        transform: rotate(180deg);
+    }
+}
+
+
+//旋转 90 度动画
+.ani-rotate-90 {
+    animation-name: aniRotate90; 
+    @extend %duration;
+}
+@-webkit-keyframes aniRotate90 {
+    0%{
+        -webkit-transform: rotate(0deg);
+    }
+    100%{
+        -webkit-transform: rotate(90deg);
+    }
+}
+@keyframes aniRotate90 {
+    0%{
+        transform: rotate(0deg);
+    }
+    100%{
+        transform: rotate(90deg);
+    }
+}
+
+
+//旋转 45 度动画
+.ani-rotate-45 {
+    animation-name: aniRotate45; 
+    @extend %duration;
+}
+@-webkit-keyframes aniRotate45 {
+    0%{
+        -webkit-transform: rotate(0deg);
+    }
+    100%{
+        -webkit-transform: rotate(45deg);
+    }
+}
+@keyframes aniRotate45 {
+    0%{
+        transform: rotate(0deg);
+    }
+    100%{
+        transform: rotate(45deg);
+    }
+}

package/sass/btx.mob.scss

@@ -0,0 +1,10 @@
+@import "./response/main.scss";
+
+@include auto_gen_response_class(-s);
+
+html {
+    font-size: 11px;
+}
+.bg-fixed {
+    background-attachment: scroll;
+}

package/sass/btx.pad.scss

@@ -0,0 +1,3 @@
+@import "./response/main.scss";
+
+@include auto_gen_response_class(-m);

package/sass/btx.scss

@@ -0,0 +1,22 @@
+@import "./colors.scss";
+
+@import "./reset.scss";
+
+@import "./text.scss";  
+
+@import "./layout.scss";  
+
+@import "./table.scss";
+
+@import "./decoration.scss";               
+
+@import "./animation.scss";       
+       
+@import "./icons.scss";
+
+@import "./special.scss";
+
+@import "./response/main.scss";
+
+@include auto_gen_response_class();
+

package/sass/btx.webapp.scss

@@ -0,0 +1,22 @@
+@import "./reset.scss";
+
+@import "./scroll.scss";
+       
+@import "./icons.scss";
+
+@import "./response/flex_mixin.scss";
+
+//栅格系统
+
+//全局样式
+@include auto_gen_grid_class("");
+
+//平板端
+@media only screen and (max-width: 1367px){
+  @include auto_gen_grid_class(-m);
+}
+
+//移动端
+@media only screen and (max-width: 740px){
+  @include auto_gen_grid_class(-s);
+}

package/sass/colors.scss

@@ -0,0 +1,65 @@
+$none: transparent;                       //全透明色
+
+$main: #051c24;                         //主题色-遂蓝
+
+$sub: #b4967a;                          //辅助色-锡金
+
+$light: #fff;                           //纯白
+
+$dark: #111;                            //纯黑
+
+$dgray: #373737;                        //深灰
+
+$mgray: #a7a7a7;                        //中灰
+
+$lgray: #eee;                           //浅灰
+
+$blue: #4085f3;                         //湛蓝
+
+$red: #ec4334;                          //玫红
+
+$green: #02b9a1;                        //青绿
+
+$yellow: #fdba00;                       //橙黄
+
+$neutral: rgba(130,130,130,.15);        //中性色
+
+//生成色彩（文字、填充、描边）类
+@mixin auto_gen_color_class {
+    $colors: (none $none), (sub $sub), (main $main), (light $light), (dark $dark), (dgray $dgray), (mgray $mgray), (lgray $lgray), (blue $blue), (green $green), (yellow $yellow), (red $red), (neutral, $neutral);
+    @each $color in $colors{
+        .color-#{"" + nth($color, 1)}{
+            color: nth($color, 2);
+        }     
+        .bg-color-#{"" + nth($color, 1)}{
+            background-color: nth($color, 2);
+        }
+        .line-#{"" + nth($color, 1)}{
+            border-color: nth($color, 2) !important;
+        }
+    }
+}
+@include auto_gen_color_class();
+
+
+//生成不透明度阶梯类
+%visibility {
+    visibility: visible;
+};
+@mixin auto_gen_opacity_class {
+    .alpha-0 {
+        opacity: 0;
+        visibility: hidden;
+    }
+    @for $i from 1 to 10{
+        .alpha-d#{$i} {
+            opacity: calc($i / 10);
+            @extend %visibility;
+        }
+    }
+    .alpha-1 {
+        opacity: 1;
+        @extend %visibility;
+    }
+}
+@include auto_gen_opacity_class();