diff --git a/component/styles/_forms_responsive.scss b/component/styles/_forms_responsive.scss index b3b9727..35b46e8 100644 --- a/component/styles/_forms_responsive.scss +++ b/component/styles/_forms_responsive.scss @@ -2,7 +2,7 @@ .control_group, .control-group { .control-input { - margin: 0 0 5px 0; + margin: 0 0 0.25em 0; } .label, @@ -89,7 +89,7 @@ position: relative; left: 0; @include opacity(1); - margin: 3px 0 0 0; + margin: 0.25em 0 0 0; &:before, &:after { @@ -113,7 +113,7 @@ .control_group, .control-group{ - input:focus ~ .hint { + input:focus ~ .input-hint { left: 0; } } diff --git a/component/styles/forms.scss b/component/styles/forms.scss index 39df42c..df4d0ce 100644 --- a/component/styles/forms.scss +++ b/component/styles/forms.scss @@ -28,7 +28,7 @@ */ .control_group, .control-group { - padding: 5px 8px; + padding: .4em .7em; position: relative; .label, @@ -40,9 +40,9 @@ padding: 0; label { - line-height: 1; + line-height: 1.3; display: inline-block; - padding: 9px 20px 9px 3px; + padding: .75em 1.75em .75em .1em; } } @@ -55,7 +55,7 @@ } /** - * @name Fielset + * @name Fieldset * * @description Defines a standard styling for fieldsets which serve as built-in input wrappers. * @@ -65,14 +65,14 @@ fieldset { border: 1px solid $fieldset_border_color; @include border-radius(5px); - padding: 0; - margin: 0 0 10px; + padding: 0 0 .5em; + margin: 0 0 .75em; background: $fieldset_background_color; legend { width: auto; - margin-left: 10px; - padding: 3px 5px; + margin-left: .75em; + padding: .1em .5em; color: $fieldset_text_color; @include background(linear-gradient(rgba(white, 1), rgba(white, 0) 90%)); } @@ -104,12 +104,13 @@ input[type="date"], input[type="number"], textarea { width: $input_width; - padding: 6px $input_padding; + padding: .5em $input_padding; color: inherit; outline: none; border: 1px solid $border_color; @include box-shadow(0 1px 2px 0 darken($shadow_color, 15%) inset); @include border-radius($border_radius); + font-size: inherit; &:hover { border-color: darken($border_color, 18%); @@ -126,27 +127,27 @@ input[type="file"], input[type="range"] { width: auto; max-width: $input_width; - padding: 6px 0; + padding: .5em 0; } input[type="range"] { width: $input_width; - padding-top: 4px; + padding-top: .3em; } input[type="number"] { width: 50px; text-align: left; - padding: 4px $input_padding; + padding: .3em $input_padding; } select { min-width: $input_width/1.5; width: auto; max-width: $input_width; - padding: 4px 0 4px $input_padding; + padding: .45em $input_padding; position: relative; - top: 2px; + top: .1em; font-size: 100%; color: $text_color; @@ -195,8 +196,8 @@ input:focus:-moz-placeholder { &:after { display: inline-block; position: absolute; - right: 11px; - top: 4px; + right: 0.9em; + top: .3em; font-size: 125%; font-weight: bold; content: '*'; @@ -223,7 +224,7 @@ input:focus:-moz-placeholder { .informative { display: inline-block; width: $input_width; - padding: 8px 0; + padding: .75em 0; line-height: 1.3; font-size: 100%; color: $readonly_text_color; @@ -276,10 +277,10 @@ input[type="file"][disabled="disabled"] { .radio { .control { display: block; - padding: 1px 0 5px 0; + padding: .75em 1.75em 0 .1em; label { - padding-right: 15px; + padding-right: 1.25em; } } @@ -289,7 +290,7 @@ input[type="file"][disabled="disabled"] { &.horizontal .control { display: inline-block; - margin: 0 5px 0 0; + margin: 0 .5em 0 0; } &:not(.inline) { @@ -302,13 +303,12 @@ input[type="file"][disabled="disabled"] { input[type="checkbox"] { margin: 0 2px 0 0; position: relative; - top: 1px; } &.inline { .control { display: inline-block; - margin-left: 15px; + margin-left: 1.25em; } } } @@ -322,7 +322,7 @@ input[type="file"][disabled="disabled"] { * .input-message the basic building block of all input messages * .label-help displays a help message to the left of the label through a hoverable icon */ -.input-help, +.input-help span, .input-note, .input-hint, .input-message { @@ -332,16 +332,18 @@ input[type="file"][disabled="disabled"] { vertical-align: middle; font-size: 90%; white-space: normal; + padding: 0.875em $input_padding; } +// -- HELP .input-help { i { display: inline-block; position: relative; - height: 13px; - width: 13px; - padding-top: 1px; + height: 1.25em; + width: 1.25em; text-align: center; + font-style: normal; color: $note_text_color; @include text-shadow(0 1px 0 rgba($white_color, 0.8)); @include border-radius(50%); @@ -368,11 +370,11 @@ input[type="file"][disabled="disabled"] { height: 0; width: 0; border-style: solid; - border-width: 0 9px 8px 9px; + border-width: 0 .75em .7em .75em; border-color: $transparent_white_color $transparent_white_color $dark_box_gradient; position: absolute; - bottom: -11px; - left: -2px; + bottom: -1em; + left: -0.2em; z-index: 2; } } @@ -382,10 +384,9 @@ input[type="file"][disabled="disabled"] { @include opacity(0.97); position: absolute; left: 5px; - top: 33px; + top: 3em; z-index: 1; width: $left_column_width - 40px; - padding: 7px 10px 9px 10px; margin: 0; @include border-radius($border_radius); @include linear_gradient($dark_box_color, $dark_box_gradient, $dark_box_color, 20%); @@ -413,7 +414,9 @@ input[type="file"][disabled="disabled"] { display: block; font-size: 85%; color: $note_text_color; - margin: 0 0 5px 10px; + margin: 0; + padding-top: 3px; + padding-bottom: 0; strong { font-weight: bold; @@ -421,12 +424,12 @@ input[type="file"][disabled="disabled"] { } } +// -- HINTS & MESSAGES .input-hint, .input-message { position: relative; left: 0; color: $message_text_color; - padding: 9px $input_padding 7px $input_padding; margin-left: 10px; @include linear_gradient($light_box_color, $light_box_gradient, $light_box_color, 30%); @include filter-gradient($light_box_gradient, $light_box_color); @@ -445,7 +448,7 @@ input[type="file"][disabled="disabled"] { border-width: 8px 8px 8px 0; border-color: $transparent_white_color $light_box_color $transparent_white_color; position: absolute; - top: 14px; + top: 15px; left: -8px; margin-top: -8px; // half size of triangle z-index: 2; @@ -458,6 +461,7 @@ input[type="file"][disabled="disabled"] { } } +// -- HINT .input-hint { @include opacity(0); position: absolute; @@ -471,6 +475,7 @@ input[type="file"][disabled="disabled"] { } } +// -- MESSAGE .input-message ~ .input-hint { display: none; } diff --git a/demo/styles/example.scss b/demo/styles/example.scss index 52c835f..5701eea 100644 --- a/demo/styles/example.scss +++ b/demo/styles/example.scss @@ -5,3 +5,8 @@ -webkit-box-sizing: border-box; box-sizing: border-box; } + +html { + font-family: $screenfont; + font-size: 12px; +} diff --git a/demo/views/example.html b/demo/views/example.html index 9f2c413..5c2507d 100644 --- a/demo/views/example.html +++ b/demo/views/example.html @@ -1,16 +1,6 @@
-

Fieldset Example

-
-
- Fieldset Legend - - -
-
-
- -
-

Available Form Inputs

+

Form Example

+
@@ -20,6 +10,7 @@

Available Form Inputs

The length should be between 1-50 characters.
+
? @@ -31,6 +22,7 @@

Available Form Inputs

The length should be between 1-15 characters.
+
@@ -40,6 +32,7 @@

Available Form Inputs

+
@@ -48,6 +41,7 @@

Available Form Inputs

You need to use at least one capital letter, one digit and one special character (such as "." "," "_" "-"). The length should be between 1-15 characters.
+
@@ -57,6 +51,7 @@

Available Form Inputs

Please re-type your password.
+
@@ -65,6 +60,7 @@

Available Form Inputs

Please re-type your password.
+
@@ -74,6 +70,7 @@

Available Form Inputs

The length should be between 1-50 characters.
+
@@ -84,3 +81,154 @@

Available Form Inputs

+ + +
+

Fieldset Example

+
+
+ Fieldset Legend +
+
+ +
+
+ +
+
+
+
+
+ + +
+

Available Form Inputs

+
+
+ ? + + Here will be placed explanatory information about concrete label term. In this case it would be for "Text input". What is Text input? +
+
+ + Fill in your given name. Maximum allowed length is up to 30 characters. (Hint length is max 2 lines) + This is note, which is visible all the time. Can be longer than one line. Don't use if not necessary. +
+
+ +
+
+ +
+
+ + Here is example of hint and how it will behave when changing the layout. +
+
+ +
+
+ +
+
+ + Here is example of hint and how it will behave when changing the layout. +
+
+ +
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + + +