From 40f8606f58dfbc046ab4623a0cc262d827b344c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= Date: Tue, 20 Sep 2016 09:30:35 +0800 Subject: [PATCH] add Notice component add Notice component --- components/base/notification/notice.vue | 13 +- components/base/notification/notification.vue | 4 +- components/message/index.js | 5 +- components/notice/index.js | 115 ++++++++++++++++++ components/notice/notice.js | 0 dist/styles/iview.all.css | 2 +- dist/styles/iview.css | 2 +- index.js | 4 +- local/main.js | 5 + local/routers/notice.vue | 69 +++++++++++ package.json | 2 +- styles/components/alert.less | 10 +- styles/components/index.less | 3 +- styles/components/notice.less | 79 ++++++++++++ styles/mixins/close.less | 10 ++ styles/mixins/index.less | 3 +- styles/themes/default/custom.less | 1 + 17 files changed, 302 insertions(+), 25 deletions(-) create mode 100644 components/notice/index.js delete mode 100644 components/notice/notice.js create mode 100644 local/routers/notice.vue create mode 100644 styles/components/notice.less create mode 100644 styles/mixins/close.less diff --git a/components/base/notification/notice.vue b/components/base/notification/notice.vue index 475bd01b..fe16cecc 100644 --- a/components/base/notification/notice.vue +++ b/components/base/notification/notice.vue @@ -1,11 +1,9 @@ \ No newline at end of file diff --git a/package.json b/package.json index ba05ad15..e4f2abe8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "iview", - "version": "0.0.9", + "version": "0.0.10", "title": "iView", "description": "A high quality UI components Library with Vue.js", "homepage": "http://www.iviewui.com", diff --git a/styles/components/alert.less b/styles/components/alert.less index 6a246637..af7b2d1a 100644 --- a/styles/components/alert.less +++ b/styles/components/alert.less @@ -26,6 +26,7 @@ color: @legend-color; line-height: 21px; display: none; + text-align: justify; } &-success { @@ -69,14 +70,7 @@ cursor: pointer; .@{icon-prefix-cls}-ios-close-empty { - font-size: 22px; - color: @legend-color; - transition: color @transition-time ease; - position: relative; - top: -3px; - &:hover { - color: #444; - } + .close-base(-3px); } } diff --git a/styles/components/index.less b/styles/components/index.less index 4576aeaa..47138366 100644 --- a/styles/components/index.less +++ b/styles/components/index.less @@ -7,4 +7,5 @@ @import "alert"; @import "collapse"; @import "card"; -@import "message"; \ No newline at end of file +@import "message"; +@import "notice"; \ No newline at end of file diff --git a/styles/components/notice.less b/styles/components/notice.less new file mode 100644 index 00000000..cf9299d1 --- /dev/null +++ b/styles/components/notice.less @@ -0,0 +1,79 @@ +@notice-prefix-cls: ~"@{css-prefix}notice"; +@icon-prefix-cls: ~"@{css-prefix}icon"; + +@notice-width: 335px; +@notice-padding: 16px; +@notice-margin-bottom: 10px; + +.@{notice-prefix-cls} { + position: fixed; + z-index: @zindex-notification; + width: @notice-width; + margin-right: 24px; + + &-notice { + padding: @notice-padding; + border-radius: @border-radius-base; + box-shadow: @shadow-base; + border: 1px solid @border-color-base; + background: #fff; + line-height: 1.5; + position: relative; + margin-bottom: @notice-margin-bottom; + overflow: hidden; + + &-close { + position: absolute; + right: 16px; + top: 10px; + color: #999; + outline: none; + + i{ + .close-base(-3px); + } + } + } + + &-title { + font-size: 14px; + color: @text-color; + margin-bottom: 4px; + } + + &-desc { + font-size: @font-size-base; + color: @legend-color; + text-align: justify; + } + + &-with-icon &-title{ + margin-left: 51px; + margin-bottom: 4px; + } + + &-with-icon &-desc { + margin-left: 51px; + } + + &-icon { + position: absolute; + left: 21px; + top: 50%; + margin-top: -21px; + font-size: 28px; + + &-success { + color: @success-color; + } + &-info { + color: @primary-color; + } + &-warning { + color: @warning-color; + } + &-error { + color: @error-color; + } + } +} \ No newline at end of file diff --git a/styles/mixins/close.less b/styles/mixins/close.less new file mode 100644 index 00000000..2fc87460 --- /dev/null +++ b/styles/mixins/close.less @@ -0,0 +1,10 @@ +.close-base(@top: 0) { + font-size: 22px; + color: @legend-color; + transition: color @transition-time ease; + position: relative; + top: @top; + &:hover { + color: #444; + } +} \ No newline at end of file diff --git a/styles/mixins/index.less b/styles/mixins/index.less index 4b332c63..a3d7ff31 100644 --- a/styles/mixins/index.less +++ b/styles/mixins/index.less @@ -6,4 +6,5 @@ @import "button"; @import "layout"; @import "size"; -@import "loading"; \ No newline at end of file +@import "loading"; +@import "close"; \ No newline at end of file diff --git a/styles/themes/default/custom.less b/styles/themes/default/custom.less index d4b1e08a..abfef0dc 100644 --- a/styles/themes/default/custom.less +++ b/styles/themes/default/custom.less @@ -50,6 +50,7 @@ @zindex-back-top : 10; @zindex-spin : 8; @zindex-message : 1010; +@zindex-notification : 1010; // Animation @animation-time : .3s;