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(-) 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-25-gf67e