btxui 1.0.1

package/sass/response/layout_mixin.scss

@@ -0,0 +1,227 @@
+//生成定位类
+@mixin auto_gen_position_class($suffix:"") {
+    .fixed#{$suffix}{
+        position: fixed;
+    }
+    .rel#{$suffix}{
+        position: relative;
+    }
+    .abs#{$suffix}{
+        position: absolute;
+    }
+}
+
+//生成强制隐藏与显示类
+@mixin auto_gen_display_class($suffix:"") {
+    .hide#{$suffix}{
+        display: none !important;        //强制隐藏
+    } 
+    .show#{$suffix}{
+        display: block !important;       //强制显示
+    }
+}
+
+//生成不同尺寸宽度及高度
+@mixin auto_size($suffix:""){
+    .w-auto#{$suffix} {
+        width: auto;
+    }
+    .h-auto#{$suffix} {
+        height: auto;
+    }
+    .w-0#{$suffix} {
+        width: 0;
+    }
+    .h-0#{$suffix} {
+        height: 0;
+    }
+    .w-d5#{$suffix} {
+        width: .5rem;
+    }
+    .h-d5#{$suffix} {
+        height: .5rem;
+    }
+    .max-w#{$suffix} { //满宽
+        width: 100%;
+    }
+    .max-h#{$suffix} { //满高
+        height: 100%;
+    }
+    .max#{$suffix} { //满屏
+        width: 100%;
+        height: 100%;
+    }
+    @for $i from 1 to 11{
+        .w-#{$i}#{$suffix} {
+            width: #{$i}rem;
+        }
+        .h-#{$i}#{$suffix} {
+            height: #{$i}rem;
+        }
+    }
+    $vals: (15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100);
+    @each $val in $vals{
+        .w-#{$val}#{$suffix} {
+            width: #{$val}rem;
+        }
+        .h-#{$val}#{$suffix} {
+            height: #{$val}rem;
+        }
+    }
+}
+
+//生成不同尺寸宽度及高度上下限
+@mixin auto_limit_size($suffix:""){
+    $vals: (10p 10%), (20p 20%), (30p 30%), (40p 40%), (50p 50%), (60p 60%), (70p 70%), (80p 80%), (90p 90%);
+    @each $val in $vals{
+        .rw-#{nth($val, 1)}#{$suffix} {
+            max-width: #{nth($val, 2)};
+        }
+        .lw-#{nth($val, 1)}#{$suffix} {
+            min-width: #{nth($val, 2)};
+        }
+    }
+    @for $i from 1 to 11{
+        .th-#{$i * 10}#{$suffix} {
+            max-height: #{$i * 10}rem;
+        }
+        .bh-#{$i * 10}#{$suffix} {
+            min-height: #{$i * 10}rem;
+        }
+    }
+}
+
+//生成内、外边距类
+@mixin set_space($side, $val:0, $dir:all){
+    @if $dir == all{
+        #{$side}: $val;
+    }@else if $dir == v{ //vertical
+        #{$side}: {
+            top: $val;
+            bottom: $val;
+        }
+    }@else if $dir == h{ //horizontal
+        #{$side}: {
+            left: $val;
+            right: $val;
+        }
+    }@else{
+        #{$side}-#{$dir}: $val;
+    }
+}
+@mixin auto_gen_space_class($suffix:""){ 
+    $dirs: (-t top), (-r right), (-l left), (-b bottom), (-v v), (-h h), ("" all); 
+    $vals: (0 0), (d5 .5), (1 1), (1d5 1.5), (2 2), (2d5 2.5), (3 3), (3d5 3.5), (4 4), (5 5), (6 6), (7 7), (8 8), (9 9), (10 10);
+
+    @for $i from 1 to length($dirs) + 1{
+        $dir: nth($dirs, $i);
+        @each $val in $vals{
+            .pad#{nth($dir, 1)}-#{nth($val, 1)}#{$suffix} {
+                @include set_space(padding, #{nth($val, 2)}rem, nth($dir, 2));
+            }
+            .mrg#{nth($dir, 1)}-#{nth($val, 1)}#{$suffix} {
+                @include set_space(margin, #{nth($val, 2)}rem, nth($dir, 2));
+            }
+            .mrg#{nth($dir, 1)}-auto#{$suffix} {
+                @include set_space(margin, auto, nth($dir, 2));
+            }
+        }
+    }
+}
+
+//生成放缩比率类
+@mixin auto_gen_scale_class($suffix:""){
+    .scale-0#{$suffix} {
+        transform: scale(0);
+    }
+    @for $i from 1 to 10{
+        .scale-d#{$i}#{$suffix} {
+            transform: scale(calc($i / 10));
+        }
+    }
+    @for $i from 1 to 10{
+        .scale-1d#{$i}#{$suffix} {
+            transform: scale(calc($i / 10) + 1);
+        }
+    }
+    @for $i from 2 to 11{
+        .scale-#{$i}#{$suffix} {
+            transform: scale($i);
+        }
+    }
+}
+
+//生成 translate 平移类
+@mixin auto_gen_translate_class($suffix:""){
+    $percent: (10 10%), (25 25%), (50 50%), (100 100%), (200 200%), (500 500%);
+    @for $i from 0 to 12{
+        @each $p in $percent{
+            .translateX-#{nth($p, 1)}#{$suffix} {
+                transform: translateX(nth($p, 2));
+            }
+            .translateX-f#{nth($p, 1)}#{$suffix} {
+                transform: translateX(nth($p, 2) * -1);
+            }
+            .translateY-#{nth($p, 1)}#{$suffix} {
+                transform: translateY(nth($p, 2));
+            }
+            .translateY-f#{nth($p, 1)}#{$suffix} {
+                transform: translateY(nth($p, 2) * -1);
+            }
+        }
+    }
+}
+
+//生成位移类
+@mixin auto_gen_offset_class($suffix:""){
+    $dirs: (l left), (r right), (t top), (b bottom);
+    $percent: 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 200;
+    $units: rem, px;
+    @for $i from 0 to 12{
+        @each $dir in $dirs{
+            @if $i == 0{
+                .#{nth($dir, 1)}-#{$i}#{$suffix} {
+                    #{nth($dir, 2)}: #{$i};
+                }
+            }@else {
+                @each $unit in $units{
+                    .#{nth($dir, 1)}-#{$i}#{$unit}#{$suffix} { //正数
+                        #{nth($dir, 2)}: #{$i}#{$unit};
+                    }
+                    .#{nth($dir, 1)}-f#{$i}#{$unit}#{$suffix} { //负数
+                        #{nth($dir, 2)}: -#{$i}#{$unit};
+                    }
+                }
+            }
+        }
+    }
+
+    //百分比位移
+    @each $dir in $dirs{
+        @each $v in $percent {
+            .#{nth($dir, 1)}-#{$v}p { //正数
+                #{nth($dir, 2)}: #{$v + '%'};
+            }
+            .#{nth($dir, 1)}-f#{$v}p { //负数
+                #{nth($dir, 2)}: -#{$v + '%'};
+            }
+        }
+    }
+
+    //auto 值
+    @each $dir in $dirs{
+        .#{nth($dir, 1)}-auto#{$suffix} {
+            #{nth($dir, 2)}: auto;
+        }
+    }
+}
+
+//生成多列布局容器类
+@mixin auto_gen_column_class($suffix:""){
+    @for $i from 1 to 6{
+        .column-#{$i}#{$suffix} {
+            column-gap: 0;
+            column-count: #{$i};
+        }
+    }
+}

package/sass/response/main.scss

@@ -0,0 +1,59 @@
+@import "./text_mixin.scss";
+@import "./layout_mixin.scss";
+@import "./flex_mixin.scss";
+
+@mixin auto_gen_response_class($suffix:"") {
+    
+    //文本对齐
+    @include auto_gen_text_align_class($suffix);
+
+    //倍数字号
+    @include auto_gen_font_size_class($suffix);
+
+    //字符间距
+    @include auto_gen_letter_space_class($suffix);
+
+    //定位
+    @include auto_gen_position_class($suffix);
+
+    //强制隐藏与显示
+    @include auto_gen_display_class($suffix);
+
+    //生成不同尺寸宽度及高度
+    @include auto_size($suffix);
+
+    //生成不同尺寸宽度及高度上下限
+    @include auto_limit_size($suffix);
+
+    //内、外边距
+    @include auto_gen_space_class($suffix);
+
+    //生长方向类
+    @include auto_gen_flex_dir_class($suffix);
+
+    //九宫格对齐定位
+    @include auto_gen_flex_align_class($suffix);
+
+    //栅格布局
+    @include auto_gen_grid_class($suffix);
+
+    //生成自生长元素类
+    @include auto_gen_grow_class($suffix);
+
+    //生成项目排序元素类
+    @include auto_gen_order_class($suffix);
+
+    //放缩比率
+    @include auto_gen_scale_class($suffix);
+
+    //translate平移
+    @include auto_gen_translate_class($suffix);
+
+    //位移
+    @include auto_gen_offset_class($suffix);
+
+    //多列布局容器
+    @include auto_gen_column_class($suffix);
+
+}
+

package/sass/response/text_mixin.scss

@@ -0,0 +1,65 @@
+//生成文本对齐类
+@mixin auto_gen_text_align_class($suffix:"") {
+    .pcenter#{$suffix} {
+        text-align: center;
+    }
+    
+    .pright#{$suffix} {
+        text-align: right;
+    }
+    
+    .pleft#{$suffix} {
+        text-align: left;
+    }
+    
+    .pjustify#{$suffix} { 
+        text-align: justify;
+    }
+    
+    .pindent#{$suffix} {
+        text-indent: 2em;
+    }
+}
+
+//生成倍数字号类
+@mixin auto_gen_font_size_class($suffix:"") {
+    @for $i from 0 to 6{
+        
+        //处理缩小字号
+        @if $i == 0 {
+            .fsize-#{$i}#{$suffix} { //0 号字 
+                font-size: 0;
+            }
+            @for $i from 1 to 10{
+                .fsize-d#{$i}#{$suffix} {
+                    font-size: #{calc($i / 10)}em;   
+                }        
+            }
+        } @else if $i == 1 {
+            .fsize-#{$i}#{$suffix} {
+                font-size: #{$i}em;
+            }
+            @for $i from 1 to 10{
+                .fsize-1d#{$i}#{$suffix} {
+                    font-size: #{1 + calc($i / 10)}em;
+                }
+            }
+        } @else if $i > 1 {
+            .fsize-#{$i}#{$suffix} {
+                font-size: #{$i}em;
+            }
+            .fsize-#{$i}d5#{$suffix} {
+                font-size: #{$i + 0.5}em;
+            }
+        }
+    }   
+}
+
+//生成字符间距类
+@mixin auto_gen_letter_space_class($suffix:"") {
+    @for $i from 0 to 6 {
+        .lspace-#{$i}#{$suffix}{
+            letter-spacing: #{$i}px;
+        }
+    }
+}

package/sass/scroll.scss

@@ -0,0 +1,100 @@
+//IE 设置
+%ie-set{
+    scrollbar-arrow-color: transparent;
+    scrollbar-face-color: transparent;
+    scrollbar-3dlight-color: transparent;
+    scrollbar-highlight-color: transparent;
+    scrollbar-shadow-color: transparent;
+    scrollbar-darkshadow-color: transparent;
+    scrollbar-track-color: transparent;
+    scrollbar-base-color: transparent;
+}
+
+//IE hovre 设置
+%ie-hover-set{
+    scrollbar-arrow-color: #eee;
+    scrollbar-face-color: #eee;
+    scrollbar-3dlight-color: #eee;
+    scrollbar-highlight-color: #eee;
+    scrollbar-shadow-color: #eee;
+    scrollbar-darkshadow-color: #eee;
+    scrollbar-track-color: #eee;
+    scrollbar-base-color: #eee;
+}
+
+//webkit 设置
+%webkit-set{
+    &::-webkit-scrollbar-thumb{
+        border-radius: 3px;
+        box-shadow: inset 0 0 5px transparent;
+        background: transparent;
+    }
+    &::-webkit-scrollbar-track{
+        box-shadow: inset 0 0 5px transparent;
+        border-radius: 3px;
+        background: transparent;
+    }
+}
+
+//webkit hovre 设置
+%webkit-hover-set{
+    &::-webkit-scrollbar-thumb{
+        background: rgba(140,140,140,.2);
+    }
+    &::-webkit-scrollbar-track{
+        background: transparent;
+    }
+}
+
+%relative {
+    position: relative;
+}
+
+@mixin scroll_base($wide:3px){
+    @extend %relative;
+
+    //IE 设置
+    @extend %ie-set;
+
+    //webkit 设置
+    &::-webkit-scrollbar{
+        width: $wide;
+        height: $wide;
+    }
+    @extend %webkit-set;
+
+    &:hover, &:focus{
+
+        //IE hovre 设置
+        @extend %ie-hover-set;
+
+        //webkit hovre 设置
+        @extend %webkit-hover-set;
+    }
+}
+
+//纵向滚动条
+.auto-scroll, .over-scroll {
+    overflow-y: auto;
+    @include scroll_base();
+}
+.wide-auto-scroll { //（易于拖动）
+    overflow-y: auto;
+    @include scroll_base(14px);
+}
+ 
+//横向滚动条（易于拖动）
+.auto-h-scroll{                           
+    overflow-x: auto;
+    @include scroll_base(14px);
+}
+
+//溢出隐藏
+.no-scroll, .over-hide{
+    overflow: hidden;
+}
+
+//溢出显示
+.over-show{
+    overflow: visible;
+}

package/sass/special.scss

@@ -0,0 +1,13 @@
+.bg-none { pointer-events: none; }          //背景点透效果
+.bg-use { pointer-events: auto; }           //背景常规效果（非点透）
+.touch-none { touch-action: none; }         //元素触控禁止
+
+//元素长按选中禁止
+.select-none {
+  -webkit-touch-callout:none;
+  -webkit-user-select:none;
+  -khtml-user-select:none;
+  -moz-user-select:none;
+  -ms-user-select:none;
+  user-select:none;
+}

package/sass/table.scss

@@ -0,0 +1,103 @@
+table{
+    width: 100%;
+    border-spacing: 0;
+}
+
+.table {
+    background-color: #fff;
+    
+    //常规尺寸
+    th{
+        text-align: left;
+        border-bottom: 1px solid #ddd;
+        font-size: 1.2rem;
+        color: #222;
+    }
+    &:not([border]) tbody{
+        tr{
+            &:nth-child(even){
+                background-color: #f7f7f7;
+            }
+            &:last-child td{
+                border-bottom: 1px solid #eee;
+            }
+        }
+    }
+
+    td, th{
+        padding: .5rem 1rem;
+    }
+    td {
+        color: #555;
+        font-size: 1.1rem;
+    }
+
+    //宽松尺寸
+    &[easy]{
+        td, th{
+            padding: .7rem 1rem;    
+        }
+        th{
+            font-size: 1.3rem;
+        }
+        td{
+            font-size: 1.2rem;
+        }
+    }
+
+    //紧凑尺寸
+    &[compact]{
+        td, th{
+            padding: .2rem 1rem;
+        }
+        th{
+            font-size: 1.1rem;
+        }
+        td{
+            font-size: 1rem;
+        }
+    }
+
+    //线框样式
+    &[border]{
+        border-collapse: collapse;
+        border-color: inherit;
+
+        th {
+            background-color: #f7f7f7;
+        }
+    }
+
+    //暗色样式
+    &[dark]{
+        background-color: #333;
+
+        th{
+            border-bottom: 1px solid #111;
+            background-color: #222;
+            color: #eee;
+        }
+        tbody{
+            tr{
+                &:nth-child(even){
+                    background-color: #444;
+                }
+                &:last-child td{
+                    border-bottom: 1px solid #eee;
+                }
+            }
+        }
+        td {
+            color: #999;
+        }
+        &[border]{
+            border-color: #111;
+        }
+    }
+
+    //响应式（内容不自动换行，溢出时出现横向滚动条）
+    &[response]{
+        white-space: nowrap;
+    }
+
+}

package/sass/text.scss

@@ -0,0 +1,86 @@
+p{
+    margin: 1.4em 0;
+
+    &:empty {
+        height: 1.4em;
+    }
+}
+
+h1 {
+    font-size: 2em;
+}
+
+h2 {
+    font-size: 1.8em;
+}
+
+h3 {
+    font-size: 1.6em;
+}
+
+h4 {
+    font-size: 1.4em;
+}
+
+h5 {
+    font-size: 1.2em;
+}
+
+h6 {
+    font-size: 1em;
+}
+
+article {
+    font-size: 1.2rem;
+    line-height: 1.7;
+
+    //编辑模式
+    &[contenteditable]{
+        border: none;
+        outline: none;
+    }
+
+    h1, h2, h3, h4, h5, h6{
+        margin-bottom: 1em;
+    }
+    ol, ul{
+        margin-bottom: 1.4em;
+    }
+}
+
+i {
+    display: inline-block;
+}
+
+abbr {
+    text-decoration: none;
+}
+
+code {
+    background-color: #f9f2f4;
+    color: #c7254e;
+    font-family: Consolas !important;
+    padding: 2px 6px;
+    margin: 0 2px;
+    border-radius: 4px;
+    word-break: break-all;
+}
+
+.bold {
+    font-weight: bold;              //文字加粗
+}
+
+.no-wrap {                          //文本禁止换行
+    white-space: nowrap;
+}
+
+.ellipsis {                         //文本省略
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.resize {                           //字号基准
+    font-size: 1rem;
+    line-height: 1.5;
+}

package/sass/webpack.config.js

@@ -0,0 +1,31 @@
+const path = require("path")
+const ExtractText = require("extract-text-webpack-plugin")
+
+module.exports = {
+    entry: {
+        "btx.webapp": "./src/sass/btx.webapp.scss",
+        "btx": "./src/sass/btx.scss",
+        "btx.mob": "./src/sass/btx.mob.scss",
+        "btx.pad": "./src/sass/btx.pad.scss",
+    },
+    output: {
+        filename: "_main.js",
+        path: path.join(__dirname, "../css")
+    },
+    module: {
+        rules: [
+            {
+                test: /\.scss$/,
+                use: ExtractText.extract({
+                    fallback: "style-loader",
+                    use: ['css-loader', 'sass-loader']
+                })
+            }
+        ]
+    },
+    plugins: [
+        new ExtractText({
+            filename: `[name].min.css`
+        })
+    ]
+}

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}