From c4ff7d1e40b6c4e1306595edf3698205b1c987c6 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sat, 19 Mar 2016 18:03:16 +0800 Subject: add form-switch code --- src/forms.less | 107 +++++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 81 insertions(+), 26 deletions(-) (limited to 'src/forms.less') diff --git a/src/forms.less b/src/forms.less index afaf1d8..98b0624 100644 --- a/src/forms.less +++ b/src/forms.less @@ -107,39 +107,38 @@ .form-checkbox, .form-radio { line-height: 1.8rem; - padding: .3rem 1.8rem .3rem 1.8rem; + padding: .3rem 1.8rem; cursor: pointer; display: inline-block; position: relative; -} -.form-checkbox input, -.form-radio input { - font-size: 14px; - line-height: 24px; - vertical-align: top; - border: .1rem solid @control-color; - float: left; - display: inline-block; - width: 1.4rem; - height: 1.4rem; - padding: 0; - position: absolute; - top: .5rem; - left: 0; - cursor: pointer; - outline: none; - -webkit-appearance: none; - &:hover { - border-color: darken(@control-color, 15%); - } - &:checked { - background-color: @core-color; - border-color: @core-color; + input { + font-size: 1.4rem; + line-height: 2.4rem; + vertical-align: top; + border: .1rem solid @control-color; + display: inline-block; + width: 1.4rem; + height: 1.4rem; + padding: 0; + position: absolute; + top: .5rem; + left: 0; + cursor: pointer; + outline: none; + -webkit-appearance: none; + + &:hover { + border-color: darken(@control-color, 15%); + } + &:checked { + background-color: @core-color; + border-color: @core-color; + } } } .form-checkbox input { - border-radius: 2px; + border-radius: .2rem; &:checked { &::after { @@ -175,4 +174,60 @@ background-color: #fff; } } +} +// Form element: Switch +.form-switch { + line-height: 1.8rem; + padding: .3rem 1.8rem .3rem 3.4rem; + cursor: pointer; + display: inline-block; + position: relative; + + input { + line-height: 24px; + vertical-align: top; + border: .1rem solid @control-color; + display: inline-block; + width: 3rem; + height: 1.8rem; + padding: 0; + border-radius: .9rem; + position: absolute; + top: .3rem; + left: 0; + cursor: pointer; + outline: none; + -webkit-appearance: none; + + &::after { + content: ""; + display: block; + width: 1.4rem; + height: 1.4rem; + border-radius: .7rem; + position: absolute; + top: .1rem; + left: .1rem; + background-color: lighten(@control-color, 5%); + transition: left .15s ease; + } + + &:hover { + border-color: darken(@control-color, 15%); + + &::after { + background-color: darken(@control-color, 5%); + } + } + + &:checked { + background-color: @core-color; + border-color: @core-color; + + &::after { + left: 1.3rem; + background-color: #fff; + } + } + } } \ No newline at end of file -- cgit v1.3.1-23-gd82d From 7a9ce449a008f015ddd7eee7f92eef5ee958d3a9 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sat, 19 Mar 2016 18:50:37 +0800 Subject: change form-switch control colors --- dist/spectre.css | 4 ++-- src/forms.less | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'src/forms.less') diff --git a/dist/spectre.css b/dist/spectre.css index 98cd410..779a67f 100644 --- a/dist/spectre.css +++ b/dist/spectre.css @@ -982,10 +982,10 @@ textarea.form-input { transition: left .15s ease; } .form-switch input:hover { - border-color: #9f9f9f; + border-color: #b8b8b8; } .form-switch input:hover::after { - background-color: #b8b8b8; + background-color: #c2c2c2; } .form-switch input:checked { background-color: #5764C6; diff --git a/src/forms.less b/src/forms.less index 98b0624..756d74c 100644 --- a/src/forms.less +++ b/src/forms.less @@ -213,10 +213,10 @@ } &:hover { - border-color: darken(@control-color, 15%); + border-color: darken(@control-color, 5%); &::after { - background-color: darken(@control-color, 5%); + background-color: darken(@control-color, 1%); } } -- cgit v1.3.1-23-gd82d From 740c6b45de8fa8af3411b4df1040eee68da20b90 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sun, 20 Mar 2016 21:32:06 +0800 Subject: change form-switch colors --- dist/spectre.css | 21 ++++++++------------- src/forms.less | 19 ++++++++----------- 2 files changed, 16 insertions(+), 24 deletions(-) (limited to 'src/forms.less') diff --git a/dist/spectre.css b/dist/spectre.css index 93e1d6a..43cb851 100644 --- a/dist/spectre.css +++ b/dist/spectre.css @@ -986,6 +986,7 @@ textarea.form-input { line-height: 24px; vertical-align: top; border: 0.1rem solid #c5c5c5; + background-color: #c5c5c5; display: inline-block; width: 3rem; height: 1.8rem; @@ -1001,28 +1002,22 @@ textarea.form-input { .form-switch input::after { content: ""; display: block; - width: 1.4rem; - height: 1.4rem; - border-radius: .7rem; + width: 1.6rem; + height: 1.6rem; + border-radius: .8rem; position: absolute; - top: .1rem; - left: .1rem; - background-color: #d2d2d2; + top: 0; + left: 0; + background-color: #fff; -webkit-transition: left .15s ease; transition: left .15s ease; } -.form-switch input:hover { - border-color: #b8b8b8; -} -.form-switch input:hover::after { - background-color: #c2c2c2; -} .form-switch input:checked { background-color: #5764C6; border-color: #5764C6; } .form-switch input:checked::after { - left: 1.3rem; + left: 1.2rem; background-color: #fff; } .label { diff --git a/src/forms.less b/src/forms.less index 756d74c..ba0dbfc 100644 --- a/src/forms.less +++ b/src/forms.less @@ -187,6 +187,7 @@ line-height: 24px; vertical-align: top; border: .1rem solid @control-color; + background-color: @control-color; display: inline-block; width: 3rem; height: 1.8rem; @@ -202,22 +203,18 @@ &::after { content: ""; display: block; - width: 1.4rem; - height: 1.4rem; - border-radius: .7rem; + width: 1.6rem; + height: 1.6rem; + border-radius: .8rem; position: absolute; - top: .1rem; - left: .1rem; - background-color: lighten(@control-color, 5%); + top: 0; + left: 0; + background-color: #fff; transition: left .15s ease; } &:hover { - border-color: darken(@control-color, 5%); - &::after { - background-color: darken(@control-color, 1%); - } } &:checked { @@ -225,7 +222,7 @@ border-color: @core-color; &::after { - left: 1.3rem; + left: 1.2rem; background-color: #fff; } } -- 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/forms.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 d2a4b399fa4872ff228943e29237037189d50eb5 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Mon, 28 Mar 2016 17:17:37 +0800 Subject: add form horizontal code --- demo/index.html | 169 +++++++++++++++++++++++++++++++++++++++---------------- dist/spectre.css | 21 +++++++ src/forms.less | 23 ++++++++ 3 files changed, 166 insertions(+), 47 deletions(-) (limited to 'src/forms.less') diff --git a/demo/index.html b/demo/index.html index 26f1fd7..2bebac6 100644 --- a/demo/index.html +++ b/demo/index.html @@ -213,53 +213,128 @@

forms

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

labels

diff --git a/dist/spectre.css b/dist/spectre.css index 30825d0..3d2944d 100644 --- a/dist/spectre.css +++ b/dist/spectre.css @@ -832,6 +832,27 @@ button.btn-clear::after { .form-group:not(:last-child) { margin-bottom: 1rem; } +.form-horizontal .col-12, +.form-horizontal .col-11, +.form-horizontal .col-10, +.form-horizontal .col-9, +.form-horizontal .col-8, +.form-horizontal .col-7, +.form-horizontal .col-6, +.form-horizontal .col-5, +.form-horizontal .col-4, +.form-horizontal .col-3, +.form-horizontal .col-2, +.form-horizontal .col-1 { + float: left; +} +.form-horizontal .form-label { + padding: .8rem .4rem; +} +.form-horizontal .form-checkbox, +.form-horizontal .form-radio { + margin: .5rem 0; +} .form-input { position: relative; display: block; diff --git a/src/forms.less b/src/forms.less index 110b747..8d4cbc4 100644 --- a/src/forms.less +++ b/src/forms.less @@ -2,6 +2,29 @@ .form-group:not(:last-child) { margin-bottom: 1rem; } +.form-horizontal { + .col-12, + .col-11, + .col-10, + .col-9, + .col-8, + .col-7, + .col-6, + .col-5, + .col-4, + .col-3, + .col-2, + .col-1 { + float: left; + } + .form-label { + padding: .8rem .4rem; + } + .form-checkbox, + .form-radio { + margin: .5rem 0; + } +} // Form element: Input boxes .form-input { position: relative; -- 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/forms.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 From 16e12c5efac6eb019d6ff2732fa51704218c7bbe Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Mon, 4 Apr 2016 18:04:51 +0800 Subject: add input groups code --- demo/index.html | 60 +++++++++++++++++++++++++++++++++++++++----------------- dist/spectre.css | 44 ++++++++++++++++++++++++++++++++++++----- src/chips.less | 8 ++++---- src/forms.less | 38 +++++++++++++++++++++++++++++++++-- 4 files changed, 121 insertions(+), 29 deletions(-) (limited to 'src/forms.less') diff --git a/demo/index.html b/demo/index.html index 26d277d..59ced86 100644 --- a/demo/index.html +++ b/demo/index.html @@ -8,6 +8,11 @@ header > h4 { margin-top: 4rem; } + .bg-grey { + background-color: #efefef; + padding: 1rem; + border-radius: .3rem; + } @@ -88,50 +93,50 @@
- First column +
First column
- Second column +
Second column
- Third column +
Third column
- Fourth column +
Fourth column
- Fifth column +
Fifth column
- Sixth column +
Sixth column
- First column +
First column
- Second column +
Second column
- Third column +
Third column
- Fourth column +
Fourth column
- First column +
First column
- Second column +
Second column
- Third column +
Third column
- Fourth column +
Fourth column
@@ -230,11 +235,11 @@
- +
- +
+
- +
@@ -348,6 +353,25 @@
+
+

input groups

+
+
+
+ slack.com/ + +
+
+
+
+ slack.com/ + + +
+
+
+
+

media

diff --git a/dist/spectre.css b/dist/spectre.css index 8d379ee..09bef9b 100644 --- a/dist/spectre.css +++ b/dist/spectre.css @@ -909,11 +909,11 @@ textarea.form-input { height: auto; } .has-success .form-input, -.form-input.input-success { +.form-input.is-success { border-color: #32b643; } .has-danger .form-input, -.form-input.input-danger { +.form-input.is-danger { border-color: #e85600; } .form-label { @@ -1053,6 +1053,40 @@ textarea.form-input { left: 1.2rem; background-color: #fff; } +.input-group { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} +.input-group .input-group-addon { + line-height: 1.6rem; + padding: .7rem .8rem; + border: 1px solid #c5c5c5; + border-radius: .3rem; + background-color: #efefef; +} +.input-group .form-input:first-child:not(:last-child), +.input-group .input-group-addon:first-child:not(:last-child), +.input-group .input-group-btn:first-child:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.input-group .form-input:not(:first-child):not(:last-child), +.input-group .input-group-addon:not(:first-child):not(:last-child), +.input-group .input-group-btn:not(:first-child):not(:last-child) { + margin-left: -0.1rem; + border-radius: 0; + z-index: 49; +} +.input-group .form-input:last-child:not(:first-child), +.input-group .input-group-addon:last-child:not(:first-child), +.input-group .input-group-btn:last-child:not(:first-child) { + margin-left: -0.1rem; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + z-index: 99; +} .avatar { display: inline-block; width: 3.2rem; @@ -1154,13 +1188,13 @@ textarea.form-input { background-color: #efefef; border: 1px solid #e2e2e2; } -.chip .chip-name { - margin-left: .4rem; -} .chip:hover, .chip:focus { background-color: #eaeaea; } +.chip .chip-name { + margin-left: .4rem; +} .label { display: inline-block; padding: .3rem .5rem; diff --git a/src/chips.less b/src/chips.less index aa3027b..b5a667d 100644 --- a/src/chips.less +++ b/src/chips.less @@ -9,12 +9,12 @@ background-color: @core-border-color; border: 1px solid darken(@core-border-color, 5%); - .chip-name { - margin-left: .4rem; - } - &:hover, &:focus { background-color: darken(@core-border-color, 2%); } + + .chip-name { + margin-left: .4rem; + } } \ No newline at end of file diff --git a/src/forms.less b/src/forms.less index 9838228..eaab29d 100644 --- a/src/forms.less +++ b/src/forms.less @@ -86,11 +86,11 @@ // Status .has-success &, - &.input-success { + &.is-success { border-color: @control-color-success; } .has-danger &, - &.input-danger { + &.is-danger { border-color: @control-color-danger; } @@ -250,3 +250,37 @@ } } } + +// Form element: Input groups +.input-group { + display: flex; + + .input-group-addon { + line-height: 1.6rem; + padding: .7rem .8rem; + border: 1px solid @control-color; + border-radius: .3rem; + background-color: @core-border-color; + } + + .form-input, + .input-group-addon, + .input-group-btn { + &:first-child:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + &: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; + } + } +} + -- cgit v1.3.1-23-gd82d