mdui 1.0.1 → 2.0.0

package/src/components/button/index.less

@@ -1,291 +0,0 @@
-/**
- * =============================================================================
- * ************   Button 按钮   ************
- * =============================================================================
- */
-
-/* 默认为 Flat 扁平按钮 */
-.mdui-btn,
-.mdui-fab {
-  position: relative;
-  display: inline-block;
-  box-sizing: border-box;
-  min-width: 88px;
-  height: @button-height;
-  margin: 0;
-  padding: 0 16px;
-  overflow: hidden;
-  color: inherit;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: @button-height;
-  letter-spacing: 0.04em;
-  white-space: nowrap;
-  text-align: center;
-  text-transform: uppercase;
-  text-decoration: none;
-  vertical-align: middle;
-  background: transparent;
-  border: none;
-  border-radius: 2px;
-  outline: none;
-  cursor: pointer;
-  transition: all .2s @animation-curve-default,
-              box-shadow .2s @animation-curve-fast-out-linear-in;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-
-  // 移除点击延迟触发
-  touch-action: manipulation;
-  will-change: box-shadow;
-  zoom: 1;
-  -webkit-user-drag: none;
-
-  // 透明按钮 hover、active 时颜色加深
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.1);
-  }
-  &:not(.mdui-ripple):active {
-    background-color: rgba(0, 0, 0, 0.165);
-  }
-
-  // 带背景色的按钮 hover、active 时增加透明度
-  &[class*="mdui-color-"]:hover {
-    opacity: 0.87;
-  }
-  &:not(.mdui-ripple)[class*="mdui-color-"]:active {
-    opacity: 0.76;
-  }
-}
-
-/* 按钮内的图标 */
-.mdui-btn {
-  .mdui-icon-left,
-  .mdui-icon-right {
-    &,
-    &::before {
-      height: inherit;
-      font-size: 1.3em;
-      line-height: inherit;
-    }
-  }
-  .mdui-icon-left {
-    float: left;
-    margin-right: 0.4em;
-  }
-  .mdui-icon-right {
-    float: right;
-    margin-left: 0.4em;
-  }
-}
-
-input.mdui-btn[type="submit"] {
-  appearance: none;
-}
-
-/* Raised button 浮动按钮 */
-.mdui-btn-raised {
-  .mdui-shadow(2);
-
-  &:hover {
-    .mdui-shadow(4);
-  }
-
-  &:active {
-    .mdui-shadow(8);
-  }
-}
-
-/* 禁用按钮 */
-.mdui-btn,
-.mdui-fab {
-  &[disabled] {
-    &,
-    &:hover,
-    &:active,
-    &:focus {
-      color: rgba(0, 0, 0, .26) !important;
-      background-color: transparent !important;
-      cursor: default !important;
-      opacity: 1 !important;
-      .mdui-shadow(0) !important;
-      .mdui-icon {
-        color: rgba(0, 0, 0, .26) !important;
-      }
-    }
-  }
-}
-
-/* 禁用状态浮动按钮和浮动操作按钮 */
-.mdui-btn-raised,
-.mdui-fab {
-  &[disabled] {
-    &,
-    &:hover,
-    &:active,
-    &:focus {
-      background-color: rgba(0, 0, 0, .12) !important;
-      .mdui-shadow(2) !important;
-    }
-  }
-}
-
-/* 加粗按钮文本 */
-.mdui-btn-bold {
-  font-weight: bold;
-}
-
-/* 图标按钮 */
-.mdui-btn-icon {
-  width: 36px;
-  min-width: 36px;
-  height: 36px;
-  margin-right: 0;
-  margin-left: 0;
-  padding: 0;
-  overflow: hidden;
-  font-size: 24px;
-  line-height: normal;
-  border-radius: 50%;
-
-  .mdui-icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 24px;
-    line-height: 24px;
-    transform: translate(-12px, -12px);
-  }
-
-  &.mdui-ripple {
-    transform: translateZ(0);
-  }
-}
-
-/* 按钮 100% 宽度 */
-.mdui-btn-block {
-  display: block;
-  width: 100%;
-}
-
-/* 密集型按钮 */
-.mdui-btn-dense {
-  height: 32px;
-  font-size: 13px;
-  line-height: 32px;
-
-  &.mdui-btn-icon {
-    width: 32px;
-    min-width: 32px;
-  }
-}
-
-/* 按钮组 */
-.mdui-btn-group {
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-
-  .mdui-btn {
-    float: left;
-    min-width: inherit;
-    padding: 0 12px;
-    color: rgba(0, 0, 0, 0.54);
-    border-radius: 0;
-
-    &::before {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      border-left: 1px solid transparent;
-      content: ' ';
-    }
-
-    &:first-child {
-      border-top-left-radius: 2px;
-      border-bottom-left-radius: 2px;
-
-      &::before {
-        border-left: none;
-      }
-    }
-
-    &:last-child {
-      border-top-right-radius: 2px;
-      border-bottom-right-radius: 2px;
-    }
-
-    // 激活状态
-    &.mdui-btn-active {
-      color: rgba(0, 0, 0, 0.87);
-      background-color: rgba(0, 0, 0, 0.215);
-
-      &+.mdui-btn-active {
-        &::before {
-          border-left: 1px solid rgba(0, 0, 0, 0.145);
-        }
-      }
-    }
-  }
-}
-
-
-/**
- * =============================================================================
- * ************   Button dark   ************
- * =============================================================================
- */
-.layout-theme({
-  // 透明按钮 hover、active 时颜色变浅
-  .mdui-btn,
-  .mdui-fab {
-    // 透明按钮 hover、active 时颜色变浅
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.1);
-    }
-    &:not(.mdui-ripple):active {
-      background-color: rgba(255, 255, 255, 0.165);
-    }
-
-    // 带背景的按钮 hover、active 时增加透明度
-    &[class*="mdui-color-"]:hover {
-      opacity: 0.87;
-    }
-    &:not(.mdui-ripple)[class*="mdui-color-"]:active {
-      opacity: 0.76;
-    }
-  }
-
-  // 禁用按钮
-  .mdui-btn,
-  .mdui-fab {
-    &[disabled] {
-      &,
-      &:hover,
-      &:active,
-      &:focus {
-        color: @color-white-icon-disabled !important;
-        background-color: transparent !important;
-        .mdui-icon {
-          color: @color-white-icon-disabled !important;
-        }
-      }
-    }
-  }
-
-  // 禁用状态浮动按钮和浮动操作按钮
-  .mdui-btn-raised,
-  .mdui-fab {
-    &[disabled] {
-      &,
-      &:hover,
-      &:active,
-      &:focus {
-        background-color: rgba(255, 255, 255, .12) !important;
-      }
-    }
-  }
-});

package/src/components/card/index.less

@@ -1,200 +0,0 @@
-/**
- * =============================================================================
- * ************   Card 卡片   ************
- * =============================================================================
- */
-
-/* 卡片 */
-.mdui-card {
-  position: relative;
-  box-sizing: border-box;
-  overflow: hidden;
-  color: #000;
-  background-color: #fff;
-  border-radius: 2px;
-  .mdui-shadow(2);
-}
-
-/**
- * ===================== 头部，包含头像、标题、副标题
- */
-.mdui-card-header {
-  position: relative;
-  box-sizing: border-box;
-  height: 72px;
-  padding: 16px;
-}
-
-/* 卡片头部头像 */
-.mdui-card-header-avatar {
-  float: left;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-}
-
-/* 卡片头部标题 */
-.mdui-card-header-title {
-  display: block;
-  margin-left: 52px;
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 20px;
-  opacity: @opacity-black-text;
-  .mdui-text-truncate();
-}
-
-/* 卡片头部副标题 */
-.mdui-card-header-subtitle {
-  display: block;
-  margin-left: 52px;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 20px;
-  opacity: @opacity-black-secondary;
-  .mdui-text-truncate();
-}
-
-/**
- * =========================== 主标题区域
- */
-.mdui-card-primary {
-  position: relative;
-  padding: 24px 16px 16px 16px;
-}
-
-/* 主标题区域标题 */
-.mdui-card-primary-title {
-  display: block;
-  font-size: 24px;
-  line-height: 36px;
-  opacity: @opacity-black-text;
-}
-
-/* 主标题区域副标题 */
-.mdui-card-primary-subtitle {
-  display: block;
-  font-size: 14px;
-  line-height: 24px;
-  opacity: @opacity-black-secondary;
-}
-
-/**
- * ============================ 内容区域
- */
-.mdui-card-content {
-  position: relative;
-  padding: 16px;
-  font-size: 14px;
-  line-height: 24px;
-}
-
-/**
- * ============================ 卡片菜单
- */
-.mdui-card-menu {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  z-index: 1;
-
-  .mdui-btn {
-    margin-left: 8px;
-  }
-}
-
-/**
- * =========================== 按钮区域
- */
-.mdui-card-actions {
-  .mdui-clearfix();
-
-  position: relative;
-  box-sizing: border-box;
-  padding: 8px;
-
-  .mdui-btn {
-    max-width: 100%;
-    margin: 0 8px 0 0;
-    .mdui-text-truncate();
-  }
-
-  .mdui-btn-icon {
-    width: @button-height;
-    height: @button-height;
-    margin: 0 8px;
-  }
-}
-
-/* 使按钮竖向排列 */
-.mdui-card-actions-stacked {
-  .mdui-btn {
-    display: block;
-    margin: 0 0 4px 0;
-    &:last-child {
-      margin: 0;
-    }
-  }
-}
-
-/**
- * ============================= 媒体元素区域
- */
-.mdui-card-media {
-  position: relative;
-  img, video {
-    display: block;
-    width: 100%;
-  }
-}
-
-/* 覆盖在媒体元素上的内容 */
-.mdui-card-media-covered {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  color: #fff;
-  background: rgba(0, 0, 0, 0.2);
-
-  /* 覆盖在媒体元素上的标题 */
-  .mdui-card-primary-title {
-    opacity: @opacity-white-text;
-  }
-  .mdui-card-primary-subtitle {
-    opacity: @opacity-white-secondary;
-  }
-}
-
-/* 覆盖在媒体元素顶部 */
-.mdui-card-media-covered-top {
-  top: 0;
-  bottom: auto;
-}
-
-/* 覆盖层透明 */
-.mdui-card-media-covered-transparent {
-  background: transparent;
-}
-
-/* 覆盖层渐变 */
-.mdui-card-media-covered-gradient {
-  background: linear-gradient(to top, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0));
-
-  &.mdui-card-media-covered-top {
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0));
-  }
-}
-
-
-/**
- * =============================================================================
- * ************   Card dark   ************
- * =============================================================================
- */
-.layout-theme({
-  .mdui-card {
-    color: #fff;
-    background-color: @layout-dark-color-4;
-  }
-});

package/src/components/chip/index.less

@@ -1,97 +0,0 @@
-/**
- * =============================================================================
- * ************   Chip 纸片   ************
- * =============================================================================
- */
-
-@chip-height: 32px;
-
-.mdui-chip {
-  display: inline-block;
-  box-sizing: border-box;
-  height: @chip-height;
-  margin: 2px 0;
-  color: inherit;
-  white-space: nowrap;
-  background-color: #e0e0e0;
-  border-radius: @chip-height / 2;
-  cursor: pointer;
-  user-select: none;
-  .mdui-hoverable(2);
-
-  &:active {
-    background-color: #d6d6d6;
-  }
-}
-
-/* 左侧的图标 */
-.mdui-chip-icon {
-  position: relative;
-  display: inline-block;
-  width: @chip-height;
-  height: @chip-height;
-  margin-right: -4px;
-  overflow: hidden;
-  color: #fff;
-  font-size: 18px;
-  line-height: @chip-height;
-  text-align: center;
-  vertical-align: middle;
-  background-color: #989898;
-  border-radius: 50%;
-
-  .mdui-icon {
-    position: absolute;
-    top: 4px;
-    left: 4px;
-    color: #fff;
-  }
-}
-
-/* 文本 */
-.mdui-chip-title {
-  display: inline-block;
-  height: @chip-height;
-  padding-right: 12px;
-  padding-left: 12px;
-  font-size: 14px;
-  line-height: @chip-height;
-  vertical-align: middle;
-}
-
-/* 删除按钮 */
-.mdui-chip-delete {
-  display: inline-block;
-  width: 24px;
-  height: 24px;
-  margin-right: 4px;
-  margin-left: -8px;
-  overflow: hidden;
-  text-align: center;
-  text-decoration: none;
-  vertical-align: middle;
-  border-radius: 50%;
-  cursor: pointer;
-  opacity: .54;
-  transition: opacity .25s @animation-curve-default;
-  will-change: opacity;
-  &:hover,
-  &:focus {
-    opacity: .87;
-  }
-}
-
-
-/**
- * =============================================================================
- * ************   Chip dark   ************
- * =============================================================================
- */
-.layout-theme({
-  .mdui-chip {
-    background-color: #484848;
-    &:active {
-      background-color: #5d5d5d;
-    }
-  }
-});