mdui 1.0.2 → 2.0.1

package/src/styles/helper.less

@@ -1,242 +0,0 @@
-/**
- * =============================================================================
- * ************   Helper 辅助类   ************
- * =============================================================================
- */
-
-/**
- * =================== 边距
- */
-._spacing_margin_mixin(@spacing) when (@spacing > -1) {
-  ._spacing_margin_mixin(@spacing - 1);
-
-  .mdui-m-a-@{spacing} {
-    .mdui-m-a(@spacing) !important;
-  }
-  .mdui-m-t-@{spacing} {
-    .mdui-m-t(@spacing) !important;
-  }
-  .mdui-m-r-@{spacing} {
-    .mdui-m-r(@spacing) !important;
-  }
-  .mdui-m-b-@{spacing} {
-    .mdui-m-b(@spacing) !important;
-  }
-  .mdui-m-l-@{spacing} {
-    .mdui-m-l(@spacing) !important;
-  }
-  .mdui-m-x-@{spacing} {
-    .mdui-m-x(@spacing) !important;
-  }
-  .mdui-m-y-@{spacing} {
-    .mdui-m-y(@spacing) !important;
-  }
-
-  .mdui-p-a-@{spacing} {
-    .mdui-p-a(@spacing) !important;
-  }
-  .mdui-p-t-@{spacing} {
-    .mdui-p-t(@spacing) !important;
-  }
-  .mdui-p-r-@{spacing} {
-    .mdui-p-r(@spacing) !important;
-  }
-  .mdui-p-b-@{spacing} {
-    .mdui-p-b(@spacing) !important;
-  }
-  .mdui-p-l-@{spacing} {
-    .mdui-p-l(@spacing) !important;
-  }
-  .mdui-p-x-@{spacing} {
-    .mdui-p-x(@spacing) !important;
-  }
-  .mdui-p-y-@{spacing} {
-    .mdui-p-y(@spacing) !important;
-  }
-}
-
-._spacing_margin_mixin(5);
-
-
-/**
- * ======================== 快速浮动
- */
-
-/* 向左浮动 */
-.mdui-float-left {
-  float: left !important;
-}
-
-/* 向右浮动 */
-.mdui-float-right {
-  float: right !important;
-}
-
-/**
- * ========================= 水平居中
- */
-
-/* 水平居中 */
-.mdui-center {
-  .mdui-center() !important;
-}
-
-/**
- * ========================= 垂直居中
- */
-
-/* 垂直居中 */
-.mdui-valign {
-  .mdui-valign() !important;
-}
-
-/**
- * ========================= 文本对齐方式
- */
-
-/* 文本左对齐 */
-.mdui-text-left {
-  text-align: left !important;
-}
-
-/* 文本居中对齐 */
-.mdui-text-center {
-  text-align: center !important;
-}
-
-/* 文本向右对齐 */
-.mdui-text-right {
-  text-align: right !important;
-}
-
-/**
- * ========================= 文本大小写转换
- */
-
-/* 文本转为小写 */
-.mdui-text-lowercase {
-  text-transform: lowercase !important;
-}
-
-/* 文本转为大写 */
-.mdui-text-uppercase {
-  text-transform: uppercase !important;
-}
-
-/* 文本转为单词的首字母大写 */
-.mdui-text-capitalize {
-  text-transform: capitalize !important;
-}
-
-/**
- * ======================== 文本截断
- */
-
-/* 文本截断 */
-.mdui-text-truncate {
-  .mdui-text-truncate();
-}
-
-/**
- * ========================= 清除浮动
- */
-
-/* 清除浮动 */
-.mdui-clearfix {
-  .mdui-clearfix();
-}
-
-/**
- * ========================= 隐藏内容
- */
-
-/* 隐藏元素 */
-.mdui-hidden,
-[hidden] {
-  display: none !important;
-}
-
-/* 使元素不可见 */
-.mdui-invisible {
-  visibility: hidden;
-}
-
-/* Responsive utilities 响应式工具
-   ========================================================================== */
-
-/* 在特定屏幕的特备上隐藏 */
-@media (max-width: @screen-xs-max) {
-  .mdui-hidden-xs {
-    display: none !important;
-  }
-}
-@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
-  .mdui-hidden-sm {
-    display: none !important;
-  }
-}
-@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
-  .mdui-hidden-md {
-    display: none !important;
-  }
-}
-@media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
-  .mdui-hidden-lg {
-    display: none !important;
-  }
-}
-@media (min-width: @screen-xl-min) {
-  .mdui-hidden-xl {
-    display: none !important;
-  }
-}
-
-/* 在比特定屏幕小的设备上隐藏 */
-@media (max-width: @screen-xs-max) {
-  .mdui-hidden-xs-down {
-    display: none !important;
-  }
-}
-@media (max-width: @screen-sm-max) {
-  .mdui-hidden-sm-down {
-    display: none !important;
-  }
-}
-@media (max-width: @screen-md-max) {
-  .mdui-hidden-md-down {
-    display: none !important;
-  }
-}
-@media (max-width: @screen-lg-max) {
-  .mdui-hidden-lg-down {
-    display: none !important;
-  }
-}
-.mdui-hidden-xl-down {
-  display: none !important;
-}
-
-/* 在比特定屏幕大的设备上隐藏 */
-.mdui-hidden-xs-up {
-  display: none !important;
-}
-@media (min-width: @screen-sm-min) {
-  .mdui-hidden-sm-up {
-    display: none !important;
-  }
-}
-@media (min-width: @screen-md-min) {
-  .mdui-hidden-md-up {
-    display: none !important;
-  }
-}
-@media (min-width: @screen-lg-min) {
-  .mdui-hidden-lg-up {
-    display: none !important;
-  }
-}
-@media (min-width: @screen-xl-min) {
-  .mdui-hidden-xl-up {
-    display: none !important;
-  }
-}

package/src/styles/icon.less

@@ -1,31 +0,0 @@
-/**
- * =============================================================================
- * ************   Icon 图标   ************
- * =============================================================================
- */
-
-.mdui-icon,
-.mdui-icon::before {
-  color: inherit;
-  font-weight: normal;
-  font-size: 24px;  /* Preferred icon size */
-  font-style: normal;
-  line-height: 1;
-  direction: ltr;
-  letter-spacing: normal;
-  white-space: nowrap;
-  text-transform: none;
-  vertical-align: middle;
-  word-wrap: normal;
-}
-
-.mdui-icon {
-  display: inline-block;
-  text-align: center;
-}
-
-.mdui-icon::before {
-  display: block !important;
-  width: 24px;
-  height: 24px;
-}

package/src/styles/material-icons.less

@@ -1,36 +0,0 @@
-/**
- * =============================================================================
- * ************   Material Icons   ************
- * =============================================================================
- *
- * https://github.com/google/material-design-icons/
- * v3.0.1
- */
-
-@import './icon';
-
-@font-face {
-  font-weight: 400;
-  font-family: 'Material Icons';
-  font-style: normal;
-  src: local('Material Icons'), local('MaterialIcons-Regular'),
-    url(../icons/material-icons/MaterialIcons-Regular.woff2) format('woff2'),
-    url(../icons/material-icons/MaterialIcons-Regular.woff) format('woff');
-}
-
-.material-icons {
-  /* stylelint-disable-next-line */
-  font-family: 'Material Icons';
-
-  /* Support for all WebKit browsers. */
-  -webkit-font-smoothing: antialiased;
-
-  /* Support for Safari and Chrome. */
-  text-rendering: optimizeLegibility;
-
-  /* Support for Firefox. */
-  -moz-osx-font-smoothing: grayscale;
-
-  /* Support for IE. */
-  font-feature-settings: 'liga';
-}

package/src/styles/media.less

@@ -1,39 +0,0 @@
-/**
- * =============================================================================
- * ************   Media 媒体工具   ************
- * =============================================================================
- */
-
-/* 响应式图片和视频 */
-.mdui-img-fluid,
-.mdui-video-fluid {
-  .mdui-img-fluid();
-}
-
-/* 圆角图片 */
-.mdui-img-rounded {
-  border-radius: 2px;
-}
-
-/* 圆形图片 */
-.mdui-img-circle {
-  border-radius: 50%;
-}
-
-// embed
-.mdui-video-container {
-  position: relative;
-  height: 0;
-  padding-bottom: 56.25%;
-  overflow: hidden;
-
-  iframe,
-  object,
-  embed {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%
-  }
-}

package/src/styles/mixin/color.less

@@ -1,66 +0,0 @@
-// 根据背景色设置文本色
-._mdui-color-text-color(@color-is-dark) {
-  & when (@color-is-dark = true) {
-    color: @color-white-text;
-  }
-  & when (@color-is-dark = false) {
-    color: @color-black-text;
-  }
-}
-
-// hover 状态背景色
-._mdui-background-color-hover(@colorName) {
-  @color-is-dark: 'color-@{colorName}-500-is-dark';
-  & when (@@color-is-dark = true) {
-    @color: 'color-@{colorName}-400';
-
-    background-color: @@color;
-  }
-  & when (@@color-is-dark = false) {
-    @color: 'color-@{colorName}-600';
-
-    background-color: @@color;
-  }
-}
-
-// active 状态背景色
-._mdui-background-color-active(@colorName) {
-  @color-is-dark: 'color-@{colorName}-500-is-dark';
-  & when (@@color-is-dark = true) {
-    @color: 'color-@{colorName}-300';
-
-    background-color: @@color;
-  }
-  & when (@@color-is-dark = false) {
-    @color: 'color-@{colorName}-700';
-
-    background-color: @@color;
-  }
-}
-
-// 仅设置背景色
-.mdui-background-color(@colorName, @degree: 500) {
-  @color: 'color-@{colorName}-@{degree}';
-
-  background-color: @@color;
-}
-
-// 背景色和文本色
-.mdui-color(@colorName, @degree: 500) {
-  .mdui-background-color(@colorName, @degree);
-
-  @color-is-dark: 'color-@{colorName}-@{degree}-is-dark';
-  ._mdui-color-text-color(@@color-is-dark);
-}
-
-// 文本色
-.mdui-text-color(@colorName, @degree: 500, @opacity: 1) {
-  @color: 'color-@{colorName}-@{degree}';
-
-  & when (@opacity = 1) {
-    color: @@color;
-  }
-  & when (@opacity < 1) {
-    color: rgba(red(@@color), green(@@color), blue(@@color), @opacity);
-  }
-}

package/src/styles/mixin/divider.less

@@ -1,30 +0,0 @@
-// 分割线
-// =============================================================================
-
-// 添加边框作为分割线，亮色的分割线，用于深色背景
-.mdui-divider-top-light() {
-  border-top: 1px solid @color-white-divider;
-}
-.mdui-divider-bottom-light() {
-  border-bottom: 1px solid @color-white-divider;
-}
-.mdui-divider-left-light() {
-  border-left: 1px solid @color-white-divider;
-}
-.mdui-divider-right-light() {
-  border-right: 1px solid @color-white-divider;
-}
-
-// 添加边框作为分割线，深色的分割线，用于浅色背景
-.mdui-divider-top-dark() {
-  border-top: 1px solid @color-black-divider;
-}
-.mdui-divider-bottom-dark() {
-  border-bottom: 1px solid @color-black-divider;
-}
-.mdui-divider-left-dark() {
-  border-left: 1px solid @color-black-divider;
-}
-.mdui-divider-right-dark() {
-  border-right: 1px solid @color-black-divider;
-}

package/src/styles/mixin/helper.less

@@ -1,126 +0,0 @@
-// ======================== 边距
-.mdui-m-a(@spacing) {
-  margin: @spacing * @spacing-base;
-}
-.mdui-m-t(@spacing) {
-  margin-top: @spacing * @spacing-base;
-}
-.mdui-m-r(@spacing) {
-  margin-right: @spacing * @spacing-base;
-}
-.mdui-m-b(@spacing) {
-  margin-bottom: @spacing * @spacing-base;
-}
-.mdui-m-l(@spacing) {
-  margin-left: @spacing * @spacing-base;
-}
-.mdui-m-x(@spacing) {
-  margin-right: @spacing * @spacing-base;
-  margin-left: @spacing * @spacing-base;
-}
-.mdui-m-y(@spacing) {
-  margin-top: @spacing * @spacing-base;
-  margin-bottom: @spacing * @spacing-base;
-}
-
-.mdui-p-a(@spacing) {
-  padding: @spacing * @spacing-base;
-}
-.mdui-p-t(@spacing) {
-  padding-top: @spacing * @spacing-base;
-}
-.mdui-p-r(@spacing) {
-  padding-right: @spacing * @spacing-base;
-}
-.mdui-p-b(@spacing) {
-  padding-bottom: @spacing * @spacing-base;
-}
-.mdui-p-l(@spacing) {
-  padding-left: @spacing * @spacing-base;
-}
-.mdui-p-x(@spacing) {
-  padding-right: @spacing * @spacing-base;
-  padding-left: @spacing * @spacing-base;
-}
-.mdui-p-y(@spacing) {
-  padding-top: @spacing * @spacing-base;
-  padding-bottom: @spacing * @spacing-base;
-}
-
-//=========================== 清除浮动
-// 清除浮动
-.mdui-clearfix() {
-  &::before,
-  &::after {
-    display: table;
-    content: ' ';
-  }
-  &::after {
-    clear: both;
-  }
-}
-
-// 用省略号代替被截断的文本
-.mdui-text-truncate() {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-// 文本强制换行
-.mdui-textwrap() {
-  word-wrap: break-word;
-  word-break: break-all;
-}
-
-// 使子元素垂直居中
-.mdui-valign() {
-  display: flex;
-  align-items: center;
-}
-
-// 使元素水平居中
-.mdui-center() {
-  display: block;
-  margin-right: auto;
-  margin-left: auto;
-}
-
-// 美化滚动条样式
-.mdui-scrollbar-beautify(@layout: light) {
-  // 亮色主题
-  & when (@layout = light) {
-    &::-webkit-scrollbar {
-      width: 5px;
-      height: 5px;
-      background: transparent;
-      // 桌面端
-      @media (min-width: @screen-md-min) {
-        width: 8px;
-        height: 8px;
-      }
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: rgba(0, 0, 0, 0.2);
-    }
-  }
-
-  // 暗色主题
-  & when (@layout = dark) {
-    &::-webkit-scrollbar {
-      width: 5px;
-      height: 5px;
-      background: transparent;
-      // 桌面端
-      @media (min-width: @screen-md-min) {
-        width: 8px;
-        height: 8px;
-      }
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: rgba(255, 255, 255, 0.3);
-    }
-  }
-}

package/src/styles/mixin/icon.less

@@ -1,33 +0,0 @@
-// 图标颜色，纯黑色图标有 54% 不透明度，其他颜色保持原色
-.mdui-icon-color(@colorName) {
-  @color: 'color-@{colorName}-500';
-  & when (@colorName = black) {
-    color: @color-black-icon;
-  }
-  & when not (@colorName = black) {
-    color: @@color;
-  }
-}
-
-// 禁用状态图标颜色，深色图标有 26% 不透明度，浅色图标有 30% 不透明度
-.mdui-icon-color-disabled(@colorName) {
-  @color: 'color-@{colorName}-500';
-  @color-is-dark: 'color-@{colorName}-500-is-dark';
-
-  & when (@@color-is-dark = true) {
-    color: rgba(
-      red(@@color),
-      green(@@color),
-      blue(@@color),
-      @opacity-black-icon-disabled
-    );
-  }
-  & when (@@color-is-dark = false) {
-    color: rgba(
-      red(@@color),
-      green(@@color),
-      blue(@@color),
-      @opacity-white-icon-disabled
-    );
-  }
-}

package/src/styles/mixin/layout-theme.less

@@ -1,14 +0,0 @@
-.layout-theme(@rules) {
-  & when (@globalLayoutDark = true) {
-    .mdui-theme-layout-dark {
-      @rules();
-    }
-  }
-  & when (@globalLayoutAuto = true) {
-    @media (prefers-color-scheme: dark) {
-      .mdui-theme-layout-auto {
-        @rules();
-      }
-    }
-  }
-}

package/src/styles/mixin/media.less

@@ -1,11 +0,0 @@
-.mdui-img-fluid() {
-  display: block;
-  max-width: 100%;
-  height: auto;
-}
-
-.mdui-video-fluid() {
-  display: block;
-  max-width: 100%;
-  height: auto;
-}

package/src/styles/mixin/shadow.less

@@ -1,17 +0,0 @@
-// 阴影
-.mdui-shadow(@depth) {
-  @shadow: 'shadow-depth-@{depth}';
-
-  box-shadow: @@shadow;
-}
-
-// hover 时添加阴影
-.mdui-hoverable(@depth: 8) {
-  transition: box-shadow 0.25s @animation-curve-default;
-  will-change: box-shadow;
-
-  &:hover,
-  &:focus {
-    .mdui-shadow(@depth);
-  }
-}