mdui 1.0.2 → 2.0.0

package/src/components/selection_control/radio.less

@@ -1,163 +0,0 @@
-/**
- * =============================================================================
- * ************   Radio 单选框   ************
- * =============================================================================
- */
-
-.mdui-radio {
-  position: relative;
-  display: inline-block;
-  height: 36px;
-  padding-left: 36px;
-  line-height: 36px;
-  cursor: pointer;
-  user-select: none;
-
-  // 隐藏系统 input 标签，用自定义的图标代替
-  input {
-    position: absolute;
-    width: 0;
-    height: 0;
-    overflow: hidden;
-    opacity: 0;
-  }
-}
-
-/* 图标外圈 */
-.mdui-radio-icon {
-  position: absolute;
-  top: 9px;
-  left: 0;
-  display: inline-block;
-  box-sizing: border-box;
-  width: 18px;
-  height: 18px;
-  vertical-align: middle;
-  border: 2px solid @color-black-icon;
-  border-radius: 18px;
-  transition: all .3s @animation-curve-default,
-              box-shadow .14s @animation-curve-default;
-
-  // 图标内部圆圈
-  &::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 14px;
-    height: 14px;
-    background-color: @color-default-a200;
-    border-radius: 14px;
-    transform: scale(0);
-    opacity: 0;
-    transition: all .3s @animation-curve-default;
-    content: ' ';
-  }
-}
-
-/* 选中状态的图标 */
-.mdui-radio input[type="radio"]:checked + .mdui-radio-icon {
-  border-color: @color-default-a200;
-
-  &::before {
-    transform: scale(0.68);
-    opacity: 1;
-  }
-}
-
-/* 禁用状态的图标 */
-.mdui-radio input[type="radio"]:disabled + .mdui-radio-icon {
-  border-color: @color-black-icon-disabled !important;
-}
-
-/* 禁用且选中状态的图标 */
-.mdui-radio input[type="radio"]:disabled:checked + .mdui-radio-icon {
-  &::before {
-    background-color: @color-black-icon-disabled !important;
-  }
-}
-
-/* 未选中、禁用时 按下的阴影 */
-.mdui-radio:active input[type="radio"],
-.mdui-radio input[type="radio"]:focus {
-  & + .mdui-radio-icon {
-    box-shadow: 0 0 0 15px rgba(0, 0, 0, 0.1);
-  }
-}
-
-/* 已选中时按下的阴影 */
-.mdui-radio:active input[type="radio"],
-.mdui-radio input[type="radio"]:focus {
-  &:checked:not(:disabled) + .mdui-radio-icon {
-    box-shadow: 0 0 0 15px rgba(red(@color-default-a200), green(@color-default-a200), blue(@color-default-a200), 0.16);
-  }
-}
-
-/**
- * =============================================================================
- * ************   Radio 强调色   ************
- * =============================================================================
- */
-
-& {
-  .loop-accent-theme(@counter-color) when (@counter-color > 0) {
-    .loop-accent-theme((@counter-color - 1));
-    @colorName: extract(@globalAccentColors, @counter-color);
-
-    @color: 'color-@{colorName}-a200';
-
-    .mdui-theme-accent-@{colorName} when not (@colorName = null) {
-
-      // 选中状态的图标
-      .mdui-radio input[type="radio"]:checked + .mdui-radio-icon {
-        border-color: @@color;
-
-        &::before {
-          background-color: @@color;
-        }
-      }
-
-      // 已选中时按下的阴影
-      .mdui-radio:active input[type="radio"],
-      .mdui-radio input[type="radio"]:focus {
-        &:checked:not(:disabled) + .mdui-radio-icon {
-          box-shadow: 0 0 0 15px rgba(red(@@color), green(@@color), blue(@@color), 0.16);
-        }
-      }
-
-    }
-  }
-  .loop-accent-theme(length(@globalAccentColors));
-}
-
-
-/**
- * =============================================================================
- * ************   Radio dark   ************
- * =============================================================================
- */
-.layout-theme({
-  // 图标外圈
-  .mdui-radio-icon {
-    border-color: rgba(255, 255, 255, 0.7);
-  }
-
-  // 禁用状态
-  .mdui-radio input[type="radio"]:disabled + .mdui-radio-icon {
-    border-color: @color-white-icon-disabled !important;
-  }
-
-  // 禁用且选中状态
-  .mdui-radio input[type="radio"]:disabled:checked + .mdui-radio-icon {
-    &::before {
-      background-color: @color-white-icon-disabled !important;
-    }
-  }
-
-  // 未选中或禁用时 按下的阴影
-  .mdui-radio:active input[type="radio"],
-  .mdui-radio input[type="radio"]:focus {
-    & + .mdui-radio-icon {
-      box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.1);
-    }
-  }
-});

package/src/components/selection_control/switch.less

@@ -1,210 +0,0 @@
-/**
- * =============================================================================
- * ************   Switch 单选框   ************
- * =============================================================================
- */
-
-.mdui-switch {
-  display: inline-block;
-  height: 36px;
-  line-height: 36px;
-  cursor: pointer;
-  user-select: none;
-
-  // 隐藏系统 input 标签，用自定义的图标代替
-  input {
-    position: absolute;
-    width: 0;
-    height: 0;
-    overflow: hidden;
-    opacity: 0;
-  }
-}
-
-/* 图标轨道 */
-.mdui-switch-icon {
-  position: relative;
-  display: inline-block;
-  width: 36px;
-  height: 14px;
-  vertical-align: middle;
-  background-color: rgba(0, 0, 0, 0.38);
-  border-radius: 14px;
-  transition: background-color .3s @animation-curve-default;
-
-  // 圆形图标
-  &::before {
-    position: absolute;
-    top: -3px;
-    left: -3px;
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    background-color: @color-grey-50;
-    border-radius: 20px;
-    transition: box-shadow .14s @animation-curve-default,
-                background-color .3s @animation-curve-default,
-                left .3s @animation-curve-default;
-    content: ' ';
-    .mdui-shadow(1);
-  }
-}
-
-/* 选中状态的图标 */
-.mdui-switch input[type="checkbox"]:checked + .mdui-switch-icon {
-  background-color: rgba(red(@color-default-a200), green(@color-default-a200), blue(@color-default-a200), 0.5);
-
-  &::before {
-    left: 20px;
-    background-color: @color-default-a200;
-  }
-}
-
-/* 未选中时或禁用时 按下的阴影 */
-.mdui-switch:active input[type="checkbox"],
-.mdui-switch input[type="checkbox"]:focus {
-  & + .mdui-switch-icon::before {
-    box-shadow:
-      // box-shadow(1)
-      0 2px 1px -1px rgba(0, 0, 0, .2),
-      0 1px 1px 0 rgba(0, 0, 0, .14),
-      0 1px 3px 0 rgba(0, 0, 0, .12),
-
-        // 颜色阴影
-      0 0 0 15px rgba(0, 0, 0, 0.1);
-  }
-}
-
-/* 已选中时按下的阴影 */
-.mdui-switch:active input[type="checkbox"],
-.mdui-switch input[type="checkbox"]:focus {
-  &:checked:not(:disabled) + .mdui-switch-icon::before {
-    box-shadow:
-      // box-shadow(1)
-      0 2px 1px -1px rgba(0, 0, 0, .2),
-      0 1px 1px 0 rgba(0, 0, 0, .14),
-      0 1px 3px 0 rgba(0, 0, 0, .12),
-
-        // 颜色阴影
-      0 0 0 15px rgba(red(@color-default-a200), green(@color-default-a200), blue(@color-default-a200), 0.16);
-  }
-}
-
-/* 禁用状态 */
-.mdui-switch input[type="checkbox"]:disabled + .mdui-switch-icon {
-  background-color: rgba(0, 0, 0, 0.12) !important;
-
-  &::before {
-    background-color: @color-grey-400 !important;
-  }
-}
-
-
-/**
- * =============================================================================
- * ************   Switch 强调色   ************
- * =============================================================================
- */
-
-& {
-  .loop-accent-theme(@counter-color) when (@counter-color > 0) {
-    .loop-accent-theme((@counter-color - 1));
-    @colorName: extract(@globalAccentColors, @counter-color);
-
-    @color: 'color-@{colorName}-a200';
-
-    .mdui-theme-accent-@{colorName} when not (@colorName = null) {
-
-      // 选中状态的图标
-      .mdui-switch input[type="checkbox"]:checked + .mdui-switch-icon {
-        background-color: rgba(red(@@color), green(@@color), blue(@@color), 0.5);
-
-        &::before {
-          background-color: @@color;
-        }
-      }
-
-      // 已选中时按下的阴影
-      .mdui-switch:active input[type="checkbox"],
-      .mdui-switch input[type="checkbox"]:focus {
-        &:checked:not(:disabled) + .mdui-switch-icon::before {
-          box-shadow:
-            // box-shadow(1)
-            0 2px 1px -1px rgba(0, 0, 0, .2),
-            0 1px 1px 0 rgba(0, 0, 0, .14),
-            0 1px 3px 0 rgba(0, 0, 0, .12),
-
-              // 颜色阴影
-            0 0 0 15px rgba(red(@@color), green(@@color), blue(@@color), 0.16);
-        }
-      }
-
-    }
-  }
-  .loop-accent-theme(length(@globalAccentColors));
-}
-
-
-/**
- * =============================================================================
- * ************   Radio dark   ************
- * =============================================================================
- */
-.layout-theme({
-  // 默认状态
-  .mdui-switch-icon {
-    background-color: rgba(255, 255, 255, 0.3);
-
-    &::before {
-      background-color: @color-grey-400;
-    }
-  }
-
-  // 选中状态
-  & {
-    .loop-accent-theme(@counter-color) when (@counter-color > 0) {
-      .loop-accent-theme((@counter-color - 1));
-      @colorName: extract(@globalAccentColors, @counter-color);
-
-      @color: 'color-@{colorName}-a200';
-      @color-a100: 'color-@{colorName}-a100';
-
-      &.mdui-theme-accent-@{colorName} when not (@colorName = null) {
-
-        .mdui-switch input[type="checkbox"]:checked + .mdui-switch-icon {
-          background-color: rgba(red(@@color-a100), green(@@color-a100), blue(@@color-a100), 0.5);
-
-          &::before {
-            background-color: @@color-a100;
-          }
-        }
-
-      }
-    }
-    .loop-accent-theme(length(@globalAccentColors));
-  }
-
-  // 未选中或禁用时 按下的阴影
-  .mdui-switch:active input[type="checkbox"],
-  .mdui-switch input[type="checkbox"]:focus {
-    & + .mdui-switch-icon::before {
-      box-shadow:
-        // box-shadow(1)
-        0 2px 1px -1px rgba(0, 0, 0, .2),
-        0 1px 1px 0 rgba(0, 0, 0, .14),
-        0 1px 3px 0 rgba(0, 0, 0, .12),
-
-          // 颜色阴影
-        0 0 0 15px rgba(255, 255, 255, 0.1);
-    }
-  }
-
-  // 禁用状态
-  .mdui-switch input[type="checkbox"]:disabled + .mdui-switch-icon {
-    background-color: rgba(255, 255, 255, 0.1) !important;
-
-    &::before {
-      background-color: @color-grey-800 !important;
-    }
-  }
-});

package/src/components/slider/index.less

@@ -1,340 +0,0 @@
-/**
- * =============================================================================
- * ************   Slider 滑块   ************
- * =============================================================================
- */
-
-@slider-light-color: #bdbdbd; // rgba(0, 0, 0, .26)
-@slider-light-color-focus: #9e9e9e; // rgba(0, 0, 0, .38)
-@slider-light-color-disabled: #bdbdbd; // rgba(0, 0, 0, .26)
-
-@slider-dark-color: #4c4c4c; // rgba(255, 255, 255, .3)
-@slider-dark-color-focus: #4c4c4c; // rgba(255, 255, 255, .3)
-@slider-dark-color-disabled: #4c4c4c; // rgba(255, 255, 255, .3)
-
-.mdui-slider {
-  position: relative;
-  display: block;
-  width: 100%;
-  height: 36px;
-
-  input[type="range"] {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    z-index: 2;
-    width: 100%;
-    height: 20px;
-    margin-top: -10px;
-    cursor: pointer;
-    opacity: 0;
-    appearance: none;
-  }
-}
-
-.mdui-slider-track,
-.mdui-slider-fill {
-  position: absolute;
-  top: 50%;
-  box-sizing: border-box;
-  height: 2px;
-  margin-top: -1px;
-
-  &::before {
-    display: block;
-    width: 100%;
-    height: 100%;
-    content: ' ';
-  }
-}
-
-/* 轨道 */
-.mdui-slider-track {
-  right: 0;
-
-  &::before {
-    background-color: @slider-light-color;
-    transition: background-color .3s @animation-curve-default;
-  }
-}
-
-/* 已滑动部分 */
-.mdui-slider-fill {
-  left: 0;
-
-  &::before {
-    background-color: @color-default-a200;
-  }
-}
-
-/* 滑块 */
-.mdui-slider-thumb {
-  position: absolute;
-  top: 50%;
-  box-sizing: border-box;
-  width: 12px;
-  height: 12px;
-  margin-top: -6px;
-  background-color: @color-default-a200;
-  border: 2px solid @color-default-a200;
-  border-radius: 50%;
-  transform: translate(-50%);
-  transition:
-    background .45s @animation-curve-default,
-    border-color .45s @animation-curve-default,
-    transform .2s @animation-curve-default,
-    border-radius .2s @animation-curve-default;
-  will-change: background, border-color, transform, border-radius;
-}
-
-
-/**
- * =============================================================================
- * ************   Slider 强调色   ************
- * =============================================================================
- */
-
-& {
-  .loop-accent-theme(@counter-color) when (@counter-color > 0) {
-    .loop-accent-theme((@counter-color - 1));
-    @colorName: extract(@globalAccentColors, @counter-color);
-
-    @color: 'color-@{colorName}-a200';
-
-    .mdui-theme-accent-@{colorName} when not (@colorName = null) {
-
-      .mdui-slider-fill {
-
-        &::before {
-          background-color: @@color;
-        }
-      }
-
-      .mdui-slider-thumb {
-        background-color: @@color;
-        border: 2px solid @@color;
-      }
-    }
-  }
-  .loop-accent-theme(length(@globalAccentColors));
-}
-
-
-/**
- * =============================================================================
- * ============   Slider 的不同状态   ============
- * =============================================================================
- */
-
-/* 鼠标按下状态 */
-.mdui-slider-focus {
-  .mdui-slider-track {
-
-    &::before {
-      background-color: @slider-light-color-focus;
-    }
-  }
-
-  .mdui-slider-thumb {
-    transform: translate(-50%) scale(1.6);
-  }
-}
-
-/* 滑块值为 0 */
-.mdui-slider-zero {
-  .mdui-slider-thumb {
-    background-color: #fff;
-    border-color: @slider-light-color;
-  }
-}
-
-/* 滑块值为 0，且鼠标按下 */
-.mdui-slider-zero.mdui-slider-focus {
-  .mdui-slider-thumb {
-    border-color: @slider-light-color-focus;
-  }
-}
-
-/* 禁用状态 */
-.mdui-slider-disabled {
-  input[type="range"] {
-    cursor: default;
-  }
-
-  .mdui-slider-track {
-
-    &::before {
-      background-color: @slider-light-color-disabled;
-    }
-  }
-
-  .mdui-slider-fill {
-
-    &::before {
-      background-color: @slider-light-color-disabled;
-    }
-  }
-
-  .mdui-slider-thumb {
-    background-color: @slider-light-color-disabled;
-    border-color: transparent !important;
-    transform: translate(-50%) scale(.72);
-  }
-}
-
-/**
- * =============================================================================
- * ============   间续型滑块   ============
- * =============================================================================
- */
-.mdui-slider-discrete {
-
-  .mdui-slider-thumb {
-    width: 30px;
-    height: 30px;
-    margin-top: -15px;
-    margin-left: -15px;
-    border: none;
-    transform: rotate(-45deg) scale(.4);
-
-    // 间续型滑块的值显示
-    span {
-      position: absolute;
-      top: 9px;
-      left: -1px;
-      width: 100%;
-      color: #fff;
-      font-size: 12px;
-      text-align: center;
-      transform: rotate(45deg);
-      opacity: 0;
-      transition: opacity .25s @animation-curve-default;
-    }
-  }
-
-  // 鼠标按下状态
-  &.mdui-slider-focus {
-    .mdui-slider-thumb {
-      border-radius: 15px 15px 15px 0;
-      transform: rotate(-45deg) scale(1) translate(22px, -22px);
-
-      span {
-        opacity: 1;
-      }
-    }
-  }
-
-  // 滑块值为 0
-  &.mdui-slider-zero {
-    .mdui-slider-thumb {
-      background-color: #323232;
-    }
-  }
-
-  // 滑块值为 0，且鼠标按下
-  &.mdui-slider-zero.mdui-slider-focus {
-    .mdui-slider-thumb {
-      background-color: @slider-light-color;
-    }
-  }
-
-  // 禁用状态
-  &.mdui-slider-disabled {
-    .mdui-slider-thumb {
-      transform: rotate(-45deg) scale(.288);
-    }
-  }
-
-  // 滑块值为 0，且禁用
-  &.mdui-slider-zero.mdui-slider-disabled {
-    .mdui-slider-thumb {
-      background-color: @slider-light-color;
-    }
-  }
-}
-
-/**
- * =============================================================================
- * ************   Slider dark   ************
- * =============================================================================
- */
-.layout-theme({
-  // 轨道
-  .mdui-slider-track {
-
-    &::before {
-      background-color: @slider-dark-color;
-    }
-  }
-
-  // 鼠标按下状态
-  .mdui-slider-focus {
-    .mdui-slider-track {
-
-      &::before {
-        background-color: @slider-dark-color-focus;
-      }
-    }
-  }
-
-  // 滑块值为 0
-  .mdui-slider-zero {
-    .mdui-slider-thumb {
-      background-color: @layout-dark-color-3;
-      border-color: @slider-dark-color;
-    }
-  }
-
-  // 滑块值为 0，且鼠标按下
-  .mdui-slider-zero.mdui-slider-focus {
-    .mdui-slider-thumb {
-      border-color: @slider-dark-color-focus;
-    }
-  }
-
-  // 禁用状态
-  .mdui-slider-disabled {
-    .mdui-slider-track {
-
-      &::before {
-        background-color: @slider-dark-color-disabled;
-      }
-    }
-
-    .mdui-slider-fill {
-
-      &::before {
-        background-color: @slider-dark-color-disabled;
-      }
-    }
-
-    .mdui-slider-thumb {
-      background-color: @slider-dark-color-disabled;
-    }
-  }
-
-  // 间续型滑块
-  .mdui-slider-discrete {
-
-    // 滑块值为 0
-    &.mdui-slider-zero {
-      .mdui-slider-thumb {
-        background-color: #fefefe;
-      }
-    }
-
-    // 滑块值为 0，且鼠标按下
-    &.mdui-slider-zero.mdui-slider-focus {
-      .mdui-slider-thumb {
-        background-color: #5c5c5c;
-      }
-    }
-
-    // 滑块值为 0，且禁用
-    &.mdui-slider-zero.mdui-slider-disabled {
-      .mdui-slider-thumb {
-        background-color: @slider-dark-color-disabled;
-      }
-    }
-  }
-});