From 67bb749236336d8eff3cd2bc370ba1824a14e41d Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 15 Mar 2016 18:00:14 +0800 Subject: add menu and link code --- src/variables.less | 1 + 1 file changed, 1 insertion(+) (limited to 'src/variables.less') diff --git a/src/variables.less b/src/variables.less index 2c99039..97f357d 100644 --- a/src/variables.less +++ b/src/variables.less @@ -8,6 +8,7 @@ // Colors @core-color: #5764C6; +@core-link-color: #5764C6; @core-border-color: #efefef; @control-color: #c5c5c5; @control-color-success: #00c372; -- cgit v1.3.1-23-gd82d From fe73c2d01b5bd34bd231fe8444884fb3448c0b62 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Mon, 28 Mar 2016 16:29:01 +0800 Subject: update units to rem --- demo/index.html | 4 --- dist/spectre.css | 81 +++++++++++++++++++++++++++-------------------------- src/buttons.less | 6 ++-- src/forms.less | 21 ++++++-------- src/labels.less | 6 ++-- src/layout.less | 12 ++++---- src/menus.less | 14 ++++----- src/toasts.less | 2 +- src/typography.less | 2 +- src/utilities.less | 22 +++++++-------- src/variables.less | 2 +- 11 files changed, 85 insertions(+), 87 deletions(-) (limited to 'src/variables.less') diff --git a/demo/index.html b/demo/index.html index 9cc38d2..26f1fd7 100644 --- a/demo/index.html +++ b/demo/index.html @@ -167,11 +167,7 @@
-
-
-
-
diff --git a/dist/spectre.css b/dist/spectre.css index 43cb851..30825d0 100644 --- a/dist/spectre.css +++ b/dist/spectre.css @@ -387,7 +387,7 @@ html { body { color: #333; font-family: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", WenQuanYi Micro Hei, sans-serif; - font-size: 14px; + font-size: 1.4rem; background-color: #fff; } a { @@ -435,7 +435,7 @@ p.lead { } blockquote { padding: 1rem 2rem; - border-left: 2px solid #ddd; + border-left: .2rem solid #ddd; margin-left: 0; } blockquote p:last-child { @@ -525,24 +525,24 @@ ol ol { width: 100%; margin-left: auto; margin-right: auto; - padding-left: 10px; - padding-right: 10px; + padding-left: 1rem; + padding-right: 1rem; } @media screen and (min-width: 961px) { .container.grid-960 { - width: 960px; + width: 96rem; } } .columns { - margin-left: -10px; - margin-right: -10px; + margin-left: -1rem; + margin-right: -1rem; } .column { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; - padding: 10px; + padding: 1rem; } @media screen and (min-width: 769px) { .columns { @@ -821,11 +821,13 @@ button.btn-clear::after { .btn-group .btn:not(:first-child):not(:last-child) { margin-left: -0.1rem; border-radius: 0; + z-index: 49; } .btn-group .btn:last-child:not(:first-child) { margin-left: -0.1rem; border-top-left-radius: 0; border-bottom-left-radius: 0; + z-index: 99; } .form-group:not(:last-child) { margin-bottom: 1rem; @@ -839,7 +841,7 @@ button.btn-clear::after { background-color: #fff; background-image: none; border: 0.1rem solid #c5c5c5; - border-radius: 3px; + border-radius: .3rem; color: #333; font-size: 1.4rem; line-height: 1.6rem; @@ -857,15 +859,15 @@ button.btn-clear::after { } .form-input.input-sm { height: 2.4rem; - border-radius: 2px; + border-radius: .2rem; font-size: 1.2rem; line-height: 1.4rem; padding: .4rem .6rem; } .form-input.input-lg { height: 4.2rem; - border-radius: 4px; - font-size: 1.8rem; + border-radius: .4rem; + font-size: 1.6rem; line-height: 2rem; padding: 1rem 1.2rem; } @@ -887,6 +889,7 @@ textarea.form-input { .form-label { display: block; margin-bottom: .5rem; + line-height: 1.6rem; } .form-select:not([multiple]) { height: 3.2rem; @@ -895,7 +898,7 @@ textarea.form-input { line-height: 1.6rem; padding: .7rem .8rem; border: 0.1rem solid #c5c5c5; - border-radius: 3px; + border-radius: .3rem; outline: 0; } .form-select:focus { @@ -903,7 +906,7 @@ textarea.form-input { } .form-select.select-sm { height: 2.4rem; - border-radius: 2px; + border-radius: .2rem; font-size: 1.2rem; line-height: 1.4rem; padding: .4rem .6rem; @@ -983,7 +986,7 @@ textarea.form-input { position: relative; } .form-switch input { - line-height: 24px; + line-height: 2.4rem; vertical-align: top; border: 0.1rem solid #c5c5c5; background-color: #c5c5c5; @@ -1031,7 +1034,7 @@ textarea.form-input { white-space: nowrap; vertical-align: middle; margin: -0.2rem 0.5rem 0 0; - border-radius: 2px; + border-radius: .2rem; } .label.label-primary { color: #fff; @@ -1050,9 +1053,9 @@ textarea.form-input { background-color: #e74c3c; } .label.label-lg { - padding: .3rem .8rem; + padding: .2rem .8rem; font-size: 1.4rem; - line-height: 1.6rem; + line-height: 1.8rem; } .toast { display: block; @@ -1060,7 +1063,7 @@ textarea.form-input { padding: 1.4rem; color: #666; border: 0.1rem solid #eaeaea; - border-radius: 3px; + border-radius: .3rem; background-color: #efefef; } .toast.toast-primary { @@ -1089,16 +1092,16 @@ textarea.form-input { text-align: left; margin: 0; padding: 1rem; - border-radius: 3px; + border-radius: .3rem; background-color: #fff; z-index: 999; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); + box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.3); } .menu .menu-item { display: block; padding: .2rem 1rem; margin-top: 0; - border-radius: 3px; + border-radius: .3rem; color: #333; line-height: 2.4rem; text-decoration: none; @@ -1111,7 +1114,7 @@ textarea.form-input { display: block; margin: -0.2rem -1rem; padding: .2rem 1rem; - border-radius: 3px; + border-radius: .3rem; color: inherit; text-decoration: none; } @@ -1138,14 +1141,14 @@ textarea.form-input { content: ""; display: block; width: 100%; - height: 1px; - -webkit-transform: translateY(-10px); - transform: translateY(-10px); - border-bottom: 1px solid #efefef; + height: .1rem; + -webkit-transform: translateY(-1rem); + transform: translateY(-1rem); + border-bottom: 0.1rem solid #efefef; } .menu .divider { display: block; - border-bottom: 1px solid #efefef; + border-bottom: 0.1rem solid #efefef; margin: .5rem; } .breadcrumb { @@ -1277,28 +1280,28 @@ textarea.form-input { margin-right: auto; } .mt-10 { - margin-top: 10px; + margin-top: 1rem; } .mr-10 { - margin-right: 10px; + margin-right: 1rem; } .mb-10 { - margin-bottom: 10px; + margin-bottom: 1rem; } .ml-10 { - margin-left: 10px; + margin-left: 1rem; } .mt-5 { - margin-top: 5px; + margin-top: .5rem; } .mr-5 { - margin-right: 5px; + margin-right: .5rem; } .mb-5 { - margin-bottom: 5px; + margin-bottom: .5rem; } .ml-5 { - margin-left: 5px; + margin-left: .5rem; } .block { display: block; @@ -1319,13 +1322,13 @@ textarea.form-input { display: none !important; } .shadow { - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); + box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.3); } .light-shadow { - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); + box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.15); } .rounded { - border-radius: 3px; + border-radius: .3rem; } .circle { border-radius: 50%; diff --git a/src/buttons.less b/src/buttons.less index 95bd542..18f326b 100644 --- a/src/buttons.less +++ b/src/buttons.less @@ -165,10 +165,10 @@ button { margin-top: -.4rem; } } - - // TODO: Button with icons } +// TODO: Button with icons + .btn-group { display: inline-block; vertical-align: middle; @@ -184,11 +184,13 @@ button { &:not(:first-child):not(:last-child) { margin-left: -.1rem; border-radius: 0; + z-index: 49; } &:last-child:not(:first-child) { margin-left: -.1rem; border-top-left-radius: 0; border-bottom-left-radius: 0; + z-index: 99; } } } \ No newline at end of file diff --git a/src/forms.less b/src/forms.less index ba0dbfc..110b747 100644 --- a/src/forms.less +++ b/src/forms.less @@ -12,7 +12,7 @@ background-color: #fff; background-image: none; border: .1rem solid @control-color; - border-radius: 3px; + border-radius: .3rem; color: @body-font-color; font-size: 1.4rem; line-height: 1.6rem; @@ -33,7 +33,7 @@ // Input Small &.input-sm { height: 2.4rem; - border-radius: 2px; + border-radius: .2rem; font-size: 1.2rem; line-height: 1.4rem; padding: .4rem .6rem; @@ -42,8 +42,8 @@ // Input Large &.input-lg { height: 4.2rem; - border-radius: 4px; - font-size: 1.8rem; + border-radius: .4rem; + font-size: 1.6rem; line-height: 2rem; padding: 1rem 1.2rem; } @@ -75,6 +75,7 @@ .form-label { display: block; margin-bottom: .5rem; + line-height: 1.6rem; } // Form element: Select .form-select { @@ -85,7 +86,7 @@ line-height: 1.6rem; padding: .7rem .8rem; border: .1rem solid @control-color; - border-radius: 3px; + border-radius: .3rem; outline: 0; } @@ -96,7 +97,7 @@ // Select Small &.select-sm { height: 2.4rem; - border-radius: 2px; + border-radius: .2rem; font-size: 1.2rem; line-height: 1.4rem; padding: .4rem .6rem; @@ -184,7 +185,7 @@ position: relative; input { - line-height: 24px; + line-height: 2.4rem; vertical-align: top; border: .1rem solid @control-color; background-color: @control-color; @@ -213,10 +214,6 @@ transition: left .15s ease; } - &:hover { - - } - &:checked { background-color: @core-color; border-color: @core-color; @@ -227,4 +224,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/labels.less b/src/labels.less index 0764dd4..3288065 100644 --- a/src/labels.less +++ b/src/labels.less @@ -10,7 +10,7 @@ white-space: nowrap; vertical-align: middle; margin: -.2rem .5rem 0 0; - border-radius: 2px; + border-radius: .2rem; &.label-primary { color: #fff; @@ -30,8 +30,8 @@ } &.label-lg { - padding: .3rem .8rem; + padding: .2rem .8rem; font-size: 1.4rem; - line-height: 1.6rem; + line-height: 1.8rem; } } \ No newline at end of file diff --git a/src/layout.less b/src/layout.less index 769fd25..b101ca0 100644 --- a/src/layout.less +++ b/src/layout.less @@ -3,26 +3,26 @@ width: 100%; margin-left: auto; margin-right: auto; - padding-left: 10px; - padding-right: 10px; + padding-left: 1rem; + padding-right: 1rem; &:extend(.clearfix all); } @media screen and (min-width: 961px) { .container { &.grid-960 { - width: 960px; + width: 96rem; } } } .columns { - margin-left: -10px; - margin-right: -10px; + margin-left: -1rem; + margin-right: -1rem; &:extend(.clearfix all); } .column { flex: 1; - padding: 10px; + padding: 1rem; } @media screen and (min-width: 769px) { .columns { diff --git a/src/menus.less b/src/menus.less index cb69690..c40b61b 100644 --- a/src/menus.less +++ b/src/menus.less @@ -5,7 +5,7 @@ text-align: left; margin: 0; padding: 1rem; - border-radius: 3px; + border-radius: .3rem; background-color: #fff; z-index: 999; .shadow; @@ -14,7 +14,7 @@ display: block; padding: .2rem 1rem; margin-top: 0; - border-radius: 3px; + border-radius: .3rem; color: @body-font-color; line-height: 2.4rem; text-decoration: none; @@ -24,7 +24,7 @@ display: block; margin: -.2rem -1rem; padding: .2rem 1rem; - border-radius: 3px; + border-radius: .3rem; color: inherit; text-decoration: none; @@ -55,15 +55,15 @@ content: ""; display: block; width: 100%; - height: 1px; - transform: translateY(-10px); - border-bottom: 1px solid @core-border-color; + height: .1rem; + transform: translateY(-1rem); + border-bottom: .1rem solid @core-border-color; } } .divider { display: block; - border-bottom: 1px solid @core-border-color; + border-bottom: .1rem solid @core-border-color; margin: .5rem; } } diff --git a/src/toasts.less b/src/toasts.less index 2c0f5e3..6d4b03d 100644 --- a/src/toasts.less +++ b/src/toasts.less @@ -5,7 +5,7 @@ padding: 1.4rem; color: #666; border: .1rem solid darken(@core-border-color, 2%); - border-radius: 3px; + border-radius: .3rem; background-color: @core-border-color; &.toast-primary { diff --git a/src/typography.less b/src/typography.less index 65320a7..4b0cd49 100644 --- a/src/typography.less +++ b/src/typography.less @@ -37,7 +37,7 @@ p { } blockquote { padding: 1rem 2rem; - border-left: 2px solid #ddd; + border-left: .2rem solid #ddd; margin-left: 0; p:last-child { diff --git a/src/utilities.less b/src/utilities.less index f3b4d89..e925600 100644 --- a/src/utilities.less +++ b/src/utilities.less @@ -42,29 +42,29 @@ } .mt-10 { - margin-top: 10px; + margin-top: 1rem; } .mr-10 { - margin-right: 10px; + margin-right: 1rem; } .mb-10 { - margin-bottom: 10px; + margin-bottom: 1rem; } .ml-10 { - margin-left: 10px; + margin-left: 1rem; } .mt-5 { - margin-top: 5px; + margin-top: .5rem; } .mr-5 { - margin-right: 5px; + margin-right: .5rem; } .mb-5 { - margin-bottom: 5px; + margin-bottom: .5rem; } .ml-5 { - margin-left: 5px; + margin-left: .5rem; } // Display @@ -86,15 +86,15 @@ // Shadow .shadow { - box-shadow: 0 1px 4px rgba(0, 0, 0, .3); + box-shadow: 0 .1rem .4rem rgba(0, 0, 0, .3); } .light-shadow { - box-shadow: 0 1px 2px rgba(0, 0, 0, .15); + box-shadow: 0 .1rem .2rem rgba(0, 0, 0, .15); } // Shapes .rounded { - border-radius: 3px; + border-radius: .3rem; } .circle { border-radius: 50%; diff --git a/src/variables.less b/src/variables.less index 97f357d..5b6e4ba 100644 --- a/src/variables.less +++ b/src/variables.less @@ -3,7 +3,7 @@ // Global @body-bg: #fff; @body-font-color: #333; -@body-font-size: 14px; +@body-font-size: 1.4rem; @body-font-family: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", WenQuanYi Micro Hei, sans-serif; // Colors -- cgit v1.3.1-23-gd82d From f5fcba37b9304df1003a86cc18184072b7ac6256 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sun, 3 Apr 2016 20:10:24 +0800 Subject: update labels and toasts --- demo/index.html | 37 ++++++++++++++++++------------------- dist/spectre.css | 49 +++++++++++++++++++++++++++++-------------------- src/labels.less | 20 ++++++++++++-------- src/toasts.less | 7 ++++++- src/variables.less | 7 ++++--- 5 files changed, 69 insertions(+), 51 deletions(-) (limited to 'src/variables.less') diff --git a/demo/index.html b/demo/index.html index 18b7714..2174abf 100644 --- a/demo/index.html +++ b/demo/index.html @@ -14,12 +14,12 @@

headings

-

H1 Title

-

H2 Title

-

H3 Title

-

H4 Title

-
H5 Title
-
H6 Title
+

H1 Title default label

+

H2 Title default label

+

H3 Title default label

+

H4 Title default label

+
H5 Title default label
+
H6 Title default label

paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

@@ -357,25 +357,22 @@ primary label
- primary label + success label
- default label + info label
- primary label + warning label
- default label + danger label
- primary label + default label
- - large label - - + primary label
@@ -398,19 +395,21 @@
- + Efficiently unleash cross-media information without cross-media value. +
+
+
+
Efficiently unleash cross-media information without cross-media value.
- Efficiently unleash cross-media information without cross-media value.
- Efficiently unleash cross-media information without cross-media value.
@@ -530,7 +529,7 @@
- + Notifications
diff --git a/dist/spectre.css b/dist/spectre.css index 7522e88..69d5c82 100644 --- a/dist/spectre.css +++ b/dist/spectre.css @@ -906,11 +906,11 @@ textarea.form-input { } .has-success .form-input, .form-input.input-success { - border-color: #00c372; + border-color: #32B643; } .has-danger .form-input, .form-input.input-danger { - border-color: #e74c3c; + border-color: #E85600; } .form-label { display: block; @@ -1051,15 +1051,15 @@ textarea.form-input { } .label { display: inline-block; - padding: .2rem .5rem; - font-size: 1.2rem; - line-height: 1.4rem; + padding: .3rem .5rem; + font-size: 80%; + line-height: 1; color: #666; background-color: #efefef; text-align: center; white-space: nowrap; vertical-align: middle; - margin: -0.2rem 0.5rem 0 0; + margin: -0.3rem 0.5rem 0 0.5rem; border-radius: .2rem; } .label.label-primary { @@ -1068,20 +1068,24 @@ textarea.form-input { } .label.label-success { color: #fff; - background-color: #00c372; + background-color: #32B643; +} +.label.label-info { + color: #fff; + background-color: #0193eb; } .label.label-warning { - color: #896902; - background-color: #fccf42; + color: #fff; + background-color: #ffb700; } .label.label-danger { color: #fff; - background-color: #e74c3c; + background-color: #E85600; } .label.label-lg { - padding: .2rem .8rem; - font-size: 1.4rem; - line-height: 1.8rem; + font-size: 100%; + line-height: 1.2; + padding: .3rem .8rem; } .badge { position: relative; @@ -1122,18 +1126,23 @@ textarea.form-input { } .toast.toast-success { color: #fff; - background-color: #00c372; - border-color: #00b96c; + background-color: #32B643; + border-color: #30ae40; +} +.toast.toast-info { + color: #fff; + background-color: #0193eb; + border-color: #018de1; } .toast.toast-warning { - color: #896902; - background-color: #fccf42; - border-color: #fccc38; + color: #fff; + background-color: #ffb700; + border-color: #f5b000; } .toast.toast-danger { color: #fff; - background-color: #e74c3c; - border-color: #e64433; + background-color: #E85600; + border-color: #de5200; } .menu { display: block; diff --git a/src/labels.less b/src/labels.less index 3288065..ac11630 100644 --- a/src/labels.less +++ b/src/labels.less @@ -1,15 +1,15 @@ // Labels .label { display: inline-block; - padding: .2rem .5rem; - font-size: 1.2rem; - line-height: 1.4rem; + padding: .3rem .5rem; + font-size: 80%; + line-height: 1; color: #666; background-color: @core-border-color; text-align: center; white-space: nowrap; vertical-align: middle; - margin: -.2rem .5rem 0 0; + margin: -.3rem .5rem 0 .5rem; border-radius: .2rem; &.label-primary { @@ -20,8 +20,12 @@ color: #fff; background-color: @control-color-success; } + &.label-info { + color: #fff; + background-color: @control-color-info; + } &.label-warning { - color: darken(@control-color-warning, 35%); + color: #fff; background-color: @control-color-warning; } &.label-danger { @@ -30,8 +34,8 @@ } &.label-lg { - padding: .2rem .8rem; - font-size: 1.4rem; - line-height: 1.8rem; + font-size: 100%; + line-height: 1.2; + padding: .3rem .8rem; } } \ No newline at end of file diff --git a/src/toasts.less b/src/toasts.less index 6d4b03d..9792e50 100644 --- a/src/toasts.less +++ b/src/toasts.less @@ -19,8 +19,13 @@ background-color: @control-color-success; border-color: darken(@control-color-success, 2%); } + &.toast-info { + color: #fff; + background-color: @control-color-info; + border-color: darken(@control-color-info, 2%); + } &.toast-warning { - color: darken(@control-color-warning, 35%); + color: #fff; background-color: @control-color-warning; border-color: darken(@control-color-warning, 2%); } diff --git a/src/variables.less b/src/variables.less index 5b6e4ba..23220df 100644 --- a/src/variables.less +++ b/src/variables.less @@ -11,9 +11,10 @@ @core-link-color: #5764C6; @core-border-color: #efefef; @control-color: #c5c5c5; -@control-color-success: #00c372; -@control-color-warning: #fccf42; -@control-color-danger: #e74c3c; +@control-color-success: #32B643; +@control-color-info: #0193eb; +@control-color-warning: #ffb700; +@control-color-danger: #E85600; // Mixins -- cgit v1.3.1-23-gd82d From 21aaa73dbcd839ea8061f3e2a05b6aa19cb77be6 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Mon, 4 Apr 2016 14:54:24 +0800 Subject: add avatars code --- demo/img/avatar-1.png | Bin 0 -> 18198 bytes demo/img/avatar-2.png | Bin 0 -> 21842 bytes demo/img/avatar-3.png | Bin 0 -> 14753 bytes demo/img/avatar-4.png | Bin 0 -> 15264 bytes demo/img/avatar-5.png | Bin 0 -> 21102 bytes demo/index.html | 103 +++++++++++++++-------- dist/spectre.css | 220 +++++++++++++++++++++++++++++--------------------- spectre.less | 9 ++- src/avatars.less | 42 ++++++++++ src/variables.less | 8 +- 10 files changed, 250 insertions(+), 132 deletions(-) create mode 100644 demo/img/avatar-1.png create mode 100644 demo/img/avatar-2.png create mode 100644 demo/img/avatar-3.png create mode 100644 demo/img/avatar-4.png create mode 100644 demo/img/avatar-5.png create mode 100644 src/avatars.less (limited to 'src/variables.less') diff --git a/demo/img/avatar-1.png b/demo/img/avatar-1.png new file mode 100644 index 0000000..e28ac6c Binary files /dev/null and b/demo/img/avatar-1.png differ diff --git a/demo/img/avatar-2.png b/demo/img/avatar-2.png new file mode 100644 index 0000000..3fcb9d9 Binary files /dev/null and b/demo/img/avatar-2.png differ diff --git a/demo/img/avatar-3.png b/demo/img/avatar-3.png new file mode 100644 index 0000000..0383958 Binary files /dev/null and b/demo/img/avatar-3.png differ diff --git a/demo/img/avatar-4.png b/demo/img/avatar-4.png new file mode 100644 index 0000000..3ecedcc Binary files /dev/null and b/demo/img/avatar-4.png differ diff --git a/demo/img/avatar-5.png b/demo/img/avatar-5.png new file mode 100644 index 0000000..8019817 Binary files /dev/null and b/demo/img/avatar-5.png differ diff --git a/demo/index.html b/demo/index.html index b5c2bfe..f824a1e 100644 --- a/demo/index.html +++ b/demo/index.html @@ -5,8 +5,8 @@ Spectre, a lightweight and clean CSS framework for faster and extendable development. @@ -19,6 +19,7 @@

Project Spectre is a lightweight and clean CSS framework for faster and extendable development.

+

typography

@@ -74,6 +75,7 @@
+

flexbox layout

@@ -128,6 +130,7 @@
+

tables

@@ -167,6 +170,7 @@
+

buttons

@@ -193,6 +197,7 @@
+

button groups

@@ -212,37 +217,7 @@
-
-

media

-
-
- -
-
- -
-
-
-
-

tooltips

-
-

tooltips.less is built entirely in CSS.

-
-
-
- -
-
- -
-
- -
-
- -
-
-
+

forms

@@ -367,6 +342,60 @@
+ +
+

media

+
+
+ +
+
+ +
+
+
+ +
+

avatars

+
+
+ + + + + +
+
+
+
+
+
+
+
+
+
+ +
+

tooltips

+
+

tooltips.less is built entirely in CSS.

+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+

labels

@@ -396,13 +425,14 @@
+

toasts

- Here's a bunch of numbers. They may look random but they're my phone numbers. + Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -435,6 +465,7 @@
+ + +

tabs

@@ -559,6 +592,7 @@
+

badges

@@ -584,6 +618,7 @@
+

modals

diff --git a/dist/spectre.css b/dist/spectre.css index 0d20d3f..18bf8ad 100644 --- a/dist/spectre.css +++ b/dist/spectre.css @@ -391,7 +391,7 @@ body { background-color: #fff; } a { - color: #5764C6; + color: #5764c6; text-decoration: underline; } a:hover, @@ -632,10 +632,10 @@ button { display: inline-block; height: 3.2rem; padding: .7rem 1.5rem; - border: 0.1rem solid #5764C6; + border: 0.1rem solid #5764c6; background-color: transparent; border-radius: 3px; - color: #5764C6; + color: #5764c6; font-size: 1.4rem; line-height: 1.6rem; text-align: center; @@ -655,7 +655,7 @@ button:hover, .btn:focus, button:focus { color: #fff; - background-color: #5764C6; + background-color: #5764c6; } .btn:active, button:active, @@ -672,7 +672,7 @@ button.loading { } .btn.loading::after, button.loading::after { - border: 2px solid #5764C6; + border: 2px solid #5764c6; border-right-color: transparent; border-top-color: transparent; border-radius: 8px; @@ -697,7 +697,7 @@ button[disabled] { button.btn-primary { color: #fff; border-color: #4452c0; - background-color: #5764C6; + background-color: #5764c6; } .btn.btn-primary:hover, button.btn-primary:hover, @@ -723,7 +723,7 @@ button.btn-primary.loading::after { } .btn.btn-link, button.btn-link { - color: #5764C6; + color: #5764c6; border-color: transparent; background-color: transparent; } @@ -879,7 +879,7 @@ button.btn-clear::after { outline: 0; } .form-input:focus { - border-color: #5764C6; + border-color: #5764c6; } .form-input[disabled] { opacity: .75; @@ -909,11 +909,11 @@ textarea.form-input { } .has-success .form-input, .form-input.input-success { - border-color: #32B643; + border-color: #32b643; } .has-danger .form-input, .form-input.input-danger { - border-color: #E85600; + border-color: #e85600; } .form-label { display: block; @@ -931,7 +931,7 @@ textarea.form-input { outline: 0; } .form-select:focus { - border-color: #5764C6; + border-color: #5764c6; } .form-select.select-sm { height: 2.4rem; @@ -971,8 +971,8 @@ textarea.form-input { } .form-checkbox input:checked, .form-radio input:checked { - background-color: #5764C6; - border-color: #5764C6; + background-color: #5764c6; + border-color: #5764c6; } .form-checkbox input { border-radius: .2rem; @@ -1045,50 +1045,52 @@ textarea.form-input { transition: left .15s ease; } .form-switch input:checked { - background-color: #5764C6; - border-color: #5764C6; + background-color: #5764c6; + border-color: #5764c6; } .form-switch input:checked::after { left: 1.2rem; background-color: #fff; } -.label { +.avatar { display: inline-block; - padding: .3rem .5rem; - font-size: 80%; + width: 3.2rem; + height: 3.2rem; + font-size: 1.4rem; + font-weight: 300; line-height: 1; - color: #666; - background-color: #efefef; - text-align: center; - white-space: nowrap; + border-radius: 50%; vertical-align: middle; - margin: -0.3rem 0.5rem 0 0.5rem; - border-radius: .2rem; -} -.label.label-primary { - color: #fff; - background-color: #5764C6; + position: relative; } -.label.label-success { +.avatar::after { + content: attr(data-initial); + position: absolute; + top: 50%; + left: 50%; color: #fff; - background-color: #32B643; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); } -.label.label-info { - color: #fff; - background-color: #0193eb; +.avatar.avatar-xs { + width: 1.6rem; + height: 1.6rem; + font-size: .8rem; } -.label.label-warning { - color: #fff; - background-color: #ffb700; +.avatar.avatar-sm { + width: 2.4rem; + height: 2.4rem; + font-size: 1rem; } -.label.label-danger { - color: #fff; - background-color: #E85600; +.avatar.avatar-lg { + width: 4.8rem; + height: 4.8rem; + font-size: 2rem; } -.label.label-lg { - font-size: 100%; - line-height: 1.2; - padding: .3rem .8rem; +.avatar.avatar-xl { + width: 6.4rem; + height: 6.4rem; + font-size: 2.6rem; } .badge { position: relative; @@ -1100,7 +1102,7 @@ textarea.form-input { font-size: 1.2rem; text-align: center; line-height: 1.4rem; - background-color: #5764C6; + background-color: #5764c6; display: block; width: 2rem; height: 2rem; @@ -1113,39 +1115,43 @@ textarea.form-input { overflow: hidden; text-overflow: ellipsis; } -.toast { - display: block; - width: 100%; - padding: 1.4rem; +.label { + display: inline-block; + padding: .3rem .5rem; + font-size: 80%; + line-height: 1; color: #666; - border: 0.1rem solid #eaeaea; - border-radius: .3rem; background-color: #efefef; + text-align: center; + white-space: nowrap; + vertical-align: middle; + margin: -0.3rem 0.5rem 0 0.5rem; + border-radius: .2rem; } -.toast.toast-primary { +.label.label-primary { color: #fff; - background-color: #5764C6; - border-color: #4f5dc3; + background-color: #5764c6; } -.toast.toast-success { +.label.label-success { color: #fff; - background-color: #32B643; - border-color: #30ae40; + background-color: #32b643; } -.toast.toast-info { +.label.label-info { color: #fff; background-color: #0193eb; - border-color: #018de1; } -.toast.toast-warning { +.label.label-warning { color: #fff; background-color: #ffb700; - border-color: #f5b000; } -.toast.toast-danger { +.label.label-danger { color: #fff; - background-color: #E85600; - border-color: #de5200; + background-color: #e85600; +} +.label.label-lg { + font-size: 100%; + line-height: 1.2; + padding: .3rem .8rem; } .menu { display: block; @@ -1212,6 +1218,37 @@ textarea.form-input { border-bottom: 0.1rem solid #efefef; margin: .5rem; } +.modal { + width: 50vw; + text-align: left; + margin: 0; + padding: 0; + border-radius: .3rem; + background-color: #fff; + z-index: 999; + box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.3); + display: block; + float: none; + margin-left: auto; + margin-right: auto; +} +.modal .modal-header { + padding: 1.5rem; + border-bottom: 1px solid #efefef; +} +.modal .modal-header .modal-title { + margin: 0; +} +.modal .modal-body { + position: relative; + padding: 1.5rem; + max-height: 50vh; + overflow-y: auto; +} +.modal .modal-footer { + padding: 1.5rem; + text-align: right; +} .breadcrumb { list-style: none; margin: .5rem 0; @@ -1263,11 +1300,11 @@ textarea.form-input { } .tab .tab-item:hover, .tab .tab-item:focus { - border-bottom-color: #5764C6; + border-bottom-color: #5764c6; } .tab .tab-item:hover a, .tab .tab-item:focus a { - color: #5764C6; + color: #5764c6; } .tab .tab-item.active { border-bottom-color: #3b49af; @@ -1289,36 +1326,39 @@ textarea.form-input { flex: 1; text-align: center; } -.modal { - width: 50vw; - text-align: left; - margin: 0; - padding: 0; - border-radius: .3rem; - background-color: #fff; - z-index: 999; - box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.3); +.toast { display: block; - float: none; - margin-left: auto; - margin-right: auto; + width: 100%; + padding: 1.4rem; + color: #666; + border: 0.1rem solid #eaeaea; + border-radius: .3rem; + background-color: #efefef; } -.modal .modal-header { - padding: 1.5rem; - border-bottom: 1px solid #efefef; +.toast.toast-primary { + color: #fff; + background-color: #5764c6; + border-color: #4f5dc3; } -.modal .modal-header .modal-title { - margin: 0; +.toast.toast-success { + color: #fff; + background-color: #32b643; + border-color: #30ae40; } -.modal .modal-body { - position: relative; - padding: 1.5rem; - max-height: 50vh; - overflow-y: auto; +.toast.toast-info { + color: #fff; + background-color: #0193eb; + border-color: #018de1; } -.modal .modal-footer { - padding: 1.5rem; - text-align: right; +.toast.toast-warning { + color: #fff; + background-color: #ffb700; + border-color: #f5b000; +} +.toast.toast-danger { + color: #fff; + background-color: #e85600; + border-color: #de5200; } .tooltip { position: relative; diff --git a/spectre.less b/spectre.less index dd185df..d067ee2 100644 --- a/spectre.less +++ b/spectre.less @@ -17,14 +17,15 @@ @import 'src/forms.less'; // Components -@import 'src/labels.less'; +@import 'src/avatars.less'; @import 'src/badges.less'; -@import 'src/toasts.less'; +@import 'src/labels.less'; @import 'src/menus.less'; -@import 'src/navigation.less'; -//@import 'src/cards.less'; @import 'src/modals.less'; +@import 'src/navigation.less'; +@import 'src/toasts.less'; @import 'src/tooltips.less'; +//@import 'src/cards.less'; //@import 'src/animations.less'; // Utility classes diff --git a/src/avatars.less b/src/avatars.less new file mode 100644 index 0000000..1576698 --- /dev/null +++ b/src/avatars.less @@ -0,0 +1,42 @@ +// Avatars +.avatar { + display: inline-block; + width: 3.2rem; + height: 3.2rem; + font-size: 1.4rem; + font-weight: 300; + line-height: 1; + border-radius: 50%; + vertical-align: middle; + position: relative; + + &::after { + content: attr(data-initial); + position: absolute; + top: 50%; + left: 50%; + color: #fff; + transform: translate(-50%, -50%); + } + + &.avatar-xs { + width: 1.6rem; + height: 1.6rem; + font-size: .8rem; + } + &.avatar-sm { + width: 2.4rem; + height: 2.4rem; + font-size: 1rem; + } + &.avatar-lg { + width: 4.8rem; + height: 4.8rem; + font-size: 2rem; + } + &.avatar-xl { + width: 6.4rem; + height: 6.4rem; + font-size: 2.6rem; + } +} \ No newline at end of file diff --git a/src/variables.less b/src/variables.less index 23220df..14882ae 100644 --- a/src/variables.less +++ b/src/variables.less @@ -7,14 +7,14 @@ @body-font-family: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", WenQuanYi Micro Hei, sans-serif; // Colors -@core-color: #5764C6; -@core-link-color: #5764C6; +@core-color: #5764c6; +@core-link-color: #5764c6; @core-border-color: #efefef; @control-color: #c5c5c5; -@control-color-success: #32B643; +@control-color-success: #32b643; @control-color-info: #0193eb; @control-color-warning: #ffb700; -@control-color-danger: #E85600; +@control-color-danger: #e85600; // Mixins -- cgit v1.3.1-23-gd82d