mdui 1.0.2 → 2.0.0

package/src/components/appbar/index.less

@@ -1,110 +0,0 @@
-/**
- * =============================================================================
- * ************   Appbar 应用栏   ************
- * =============================================================================
- */
-
-@import '../toolbar/index';
-@import '../headroom/index';
-
-.mdui-appbar {
-  z-index: @z-index-appbar;
-  .mdui-shadow(4);
-}
-
-/* appbar 固定在顶部 */
-.mdui-appbar-fixed {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  transition-timing-function: @animation-curve-linear-out-slow-in;
-  transition-duration: 0.3s;
-  transition-property: left, right;
-  will-change: left, right;
-}
-
-/* 左侧留出抽屉栏的距离 */
-.mdui-appbar-inset.mdui-appbar-fixed {
-  .mdui-drawer-body-left & {
-    @media (min-width: @screen-md-min) {
-      left: @drawer-width-md;
-    }
-  }
-
-  .mdui-drawer-body-right & {
-    @media (min-width: @screen-md-min) {
-      right: @drawer-width-md;
-    }
-  }
-}
-
-/* 含工具栏 */
-.mdui-appbar-with-toolbar {
-  padding-top: @appbar-height-xs-portrait;
-
-  // 平板和桌面
-  @media (min-width: @screen-sm-min) {
-    padding-top: @appbar-height-sm;
-  }
-
-  // 手机横屏
-  @media (orientation: landscape) and (max-width: @screen-xs-max-landscape) {
-    padding-top: @appbar-height-xs-landscape;
-  }
-}
-
-/* 含 Tab */
-.mdui-appbar-with-tab {
-  padding-top: 48px;
-}
-
-/* 含大 Tab  */
-.mdui-appbar-with-tab-larger {
-  padding-top: 72px;
-}
-
-/* 含工具栏和 Tab */
-.mdui-appbar-with-toolbar.mdui-appbar-with-tab {
-  padding-top: @appbar-height-xs-portrait + 48px;
-
-  // 平板和桌面
-  @media (min-width: @screen-sm-min) {
-    padding-top: @appbar-height-sm + 48px;
-  }
-
-  // 手机横屏
-  @media (orientation: landscape) and (max-width: @screen-xs-max-landscape) {
-    padding-top: @appbar-height-xs-landscape + 48px;
-  }
-}
-
-/* 含工具栏和大 Tab */
-.mdui-appbar-with-toolbar.mdui-appbar-with-tab-larger {
-  padding-top: @appbar-height-xs-portrait + 72px;
-
-  // 平板和桌面
-  @media (min-width: @screen-sm-min) {
-    padding-top: @appbar-height-sm + 72px;
-  }
-
-  // 手机横屏
-  @media (orientation: landscape) and (max-width: @screen-xs-max-landscape) {
-    padding-top: @appbar-height-xs-landscape + 72px;
-  }
-}
-
-
-/**
- * =============================================================================
- * ************   Appbar dark   ************
- * =============================================================================
- */
-.layout-theme({
-  .mdui-appbar {
-    &>[class*="mdui-color-"]:not(.mdui-color-transparent) {
-      color: #fff !important;
-      background-color: @layout-dark-color-2 !important;
-    }
-  }
-});

package/src/components/appbar/index.ts

@@ -1,19 +0,0 @@
-import $ from 'mdui.jq/es/$';
-import mdui from '../../mdui';
-import '../../global/mutation';
-import '../headroom';
-
-$(() => {
-  // 滚动时隐藏应用栏
-  mdui.mutation('.mdui-appbar-scroll-hide', function () {
-    new mdui.Headroom(this);
-  });
-
-  // 滚动时只隐藏应用栏中的工具栏
-  mdui.mutation('.mdui-appbar-scroll-toolbar-hide', function () {
-    new mdui.Headroom(this, {
-      pinnedClass: 'mdui-headroom-pinned-toolbar',
-      unpinnedClass: 'mdui-headroom-unpinned-toolbar',
-    });
-  });
-});

package/src/components/bottom_nav/index.less

@@ -1,155 +0,0 @@
-/**
- * =============================================================================
- * ************   Bottom navigation 底部导航栏   ************
- * =============================================================================
- */
-
-@import '../headroom/index';
-
-.mdui-bottom-nav {
-  position: relative;
-  display: flex;
-  height: 56px;
-  margin: 0 auto;
-  padding: 0;
-  overflow: hidden;
-  white-space: nowrap;
-
-  @media (min-width: @screen-sm-min) {
-    &::before {
-      flex-grow: 1;
-      content: ' ';
-    }
-    &::after {
-      flex-grow: 1;
-      content: ' ';
-    }
-  }
-
-  a {
-    display: flex;
-    flex: 1;
-
-    // 使图标和文本垂直排列
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    min-width: 32px;
-    max-width: none;
-    padding: 8px 12px 10px 12px;
-    overflow: hidden;
-    color: inherit;
-    font-size: 12px;
-    text-align: center;
-    text-decoration: none;
-    text-overflow: ellipsis;
-    cursor: pointer;
-    opacity: 0.7;
-    transition: all .2s @animation-curve-default ;
-    user-select: none;
-    will-change: padding;
-
-    @media (min-width: @screen-sm-min) {
-      max-width: 144px;
-    }
-
-    .mdui-icon {
-      opacity: 0.7;
-    }
-
-    label {;
-      display: block;
-      width: 100%;
-      cursor: pointer;
-      transition: transform .2s @animation-curve-default ;
-      will-change: font-size;
-    }
-
-    .mdui-icon + label {
-      margin-top: 6px;
-    }
-
-    // 激活状态的导航项
-    &.mdui-bottom-nav-active {
-      color: @color-default-500;
-      font-size: 14px;
-      opacity: 1;
-
-      .mdui-icon {
-        opacity: 1;
-      }
-    }
-  }
-}
-
-/* 只在激活时显示文本 */
-&.mdui-bottom-nav-text-auto {
-  a {
-    min-width: 32px;
-    padding-right: 0;
-    padding-left: 0;
-    @media (min-width: @screen-sm-min) {
-      max-width: 156px;
-    }
-    .mdui-icon {
-      padding-top: 16px;
-      transition: padding-top .2s @animation-curve-default;
-      will-change: padding-top;
-    }
-    label {
-      transform: scale(0);
-    }
-
-    &.mdui-bottom-nav-active {
-      padding-right: 18px;
-      padding-left: 18px;
-      .mdui-icon {
-        padding-top: 0;
-      }
-      label {
-        transform: scale(1);
-      }
-    }
-  }
-}
-
-/* 固定到页面底部 */
-.mdui-bottom-nav-fixed {
-  .mdui-bottom-nav {
-    position: fixed;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
-
-  padding-bottom: 56px;
-}
-
-/**
- * =============================================================================
- * ************   Bottom Nav 主色   ************
- * =============================================================================
- */
-
-& {
-  .loop-primary-theme(@counter-color) when (@counter-color > 0) {
-    .loop-primary-theme((@counter-color - 1));
-    @colorName: extract(@globalPrimaryColors, @counter-color);
-    @color: 'color-@{colorName}-500';
-
-    .mdui-theme-primary-@{colorName} when not (@colorName = null) {
-      .mdui-bottom-nav a.mdui-bottom-nav-active {
-        color: @@color;
-      }
-    }
-
-  }
-  .loop-primary-theme(length(@globalPrimaryColors));
-}
-
-/* 带背景色的底部导航栏 */
-.mdui-bottom-nav[class*="mdui-color-"] {
-  .mdui-bottom-nav-active {
-    color: inherit !important;
-  }
-}

package/src/components/bottom_nav/index.ts

@@ -1,43 +0,0 @@
-import $ from 'mdui.jq/es/$';
-import 'mdui.jq/es/methods/addClass';
-import 'mdui.jq/es/methods/children';
-import 'mdui.jq/es/methods/each';
-import 'mdui.jq/es/methods/is';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/parent';
-import 'mdui.jq/es/methods/removeClass';
-import mdui from '../../mdui';
-import '../../global/mutation';
-import { componentEvent } from '../../utils/componentEvent';
-import { $document } from '../../utils/dom';
-import '../headroom';
-
-$(() => {
-  // 切换导航项
-  $document.on('click', '.mdui-bottom-nav>a', function () {
-    const $item = $(this as HTMLElement);
-    const $bottomNav = $item.parent();
-
-    $bottomNav.children('a').each((index, item) => {
-      const isThis = $item.is(item);
-
-      if (isThis) {
-        componentEvent('change', 'bottomNav', $bottomNav[0], undefined, {
-          index,
-        });
-      }
-
-      isThis
-        ? $(item).addClass('mdui-bottom-nav-active')
-        : $(item).removeClass('mdui-bottom-nav-active');
-    });
-  });
-
-  // 滚动时隐藏 mdui-bottom-nav-scroll-hide
-  mdui.mutation('.mdui-bottom-nav-scroll-hide', function () {
-    new mdui.Headroom(this, {
-      pinnedClass: 'mdui-headroom-pinned-down',
-      unpinnedClass: 'mdui-headroom-unpinned-down',
-    });
-  });
-});

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;
-      }
-    }
-  }
-});