mdui 1.0.2 → 2.0.0

package/src/styles/color.less

@@ -1,392 +0,0 @@
-/**
- * =============================================================================
- * ************   Color 颜色   ************
- * =============================================================================
- */
-
-@global-primary-color-degrees-length: length(@globalPrimaryColorDegrees);
-@global-primary-colors-length: length(@globalPrimaryColors);
-@global-accent-color-degrees-length: length(@globalAccentColorDegrees);
-@global-accent-colors-length: length(@globalAccentColors);
-
-
-/**
- * .mdui-theme-primary-[color] .mdui-color-theme
- * .mdui-theme-primary-[color] .mdui-color-theme-[degree]
- */
-
-& {
-  .loop-primary-theme(@counter-color) when (@counter-color > 0) {
-    .loop-primary-theme((@counter-color - 1));
-
-    @colorName: extract(@globalPrimaryColors, @counter-color);
-
-    .mdui-theme-primary-@{colorName} when not (@colorName = null) {
-
-      // .mdui-theme-primary-[color] .mdui-color-theme
-      .mdui-color-theme {
-        .mdui-color(@colorName) !important;
-      }
-
-      .loop-primary-degree-theme(@counter-degree) when (@counter-degree > 0) {
-        .loop-primary-degree-theme((@counter-degree - 1));
-
-        @degree: extract(@globalPrimaryColorDegrees, @counter-degree);
-
-        // .mdui-theme-primary-[color] .mdui-color-theme-[degree]
-        .mdui-color-theme-@{degree} when not (@degree = null) {
-          .mdui-color(@colorName, @degree) !important;
-        }
-      }
-      .loop-primary-degree-theme(@global-primary-color-degrees-length);
-    }
-  }
-  .loop-primary-theme(@global-primary-colors-length);
-}
-
-
-/**
- * .mdui-theme-accent-[color] .mdui-color-theme-accent
- * .mdui-theme-accent-[color] .mdui-color-theme-[degree]
- */
-
-& {
-  .loop-accent-theme(@counter-color) when (@counter-color > 0) {
-    .loop-accent-theme((@counter-color - 1));
-
-    @colorName: extract(@globalAccentColors, @counter-color);
-
-    .mdui-theme-accent-@{colorName} when not (@colorName = null) {
-
-      // .mdui-theme-accent-[color] .mdui-color-theme-accent
-      .mdui-color-theme-accent {
-        .mdui-color(@colorName, a200) !important;
-      }
-
-      .loop-accent-degree-theme(@counter-degree) when (@counter-degree > 0) {
-        .loop-accent-degree-theme((@counter-degree - 1));
-
-        @degree: extract(@globalAccentColorDegrees, @counter-degree);
-
-        // .mdui-theme-accent-[color] .mdui-color-theme-[degree]
-        .mdui-color-theme-@{degree} when not (@degree = null) {
-          .mdui-color(@colorName, @degree) !important;
-        }
-      }
-      .loop-accent-degree-theme(@global-accent-color-degrees-length);
-    }
-  }
-  .loop-accent-theme(@global-accent-colors-length);
-}
-
-
-/**
- * .mdui-color-[color]
- * .mdui-color-[color]-[degree]
- */
-
-& {
-  .loop-primary-theme(@counter-color) when (@counter-color > 0) {
-    .loop-primary-theme((@counter-color - 1));
-
-    @colorName: extract(@globalPrimaryColors, @counter-color);
-
-    & {
-      // .mdui-color-[color]
-      .mdui-color-@{colorName} when not (@colorName = null) {
-        .mdui-color(@colorName) !important;
-      }
-
-      .loop-primary-degree-theme(@counter-degree) when (@counter-degree > 0) {
-        .loop-primary-degree-theme((@counter-degree - 1));
-
-        @degree: extract(@globalPrimaryColorDegrees, @counter-degree);
-
-        // .mdui-color-[color]-[degree]
-        .mdui-color-@{colorName}-@{degree} when not (@degree = null) {
-          .mdui-color(@colorName, @degree) !important;
-        }
-      }
-      .loop-primary-degree-theme(@global-primary-color-degrees-length);
-    }
-  }
-  .loop-primary-theme(@global-primary-colors-length);
-}
-
-
-/**
- * .mdui-color-[color]-accent
- * .mdui-color-[color]-[degree]
- */
-
-& {
-  .loop-accent-theme(@counter-color) when (@counter-color > 0) {
-    .loop-accent-theme((@counter-color - 1));
-
-    @colorName: extract(@globalAccentColors, @counter-color);
-
-    &{
-      // .mdui-color-[color]-accent
-      .mdui-color-@{colorName}-accent when not (@colorName = null) {
-        .mdui-color(@colorName, a200) !important;
-      }
-
-      .loop-accent-degree-theme(@counter-degree) when (@counter-degree > 0) {
-        .loop-accent-degree-theme((@counter-degree - 1));
-
-        @degree: extract(@globalAccentColorDegrees, @counter-degree);
-
-        // .mdui-color-[color]-[degree]
-        .mdui-color-@{colorName}-@{degree} when not (@degree = null) {
-          .mdui-color(@colorName, @degree) !important;
-        }
-      }
-      .loop-accent-degree-theme(@global-accent-color-degrees-length);
-    }
-  }
-  .loop-accent-theme(@global-accent-colors-length);
-}
-
-
-/**
- * .mdui-color-black
- * .mdui-color-white
- * .mdui-color-transparent
- */
-
-.mdui-color-black {
-  color: @color-white-text !important;
-  background-color: @color-black !important;
-}
-
-.mdui-color-white {
-  color: @color-black-text !important;
-  background-color: @color-white !important;
-}
-
-.mdui-color-transparent {
-  background-color: @color-transparent !important;
-}
-
-
-/**
- * .mdui-theme-primary-[color] .mdui-text-color-theme
- * .mdui-theme-primary-[color] .mdui-text-color-theme-[degree]
- */
-
-& {
-  .loop-primary-theme(@counter-color) when (@counter-color > 0) {
-    .loop-primary-theme((@counter-color - 1));
-
-    @colorName: extract(@globalPrimaryColors, @counter-color);
-
-    .mdui-theme-primary-@{colorName} when not (@colorName = null) {
-
-      // .mdui-theme-primary-[color] .mdui-text-color-theme
-      .mdui-text-color-theme {
-        .mdui-text-color(@colorName) !important;
-      }
-
-      .loop-primary-degree-theme(@counter-degree) when (@counter-degree > 0) {
-        .loop-primary-degree-theme((@counter-degree - 1));
-
-        @degree: extract(@globalPrimaryColorDegrees, @counter-degree);
-
-        // .mdui-theme-primary-[color] .mdui-text-color-theme-[degree]
-        .mdui-text-color-theme-@{degree} when not (@degree = null) {
-          .mdui-text-color(@colorName, @degree) !important;
-        }
-      }
-      .loop-primary-degree-theme(@global-primary-color-degrees-length);
-    }
-  }
-  .loop-primary-theme(@global-primary-colors-length);
-}
-
-
-/**
- * .mdui-theme-accent-[color] .mdui-text-color-theme-accent
- * .mdui-theme-accent-[color] .mdui-text-color-theme-[degree]
- */
-
-& {
-  .loop-accent-theme(@counter-color) when (@counter-color > 0) {
-    .loop-accent-theme((@counter-color - 1));
-
-    @colorName: extract(@globalAccentColors, @counter-color);
-
-    .mdui-theme-accent-@{colorName} when not (@colorName = null) {
-
-      // .mdui-theme-accent-[color] .mdui-text-color-theme-accent
-      .mdui-text-color-theme-accent {
-        .mdui-text-color(@colorName, a200) !important;
-      }
-
-      .loop-accent-degree-theme(@counter-degree) when (@counter-degree > 0) {
-        .loop-accent-degree-theme((@counter-degree - 1));
-
-        @degree: extract(@globalAccentColorDegrees, @counter-degree);
-
-        // .mdui-theme-accent-[color] .mdui-text-color-theme-[degree]
-        .mdui-text-color-theme-@{degree} when not (@degree = null) {
-          .mdui-text-color(@colorName, @degree) !important;
-        }
-      }
-      .loop-accent-degree-theme(@global-accent-color-degrees-length);
-    }
-  }
-  .loop-accent-theme(@global-accent-colors-length);
-}
-
-
-/**
- * .mdui-text-color-[color]
- * .mdui-text-color-[color]-[degree]
- */
-
-& {
-  .loop-primary-theme(@counter-color) when (@counter-color > 0) {
-    .loop-primary-theme((@counter-color - 1));
-
-    @colorName: extract(@globalPrimaryColors, @counter-color);
-
-    &{
-      // .mdui-text-color-[color]
-      .mdui-text-color-@{colorName} when not (@colorName = null) {
-        .mdui-text-color(@colorName) !important;
-      }
-
-      .loop-primary-degree-theme(@counter-degree) when (@counter-degree > 0) {
-        .loop-primary-degree-theme((@counter-degree - 1));
-
-        @degree: extract(@globalPrimaryColorDegrees, @counter-degree);
-
-        // .mdui-text-color-[color]-[degree]
-        .mdui-text-color-@{colorName}-@{degree} when not (@degree = null) {
-          .mdui-text-color(@colorName, @degree) !important;
-        }
-      }
-      .loop-primary-degree-theme(@global-primary-color-degrees-length);
-    }
-  }
-  .loop-primary-theme(@global-primary-colors-length);
-}
-
-
-/**
- * .mdui-text-color-[color]-accent
- * .mdui-text-color-[color]-[degree]
- */
-
-& {
-  .loop-accent-theme(@counter-color) when (@counter-color > 0) {
-    .loop-accent-theme((@counter-color - 1));
-
-    @colorName: extract(@globalAccentColors, @counter-color);
-
-    &{
-      // .mdui-text-color-[color]-accent
-      .mdui-text-color-@{colorName}-accent when not (@colorName = null) {
-        .mdui-text-color(@colorName, a200) !important;
-      }
-
-      .loop-accent-degree-theme(@counter-degree) when (@counter-degree > 0) {
-        .loop-accent-degree-theme((@counter-degree - 1));
-
-        @degree: extract(@globalAccentColorDegrees, @counter-degree);
-
-        // .mdui-text-color-[color]-[degree]
-        .mdui-text-color-@{colorName}-@{degree} when not (@degree = null) {
-          .mdui-text-color(@colorName, @degree) !important;
-        }
-      }
-      .loop-accent-degree-theme(@global-accent-color-degrees-length);
-    }
-  }
-  .loop-accent-theme(@global-accent-colors-length);
-}
-
-
-/**
- * .mdui-text-color-black
- * .mdui-text-color-black-[]
- * .mdui-text-color-theme-[]
- */
-
-.mdui-text-color-black {
-  color: @color-black !important;
-}
-.mdui-text-color-black-text,
-.mdui-text-color-theme-text {
-  color: @color-black-text !important;
-}
-.mdui-text-color-black-secondary,
-.mdui-text-color-theme-secondary {
-  color: @color-black-secondary !important;
-}
-.mdui-text-color-black-disabled,
-.mdui-text-color-theme-disabled {
-  color: @color-black-disabled !important;
-}
-.mdui-text-color-black-divider,
-.mdui-text-color-theme-divider {
-  color: @color-black-divider !important;
-}
-.mdui-text-color-black-icon,
-.mdui-text-color-theme-icon {
-  color: @color-black-icon !important;
-}
-.mdui-text-color-black-icon-disabled,
-.mdui-text-color-theme-icon-disabled {
-  color: @color-black-icon-disabled !important;
-}
-
-/**
- * .mdui-text-color-white
- * .mdui-text-color-white-[]
- */
-.mdui-text-color-white {
-  color: @color-white !important;
-}
-.mdui-text-color-white-text {
-  color: @color-white-text !important;
-}
-.mdui-text-color-white-secondary {
-  color: @color-white-secondary !important;
-}
-.mdui-text-color-white-disabled {
-  color: @color-white-disabled !important;
-}
-.mdui-text-color-white-divider {
-  color: @color-white-divider !important;
-}
-.mdui-text-color-white-icon {
-  color: @color-white-icon !important;
-}
-.mdui-text-color-white-icon-disabled {
-  color: @color-white-icon-disabled !important;
-}
-
-/**
- * .mdui-text-color-theme-[] 深色主题
- */
-.layout-theme({
-  .mdui-text-color-theme-text {
-    color: @color-white-text !important;
-  }
-  .mdui-text-color-theme-secondary {
-    color: @color-white-secondary !important;
-  }
-  .mdui-text-color-theme-disabled {
-    color: @color-white-disabled !important;
-  }
-  .mdui-text-color-theme-divider {
-    color: @color-white-divider !important;
-  }
-  .mdui-text-color-theme-icon {
-    color: @color-white-icon !important;
-  }
-  .mdui-text-color-theme-icon-disabled {
-    color: @color-white-icon-disabled !important;
-  }
-});

package/src/styles/global.less

@@ -1,75 +0,0 @@
-/**
- * =============================================================================
- * ************   公共样式   ************
- * =============================================================================
- */
-* {
-  -webkit-tap-highlight-color: transparent;
-}
-
-body {
-  color: @body-text-color;
-  font-size: @screen-xs-font-size;
-  font-family: @font-family-base;
-  background-color: @body-background-color;
-  @media (min-width: @screen-sm-min) {
-    font-size: @screen-sm-font-size;
-  }
-  @media (min-width: @screen-md-min) {
-    font-size: @screen-md-font-size;
-  }
-
-  // 滚动条样式
-  * {
-    .mdui-scrollbar-beautify(light);
-  }
-}
-
-/* 锁定屏幕 */
-body.mdui-locked {
-  overflow: hidden;
-}
-
-/* 遮罩层 */
-.mdui-overlay {
-  position: fixed;
-  top: -5000px;
-  right: -5000px;
-  bottom: -5000px;
-  left: -5000px;
-  z-index: @z-index-overlay;
-  background: rgba(0, 0, 0, .4);
-  backface-visibility: hidden;
-  visibility: hidden;
-  opacity: 0;
-  transition-duration: .3s;
-  transition-property: opacity, visibility;
-  will-change: opacity;
-}
-
-/* 显示遮罩层 */
-.mdui-overlay-show {
-  visibility: visible;
-  opacity: 1;
-}
-
-/* 取消 transition 过渡效果 */
-.mdui-no-transition {
-  transition-property: none !important;
-}
-
-
-/**
- * =============================================================================
- * ************   Global dark   ************
- * =============================================================================
- */
-.layout-theme({
-  color: #fff;
-  background-color: @layout-dark-color-3;
-
-  // 夜间模式滚动条样式
-  * {
-    .mdui-scrollbar-beautify(dark);
-  }
-});

package/src/styles/grid.less

@@ -1,150 +0,0 @@
-/**
- * =============================================================================
- * ************   Grid 网格系统   ************
- * =============================================================================
- */
-
-@_screen-col-1: 8.333333%;
-@_screen-col-2: 16.666667%;
-@_screen-col-3: 25%;
-@_screen-col-4: 33.333333%;
-@_screen-col-5: 41.666667%;
-@_screen-col-6: 50%;
-@_screen-col-7: 58.333333%;
-@_screen-col-8: 66.666667%;
-@_screen-col-9: 75%;
-@_screen-col-10: 83.333333%;
-@_screen-col-11: 91.666667%;
-@_screen-col-12: 100%;
-
-// 等分列
-@_screen-average-1: 100%;
-@_screen-average-2: 50%;
-@_screen-average-3: 33.333333%;
-@_screen-average-4: 25%;
-@_screen-average-5: 20%;
-@_screen-average-6: 16.666667%;
-@_screen-average-7: 14.285714%;
-@_screen-average-8: 12.5%;
-@_screen-average-9: 11.111111%;
-@_screen-average-10: 10%;
-@_screen-average-11: 9.090909%;
-@_screen-average-12: 8.333333%;
-
-//间隔
-@grid-gap-8: 8px;
-@grid-gap-16: 16px;
-@grid-gap-24: 24px;
-@grid-gap-40: 40px;
-
-// 生成列、列偏移
-._grid_col_loop(@cols, @screen) when (@cols > 0) {
-  ._grid_col_loop((@cols - 1), @screen);
-
-  @widthName: '_screen-col-@{cols}';
-
-  // 列宽度
-  .mdui-col-@{screen}-@{cols} {
-    float: left;
-    width: @@widthName;
-  }
-
-  // 列偏移
-  .mdui-col-offset-@{screen}-@{cols} {
-    margin-left: @@widthName;
-  }
-
-  // 等分列
-  @averageName: '_screen-average-@{cols}';
-  .mdui-row-@{screen}-@{cols} .mdui-col {
-    float: left;
-    width: @@averageName;
-  }
-}
-
-.mdui-container,
-.mdui-container-fluid {
-  box-sizing: border-box;
-  margin-right: auto;
-  margin-left: auto;
-  padding-right: @grid-gap-16 / 2;
-  padding-left: @grid-gap-16 / 2;
-  &::after{
-    display: table;
-    clear: both;
-    content: '';
-  }
-}
-
-.mdui-container {
-  width: 96%;
-  max-width: 1280px;
-  @media (min-width: @screen-sm-min) {
-    width: 94%;
-  }
-  @media (min-width: @screen-md-min) {
-    width: 92%;
-  }
-}
-
-.mdui-row,
-[class*="mdui-row-"] {
-  margin-right: -@grid-gap-16 / 2;
-  margin-left: -@grid-gap-16 / 2;
-  &::after {
-    display: table;
-    clear: both;
-    content: '';
-  }
-}
-
-[class*="mdui-col-xs-"],
-[class*="mdui-col-sm-"],
-[class*="mdui-col-md-"],
-[class*="mdui-col-lg-"],
-[class*="mdui-col-xl-"],
-.mdui-col {
-  position: relative;
-  box-sizing: border-box;
-  min-height: 1px;
-  padding-right: @grid-gap-16 / 2;
-  padding-left: @grid-gap-16 / 2;
-}
-
-/* 取消列间距 */
-.mdui-row-gapless {
-  .mdui-col,
-  [class*="mdui-col-xs-"],
-  [class*="mdui-col-sm-"],
-  [class*="mdui-col-md-"],
-  [class*="mdui-col-lg-"],
-  [class*="mdui-col-xl-"] {
-    padding-right: 0;
-    padding-left: 0;
-  }
-
-  // 嵌套元素的内补
-  .mdui-row,
-  [class*="mdui-row-"] {
-    margin-right: 0;
-    margin-left: 0;
-  }
-}
-
-._grid_col_loop(12, ~"xs");
-
-@media (min-width: @screen-sm-min) {
-  ._grid_col_loop(12, ~"sm");
-}
-
-@media (min-width: @screen-md-min) {
-  ._grid_col_loop(12, ~"md");
-}
-
-@media (min-width: @screen-lg-min) {
-  ._grid_col_loop(12, ~"lg");
-}
-
-@media (min-width: @screen-xl-min) {
-  ._grid_col_loop(12, ~"xl");
-}