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 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