diff options
add input style
8 files changed, 182 insertions, 6 deletions
| -rw-r--r-- | demo/index.html | 44 | ||||
| -rw-r--r-- | dist/spectre.css | 59 | ||||
| -rw-r--r-- | spectre.less | 3 | ||||
| -rw-r--r-- | src/buttons.less | 2 | ||||
| -rw-r--r-- | src/dist/layout.css | 1 | ||||
| -rw-r--r-- | src/dist/type.css | 1 | ||||
| -rw-r--r-- | src/forms.less | 74 | ||||
| -rw-r--r-- | src/variables.less | 4 |
diff --git a/demo/index.html b/demo/index.html index 5f0b15f..cc74e8e 100644 --- a/demo/index.html +++ b/demo/index.html @@ -117,6 +117,50 @@ </div> </div> </section> + <section class="layout"> + <header class="text-center"><h4>forms</h4></header> + <form> + <div class="form-group"> + <label class="label" for="input-example-1">Name</label> + <input class="input" type="text" id="input-example-1" placeholder="Name"> + </div> + <div class="form-group"> + <label class="label" for="input-example-2">Email</label> + <input class="input is-success" type="email" id="input-example-2" placeholder="Email"> + </div> + <div class="form-group"> + <label class="label">Subject</label> + <select> + <option>Select dropdown</option> + <option>With options</option> + </select> + </div> + <div class="form-group"> + <label class="label" for="input-example-3">Message</label> + <textarea class="textarea" id="input-example-3" placeholder="Textarea"></textarea> + </div> + <div class="form-group"> + <label class="checkbox"> + <input type="checkbox"> + Remember me + </label> + </div> + <div class="form-group"> + <label class="radio"> + <input type="radio" name="question"> + Yes + </label> + <label class="radio"> + <input type="radio" name="question"> + No + </label> + </div> + <div class="form-group"> + <button class="btn btn-primary">Submit</button> + <button class="btn">Cancel</button> + </div> + </form> + </section> </section> </body> </html>
\ No newline at end of file diff --git a/dist/spectre.css b/dist/spectre.css index 28e2f18..4777951 100644 --- a/dist/spectre.css +++ b/dist/spectre.css @@ -654,8 +654,8 @@ button.active { .btn.loading, button.loading { color: transparent !important; - pointer-events: none; position: relative; + pointer-events: none; } .btn.loading::after, button.loading::after { @@ -747,6 +747,63 @@ button.btn-block { width: 100%; display: block; } +.form-group:not(:last-child) { + margin-bottom: 1rem; +} +form .label, +.form-group .label { + display: block; + margin-bottom: .5rem; +} +.input { + position: relative; + display: block; + width: 100%; + max-width: 100%; + height: 3.2rem; + background-color: #fff; + background-image: none; + border: 0.1rem solid #c5c5c5; + border-radius: 3px; + color: #333; + font-size: 1.4rem; + line-height: 1.6rem; + padding: .7rem .8rem; + -webkit-appearance: none; + outline: 0; +} +.input:focus { + border-color: #5764C6; +} +.input[disabled] { + opacity: .75; + background-color: #eeeff2; + pointer-events: none; +} +.input.input-sm { + height: 2.4rem; + border-radius: 2px; + font-size: 1.2rem; + line-height: 1.4rem; + padding: .4rem .6rem; +} +.input.input-lg { + height: 4.2rem; + border-radius: 4px; + font-size: 1.8rem; + line-height: 2rem; + padding: 1rem 1.2rem; +} +.input.input-inline { + width: auto; + display: inline-block; +} +.input.is-success { + border-color: #00c372; +} +.input.is-danger { + border-color: #e74c3c; +} .clearfix::after, .container::after, .columns::after { diff --git a/spectre.less b/spectre.less index 9008b89..9365794 100644 --- a/spectre.less +++ b/spectre.less @@ -14,8 +14,7 @@ // Components @import 'src/buttons.less'; -//@import 'src/inputs.less'; -//@import 'src/forms.less'; +@import 'src/forms.less'; //@import 'src/labels.less'; //@import 'src/cards.less'; //@import 'src/menus.less'; diff --git a/src/buttons.less b/src/buttons.less index 0c29c43..b3cf357 100644 --- a/src/buttons.less +++ b/src/buttons.less @@ -32,8 +32,8 @@ button { &.loading { color: transparent !important; - pointer-events: none; position: relative; + pointer-events: none; &::after { border: 2px solid @core-color; diff --git a/src/dist/layout.css b/src/dist/layout.css deleted file mode 100644 index 428cfa1..0000000 --- a/src/dist/layout.css +++ /dev/null @@ -1 +0,0 @@ -/* Layout */ diff --git a/src/dist/type.css b/src/dist/type.css deleted file mode 100644 index d7bacdf..0000000 --- a/src/dist/type.css +++ /dev/null @@ -1 +0,0 @@ -/* Type */ diff --git a/src/forms.less b/src/forms.less new file mode 100644 index 0000000..95ed387 --- /dev/null +++ b/src/forms.less @@ -0,0 +1,74 @@ +// Forms +.form-group:not(:last-child) { + margin-bottom: 1rem; +} +form, +.form-group { + .label { + display: block; + margin-bottom: .5rem; + } +} +.input { + position: relative; + display: block; + width: 100%; + max-width: 100%; + height: 3.2rem; + background-color: #fff; + background-image: none; + border: .1rem solid @control-color; + border-radius: 3px; + color: @body-font-color; + font-size: 1.4rem; + line-height: 1.6rem; + padding: .7rem .8rem; + -webkit-appearance: none; + outline: 0; + + &:focus { + border-color: @core-color; + } + + &[disabled] { + opacity: .75; + background-color: #eeeff2; + pointer-events: none; + } + + // Input Small + &.input-sm { + height: 2.4rem; + border-radius: 2px; + font-size: 1.2rem; + line-height: 1.4rem; + padding: .4rem .6rem; + } + + // Input Large + &.input-lg { + height: 4.2rem; + border-radius: 4px; + font-size: 1.8rem; + line-height: 2rem; + padding: 1rem 1.2rem; + } + + // Input Inlines + &.input-inline { + width: auto; + display: inline-block; + } + + // Status + &.is-success { + border-color: @control-color-success; + } + &.is-danger { + border-color: @control-color-danger; + } + + // TODO: Input with icons +} + + diff --git a/src/variables.less b/src/variables.less index da3b46f..c85f6b2 100644 --- a/src/variables.less +++ b/src/variables.less @@ -8,6 +8,10 @@ // Colors @core-color: #5764C6; +@control-color: #c5c5c5; +@control-color-success: #00c372; +@control-color-warning: #fccf42; +@control-color-danger: #e74c3c; // Mixins |