add readme
This commit is contained in:
Boyuzhou
parent
9429292a92
commit
f8afec3e63
22
README.md
22
README.md
|
|
@ -13,8 +13,16 @@ tinper-bee组件库的核心样式及公用方法库
|
|||
## 工具方法库
|
||||
|
||||
### set-global
|
||||
- 设置body字体及颜色
|
||||
- 设置图表间距
|
||||
- 设置显隐u-visible u-not-visible
|
||||
- 设置边框u-border-top...
|
||||
- 设置左右浮动u-right
|
||||
- 设置xs和sm时u-hidden-xs的隐藏
|
||||
### set-h5bp
|
||||
- html5标签的跨浏览器样式适配
|
||||
### set-mobile
|
||||
- 删除FAB按钮周围的不需要的框
|
||||
### set-normalize
|
||||
### set-resets
|
||||
### util-iconfont
|
||||
|
|
@ -23,8 +31,20 @@ tinper-bee组件库的核心样式及公用方法库
|
|||
### util-tool
|
||||
### util-utilities
|
||||
### minxin-colors
|
||||
- $palette-red
|
||||
- [文档](http://tinper.org/dist/neoui/global/color.html)
|
||||
### minxin-mixins
|
||||
|
||||
### minxin-palette
|
||||
- 设置根据minxin-colors的颜色生成背景颜色和字体颜色
|
||||
### minxin-themeColors
|
||||
- 设置主色和辅色
|
||||
### minxin-variables
|
||||
- 默认变量
|
||||
- 默认字体
|
||||
- 默认颜色
|
||||
- 字体大小和粗细
|
||||
- 波纹效果
|
||||
- 贝塞尔曲线动画
|
||||
- 阴影
|
||||
- 常用z-index值设定
|
||||
- UI组件的预设
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
// 全局设置类文件
|
||||
@import "./set-normalize";
|
||||
@import "./set-global";
|
||||
@import "./set-resets";
|
||||
|
||||
|
||||
|
||||
// 工具类文件
|
||||
|
|
|
|||
|
|
@ -297,7 +297,7 @@
|
|||
transition: transform $transition;
|
||||
}
|
||||
|
||||
|
||||
//添加圆角
|
||||
@mixin border-top-radius($radius) {
|
||||
border-top-right-radius: $radius;
|
||||
border-top-left-radius: $radius;
|
||||
|
|
@ -322,7 +322,7 @@
|
|||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
//badge
|
||||
//徽章
|
||||
@mixin badge-variant($color, $bg) {
|
||||
color: $color;
|
||||
background-color: $bg;
|
||||
|
|
@ -337,7 +337,7 @@
|
|||
}
|
||||
|
||||
|
||||
//labels
|
||||
//标签
|
||||
|
||||
@mixin tag-styles-variant($color, $hover-color) {
|
||||
background-color: $color;
|
||||
|
|
@ -357,7 +357,7 @@
|
|||
}
|
||||
|
||||
|
||||
// Pagination
|
||||
// 分页
|
||||
|
||||
@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
|
||||
> li {
|
||||
|
|
|
|||
|
|
@ -4,4 +4,15 @@ $color-primary: $palette-indigo-500 !default;
|
|||
$color-primary-dark: $palette-indigo-700 !default;
|
||||
$color-primary-light: $palette-indigo-400 !default;
|
||||
$color-accent: $palette-green-600 !default;
|
||||
$color-accent-light: $palette-green-500 !default;
|
||||
$color-accent-light: $palette-green-500 !default;
|
||||
|
||||
|
||||
// cyan主题
|
||||
//$color-primary: $palette-cyan-500 !default;
|
||||
//$color-primary-dark: $palette-cyan-700 !default;
|
||||
//$color-accent: $palette-light-blue-500 !default;
|
||||
|
||||
// orange主题
|
||||
//$color-primary: $palette-orange-500 !default;
|
||||
//$color-primary-dark: $palette-orange-700 !default;
|
||||
//$color-accent: $palette-deep-orange-500 !default;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
$preferred_font: 'Microsoft YaHei', 'Helvetica', 'Arial', sans-serif !default;
|
||||
|
||||
// $performance_font: 'Helvetica', 'Arial', sans-serif !default;
|
||||
|
||||
@import "minxin-colors";
|
||||
|
|
@ -19,27 +19,15 @@ $trim-color-classes: false !default;
|
|||
|
||||
@import "minxin-themeColors";
|
||||
|
||||
/* 主题颜色放入 minxin-themeColors.scss
|
||||
$color-primary: $palette-indigo-500 !default;
|
||||
$color-primary-dark: $palette-indigo-700 !default;
|
||||
$color-accent: $palette-pink-A200 !default;
|
||||
*/
|
||||
|
||||
$color-primary-contrast: $color-dark-contrast !default;
|
||||
$color-accent-contrast: $color-dark-contrast !default;
|
||||
$color-text: $palette-grey-900 !default;
|
||||
|
||||
// cyan主题
|
||||
//$color-primary: $palette-cyan-500 !default;
|
||||
//$color-primary-dark: $palette-cyan-700 !default;
|
||||
//$color-accent: $palette-light-blue-500 !default;
|
||||
|
||||
// orange主题
|
||||
//$color-primary: $palette-orange-500 !default;
|
||||
//$color-primary-dark: $palette-orange-700 !default;
|
||||
//$color-accent: $palette-deep-orange-500 !default;
|
||||
//不明所以 $primary-color: unquote("rgba(#{$palette-grey-500}, 0.20)") !default;
|
||||
|
||||
// -- Fonts
|
||||
$preferred-font: "Roboto", "Helvetica", "Arial", sans-serif !default;
|
||||
$preferred-font: 'Open Sans','Helvetica Neue',Arial,'Hiragino Sans GB','Microsoft YaHei',sans-serif !default;
|
||||
$font-size: 1.6 * $unit !default;
|
||||
$font-size-tiny: 1.2 * $unit !default;
|
||||
$font-size-small: 1.4 * $unit !default;
|
||||
|
|
@ -57,7 +45,6 @@ $font-weight-light: 300;
|
|||
$font-weight-normal: 400;
|
||||
$font-weight-medium: 500;
|
||||
$font-weight-bold: 700;
|
||||
|
||||
$font-weight-base: $font-weight-normal;
|
||||
|
||||
|
||||
|
|
@ -87,7 +74,7 @@ $line-height-base: 1.57142857;
|
|||
/* 波纹效果 */
|
||||
$ripple-bg-color: unquote("rgb(#{$color-dark-contrast})") !default;
|
||||
|
||||
/* 动画 */
|
||||
/*贝塞尔曲线动画 */
|
||||
$animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
|
||||
$animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
|
||||
$animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
|
||||
|
|
@ -104,7 +91,7 @@ $shadow-key-penumbra-opacity: 0.14 !default;
|
|||
$shadow-ambient-shadow-opacity: 0.12 !default;
|
||||
|
||||
|
||||
$primary-color: unquote("rgba(#{$palette-grey-500}, 0.20)") !default;
|
||||
|
||||
//-- Indexes
|
||||
$z-index-highest: 300;
|
||||
$z-index-higher: 200;
|
||||
|
|
@ -124,7 +111,7 @@ $zindex-header: 1100;
|
|||
$zindex-footer: 1000;
|
||||
|
||||
|
||||
/* ========== 字体 ========== */
|
||||
/* ========== 文本字体 ========== */
|
||||
|
||||
$text-color-primary: unquote("rgba(#{$color-black}, 0.87)") !default;
|
||||
$text-link-color: unquote("rgb(#{$color-accent})") !default;
|
||||
|
|
|
|||
|
|
@ -1,18 +1,20 @@
|
|||
|
||||
@import "minxin-colors";
|
||||
|
||||
@import "minxin-variables";
|
||||
|
||||
//主要颜色,次要颜色值与ui中保持一致
|
||||
@import "minxin-themeColors";
|
||||
|
||||
|
||||
body{
|
||||
font-family:'Open Sans','Helvetica Neue',Arial,'Hiragino Sans GB','Microsoft YaHei',sans-serif;
|
||||
font-color:#333333;
|
||||
font-family: $preferred-font;
|
||||
font-color:$font-color;
|
||||
}
|
||||
|
||||
|
||||
//图标 左右内间距为5px;
|
||||
i.uf,i.fa{
|
||||
i.uf{
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
|
|
@ -63,4 +65,3 @@ i.uf,i.fa{
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
========================================================================== */
|
||||
|
||||
html {
|
||||
color: $text-color-primary;
|
||||
font-size: 1em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
|
@ -70,7 +69,7 @@ textarea {
|
|||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Browser Upgrade Prompt
|
||||
浏览器升级提示
|
||||
========================================================================== */
|
||||
|
||||
.browserupgrade {
|
||||
|
|
@ -80,23 +79,6 @@ textarea {
|
|||
padding: 0.2em 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
帮助样式
|
||||
========================================================================== */
|
||||
|
|
@ -122,8 +104,7 @@ textarea {
|
|||
}
|
||||
|
||||
/*
|
||||
* Extends the .visuallyhidden class to allow the element
|
||||
* to be focusable when navigated to via the keyboard:
|
||||
* 扩展.visuallyhidden类以允许元素*在通过键盘导航时是可对焦的：
|
||||
* https://www.drupal.org/node/897638
|
||||
*/
|
||||
|
||||
|
|
@ -138,7 +119,7 @@ textarea {
|
|||
}
|
||||
|
||||
/*
|
||||
* Hide visually and from screen readers, but maintain layout
|
||||
* 隐藏视觉和屏幕阅读器，但保持布局
|
||||
*/
|
||||
|
||||
.invisible {
|
||||
|
|
@ -146,15 +127,13 @@ textarea {
|
|||
}
|
||||
|
||||
/*
|
||||
* Clearfix: contain floats
|
||||
*
|
||||
* For modern browsers
|
||||
* 1. The space content is one way to avoid an Opera bug when the
|
||||
* `contenteditable` attribute is included anywhere else in the document.
|
||||
* Otherwise it causes space to appear at the top and bottom of elements
|
||||
* that receive the `clearfix` class.
|
||||
* 2. The use of `table` rather than `block` is only necessary if using
|
||||
* `:before` to contain the top-margins of child elements.
|
||||
* Clearfix：包含浮点
|
||||
* 对于现代浏览器
|
||||
* 1.当`contenteditable`属性包含在文档中的任何其他地方时，
|
||||
* 空间内容是避免Opera错误的一种方法。 否则会导致空格出现
|
||||
* 在接收`clearfix`类的元素的顶部和底部。
|
||||
* 2.如果使用`：before`包含子元素的顶部边距，
|
||||
* 则只需要使用`table`而不是`block`。
|
||||
*/
|
||||
|
||||
.clearfix:before,
|
||||
|
|
@ -168,9 +147,7 @@ textarea {
|
|||
}
|
||||
|
||||
/* ==========================================================================
|
||||
EXAMPLE Media Queries for Responsive Design.
|
||||
These examples override the primary ('mobile first') styles.
|
||||
Modify as content requires.
|
||||
示例响应设计的媒体查询。这些示例覆盖主要（“移动优先”）样式。根据内容进行修改。
|
||||
========================================================================== */
|
||||
|
||||
@media only screen and (min-width: 35em) {
|
||||
|
|
@ -184,9 +161,8 @@ textarea {
|
|||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Print styles.
|
||||
Inlined to avoid the additional HTTP request:
|
||||
http://www.phpied.com/delay-loading-your-print-css/
|
||||
打印样式。内联以避免额外的HTTP请求
|
||||
|
||||
========================================================================== */
|
||||
|
||||
@media print {
|
||||
|
|
@ -215,8 +191,8 @@ textarea {
|
|||
}
|
||||
|
||||
/*
|
||||
* Don't show links that are fragment identifiers,
|
||||
* or use the `javascript:` pseudo protocol
|
||||
* 不显示片段标识符的链接，
|
||||
* 或使用`javascript：`伪协议
|
||||
*/
|
||||
|
||||
a[href^="#"]:after,
|
||||
|
|
@ -231,7 +207,7 @@ textarea {
|
|||
}
|
||||
|
||||
/*
|
||||
* Printing Tables:
|
||||
* 打印表格:
|
||||
* http://css-discuss.incutio.com/wiki/Printing_Tables
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
/* Remove the unwanted box around FAB buttons */
|
||||
/* 删除FAB按钮周围的不需要的框 */
|
||||
a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
|
||||
.mdl-icon-toggle, .mdl-item, .mdl-radio, .mdl-slider, .mdl-switch, .mdl-tabs__tab {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,23 +1,54 @@
|
|||
// 参考bootstrap
|
||||
/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
@import "set-h5bp";
|
||||
@import "set-mobile";
|
||||
|
||||
//
|
||||
// 1. Change the default font family in all browsers (opinionated).
|
||||
// 2. Prevent adjustments of font size after orientation changes in IE and iOS.
|
||||
//
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//使html占用整个屏幕然后设置触摸操作，以避免触摸延迟在移动IE
|
||||
//2、在IE和iOS中，在方向更改后，防止调整字体大小。
|
||||
|
||||
html {
|
||||
font-family: sans-serif; // 1
|
||||
-ms-text-size-adjust: 100%; // 2
|
||||
-webkit-text-size-adjust: 100%; // 2
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-ms-touch-action: manipulation;
|
||||
touch-action: manipulation;
|
||||
-ms-text-size-adjust: 100%; // 2
|
||||
-webkit-text-size-adjust: 100%; // 2
|
||||
}
|
||||
|
||||
//
|
||||
// Remove the margin in all browsers (opinionated).
|
||||
//
|
||||
/*
|
||||
* 使body占据整个屏幕删除主体边距，因此布局容器不会导致额外的溢出。
|
||||
* 去掉默认的margin
|
||||
*/
|
||||
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* 主显示屏复位为IE支持
|
||||
* Source: http://weblog.west-wind.com/posts/2015/Jan/12/main-HTML5-Tag-not-working-in-Internet-Explorer-91011
|
||||
*/
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* 对具有hidden属性的元素不应用显示。
|
||||
* IE 9 and 10 support.
|
||||
*/
|
||||
*[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
*, :after, :before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// HTML5 display definitions
|
||||
|
|
@ -422,4 +453,4 @@ textarea {
|
|||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,59 +1 @@
|
|||
/**
|
||||
* Copyright 2015 Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
@import "set-h5bp";
|
||||
@import "set-mobile";
|
||||
|
||||
/*
|
||||
* Make html take up the entire screen
|
||||
* Then set touch-action to avoid touch delay on mobile IE
|
||||
*/
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-ms-touch-action: manipulation;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
/*
|
||||
* Make body take up the entire screen
|
||||
* Remove body margin so layout containers don't cause extra overflow.
|
||||
*/
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Main display reset for IE support.
|
||||
* Source: http://weblog.west-wind.com/posts/2015/Jan/12/main-HTML5-Tag-not-working-in-Internet-Explorer-91011
|
||||
*/
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Apply no display to elements with the hidden attribute.
|
||||
* IE 9 and 10 support.
|
||||
*/
|
||||
*[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
*, :after, :before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue