From b341a67fe5673e4b27f80aed59fd1439b64bdfda Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Mon, 14 Mar 2016 10:31:27 +0800 Subject: add text highlight --- src/typography.less | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'src/typography.less') diff --git a/src/typography.less b/src/typography.less index dc7da3d..d9d4b39 100644 --- a/src/typography.less +++ b/src/typography.less @@ -72,6 +72,13 @@ ol { } } +.highlight { + padding: .2rem; + line-height: 1.6rem; + border-radius: .2rem; + background-color: #fff5b7; +} + .text-left { text-align: left; } -- cgit v1.3.1-23-gd82d From 11546fc284eb14287c3210891ae75f3a1601f943 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sat, 19 Mar 2016 17:22:17 +0800 Subject: add blockquote small code --- demo/index.html | 1 + dist/spectre.css | 3 +++ src/typography.less | 4 ++++ 3 files changed, 8 insertions(+) (limited to 'src/typography.less') diff --git a/demo/index.html b/demo/index.html index b542766..8ea3f8d 100644 --- a/demo/index.html +++ b/demo/index.html @@ -29,6 +29,7 @@

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

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

+ - Source

lists

diff --git a/dist/spectre.css b/dist/spectre.css index 3e1f1b4..b30184f 100644 --- a/dist/spectre.css +++ b/dist/spectre.css @@ -441,6 +441,9 @@ blockquote { blockquote p:last-child { margin-bottom: 0; } +blockquote small { + color: #b3b3b3; +} ul, ol { margin: 0 0 1rem; diff --git a/src/typography.less b/src/typography.less index d9d4b39..65320a7 100644 --- a/src/typography.less +++ b/src/typography.less @@ -43,6 +43,10 @@ blockquote { p:last-child { margin-bottom: 0; } + + small { + color: lighten(@body-font-color, 50%); + } } ul, ol { -- 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/typography.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 5f8ef36411b678e2f503bbf1d2b406196747d3e0 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Mon, 4 Apr 2016 11:45:32 +0800 Subject: add modals code --- demo/index.html | 99 ++++++++++++++++++++++++++++++++++++++--------------- dist/spectre.css | 36 +++++++++++++++++++ spectre.less | 2 +- src/forms.less | 2 ++ src/modals.less | 32 +++++++++++++++++ src/typography.less | 2 ++ 6 files changed, 145 insertions(+), 28 deletions(-) create mode 100644 src/modals.less (limited to 'src/typography.less') diff --git a/demo/index.html b/demo/index.html index d8636a1..b5c2bfe 100644 --- a/demo/index.html +++ b/demo/index.html @@ -74,7 +74,7 @@
-
+

flexbox layout

layout.less includes flexbox based grid system with 12 columns.

@@ -128,7 +128,7 @@
-
+

tables

@@ -167,7 +167,7 @@
-
+

buttons

buttons.less includes simple button style for actions in different types and sizes. Buttons can show loading indicators.

@@ -193,7 +193,7 @@
-
+

button groups

@@ -212,7 +212,7 @@
-
+

media

@@ -223,7 +223,7 @@
-
+

tooltips

tooltips.less is built entirely in CSS.

@@ -243,10 +243,10 @@
-
+

forms

-
+
@@ -295,8 +295,7 @@
-
-
+
@@ -311,15 +310,6 @@
-
-
-
- -
-
@@ -334,9 +324,9 @@
-
@@ -357,6 +347,15 @@
+
+
+
+ +
+
@@ -368,7 +367,7 @@
-
+

labels

@@ -397,7 +396,7 @@
-
+

toasts

@@ -436,7 +435,7 @@
-
+ -
+ -
+

tabs

@@ -560,7 +559,7 @@
-
+

badges

@@ -585,6 +584,52 @@
+
+

modals

+
+
+
+
+
+ +
Modal title
+
+
+
+

+ This is the content inside the modal. +

+

Lorem ipsum

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. +

+

+ Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs. +

+

Cupcake ipsum

+

+ Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels. +

+

+ De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve. +

+

+ Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar. +

+

+ Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow. +

+
+
+
+ + +
+
+
+
+
+
\ No newline at end of file diff --git a/dist/spectre.css b/dist/spectre.css index a849bc1..0d20d3f 100644 --- a/dist/spectre.css +++ b/dist/spectre.css @@ -406,6 +406,8 @@ h5, h6 { font-weight: 300; line-height: 1.1; + margin-top: 2.5rem; + margin-bottom: 1rem; color: inherit; } h1 { @@ -835,6 +837,9 @@ button.btn-clear::after { .form-group:not(:last-child) { margin-bottom: 1rem; } +.form-horizontal { + padding: 1rem; +} .form-horizontal .col-12, .form-horizontal .col-11, .form-horizontal .col-10, @@ -1284,6 +1289,37 @@ 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); + 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; +} .tooltip { position: relative; } diff --git a/spectre.less b/spectre.less index 3e0e3c6..dd185df 100644 --- a/spectre.less +++ b/spectre.less @@ -23,7 +23,7 @@ @import 'src/menus.less'; @import 'src/navigation.less'; //@import 'src/cards.less'; -//@import 'src/modals.less'; +@import 'src/modals.less'; @import 'src/tooltips.less'; //@import 'src/animations.less'; diff --git a/src/forms.less b/src/forms.less index 8d4cbc4..9838228 100644 --- a/src/forms.less +++ b/src/forms.less @@ -3,6 +3,8 @@ margin-bottom: 1rem; } .form-horizontal { + padding: 1rem; + .col-12, .col-11, .col-10, diff --git a/src/modals.less b/src/modals.less new file mode 100644 index 0000000..b51f5ca --- /dev/null +++ b/src/modals.less @@ -0,0 +1,32 @@ +// Modals +.modal { + display: block; + width: 50vw; + text-align: left; + margin: 0; + padding: 0; + border-radius: .3rem; + background-color: #fff; + z-index: 999; + .shadow; + .centered; + + .modal-header { + padding: 1.5rem; + border-bottom: 1px solid @core-border-color; + + .modal-title { + margin: 0; + } + } + .modal-body { + position: relative; + padding: 1.5rem; + max-height: 50vh; + overflow-y: auto; + } + .modal-footer { + padding: 1.5rem; + text-align: right; + } +} \ No newline at end of file diff --git a/src/typography.less b/src/typography.less index 4b0cd49..94a596f 100644 --- a/src/typography.less +++ b/src/typography.less @@ -7,6 +7,8 @@ h5, h6 { font-weight: 300; line-height: 1.1; + margin-top: 2.5rem; + margin-bottom: 1rem; color: inherit; } h1 { -- cgit v1.3.1-23-gd82d