eSales Media Git repositories
Browse code

Optimizations and extensions

Benjamin Roth authored on19/01/2017 13:34:46
Showing1 changed files
assets/css/scss/form.scss
History View file @82508bd
... ... 
@@ -18,6 +18,8 @@ $button-text-color: #ffffff;
18 18 
 $button-background-color: #2f67b7;
19 19 
 $button-border-color: #082054;
20 20 
 $background-color-ro: #eeeeee;
21 
+$placeholder-color: #9c8152;
22 
+$field-color: #9c8152;
21 23
22 24 
 // Sizes & Paddings
23 25 
 $field-padding: 3px 6px;
... ... 
@@ -29,6 +31,9 @@ $button-border-width: 2px;
29 31
30 32 
 $font-size-field: 16px;
31 33
34 
+// Font
35 
+$font-family-form: "Noto Serif", Arial, Helvetica, FreeSans, sans-serif;
36 
+
32 37 
 /**
33 38 
  * Since fieldset borders are removed in the reset style sheet, adjust the
34 39 
  * legends accordingly
... ... 
@@ -47,7 +52,26 @@ select {
47 52 
   line-height: 150%;
48 53 
   outline: none;
49 54 
   font-size: $font-size-field;
50 
-  font-family: inherit;
55 
+  font-family: $font-family-form;
56 
+}
57 
+
58 
+/**
59 
+ * Placeholders
60 
+ */
61 
+::-webkit-input-placeholder {
62 
+  color: $placeholder-color;
63 
+}
64 
+
65 
+:-moz-placeholder { /* Firefox 18- */
66 
+  color: $placeholder-color;
67 
+}
68 
+
69 
+::-moz-placeholder {  /* Firefox 19+ */
70 
+  color: $placeholder-color;
71 
+}
72 
+
73 
+:-ms-input-placeholder {
74 
+  color: $placeholder-color;
51 75 
 }
52 76
53 77 
 /**
... ... 
@@ -65,6 +89,7 @@ input[type="number"], input[type="search"], input[type="tel"], input[type="time"
65 89 
   @include box-shadow(inset 0 1px 1px $shadow-color);
66 90 
   @include transition(all .15s linear);
67 91 
   @include box-sizing(border-box);
92 
+  color: $field-color;
68 93
69 94 
   &:focus {
70 95 
     outline: 0;
... ... 
@@ -174,11 +199,24 @@ input[type="submit"], .button, button {
174 199 
  * Optional button styles
175 200 
  */
176 201 
 .button_block input[type="submit"],
177 
-.button_block button {
202 
+.button_block button,
203 
+button.button_block,
204 
+.button_block.button {
178 205 
   display: block;
179 206 
   width: 100%;
180 207 
 }
181 208
209 
+.button_small input[type="submit"],
210 
+.button_small button,
211 
+button.button_small,
212 
+.button_small.button {
213 
+  height: 30px;
214 
+}
215 
+
216 
+a.button_small.button {
217 
+  line-height: 30px;
218 
+}
219 
+
182 220 
 /**
183 221 
  * Checkbox
184 222 
  */
Browse code

Fix some minor styling issues

Benjamin Roth authored on25/02/2016 14:11:22
Showing1 changed files
assets/css/scss/form.scss
History View file @aa636f4
... ... 
@@ -47,6 +47,7 @@ select {
47 47 
   line-height: 150%;
48 48 
   outline: none;
49 49 
   font-size: $font-size-field;
50 
+  font-family: inherit;
50 51 
 }
51 52
52 53 
 /**
... ... 
@@ -153,11 +154,17 @@ input[type="submit"], .button, button {
153 154 
   @include transition(background .15s linear);
154 155 
   @include box-sizing(border-box);
155 156
156 
-  &:hover {
157 
+  a& {
158 
+    line-height: $button-height;
159 
+  }
160 
+
161 
+  &:hover,
162 
+  a&:hover {
157 163 
     text-decoration: none;
158 164 
   }
159 165
160 
-  &:active {
166 
+  &:active,
167 
+  a&:active {
161 168 
     background-color: $button-background-color-hl;
162 169 
     border-color: $button-border-color-hl;
163 170 
   }
Browse code

Add default font size to form classes

Benjamin Roth authored on29/09/2015 11:23:24
Showing1 changed files
assets/css/scss/form.scss
History View file @18d72a8
... ... 
@@ -27,6 +27,8 @@ $button-padding: 3px 15px 3px 14px;
27 27 
 $button-height: 35px;
28 28 
 $button-border-width: 2px;
29 29
30 
+$font-size-field: 16px;
31 
+
30 32 
 /**
31 33 
  * Since fieldset borders are removed in the reset style sheet, adjust the
32 34 
  * legends accordingly
... ... 
@@ -44,6 +46,7 @@ button,
44 46 
 select {
45 47 
   line-height: 150%;
46 48 
   outline: none;
49 
+  font-size: $font-size-field;
47 50 
 }
48 51
49 52 
 /**
Browse code

Use a more modular structure for better extensibility

Benjamin Roth authored on28/08/2015 08:55:03
Showing1 changed files
assets/css/scss/form.scss
History View file @2268328
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,178 @@
1 
+@import "compass";
2 
+
3 
+// Radius
4 
+$field-radius: 3px;
5 
+$button-radius: 3px;
6 
+
7 
+// Colors
8 
+$border-color-hl: #082054;
9 
+$background-color-hl: lighten($border-color-hl,80%);
10 
+$button-background-color-hl: #082054;
11 
+$button-border-color-hl: #082054;
12 
+$background-color: #ffffff;
13 
+$border-color: #cccccc;
14 
+$shadow-color: #eeeeee;
15 
+$label-color: inherit;
16 
+$legend-color: inherit;
17 
+$button-text-color: #ffffff;
18 
+$button-background-color: #2f67b7;
19 
+$button-border-color: #082054;
20 
+$background-color-ro: #eeeeee;
21 
+
22 
+// Sizes & Paddings
23 
+$field-padding: 3px 6px;
24 
+$field-height: 35px;
25 
+$field-border-width: 1px;
26 
+$button-padding: 3px 15px 3px 14px;
27 
+$button-height: 35px;
28 
+$button-border-width: 2px;
29 
+
30 
+/**
31 
+ * Since fieldset borders are removed in the reset style sheet, adjust the
32 
+ * legends accordingly
33 
+ */
34 
+legend {
35 
+  width: 100%;
36 
+  display: block;
37 
+  font-weight: bold;
38 
+  border: 0;
39 
+}
40 
+
41 
+input,
42 
+textarea,
43 
+button,
44 
+select {
45 
+  line-height: 150%;
46 
+  outline: none;
47 
+}
48 
+
49 
+/**
50 
+ * Text fields and textareas
51 
+ */
52 
+input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"],
53 
+input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input:not([type]), textarea, select {
54 
+  width: 100%;
55 
+  display: inline-block;
56 
+  padding: $field-padding;
57 
+  background: $background-color;
58 
+  border: $field-border-width solid $border-color;
59 
+  height: $field-height;
60 
+  @include border-radius($field-radius);
61 
+  @include box-shadow(inset 0 1px 1px $shadow-color);
62 
+  @include transition(all .15s linear);
63 
+  @include box-sizing(border-box);
64 
+
65 
+  &:focus {
66 
+    outline: 0;
67 
+    background: $background-color-hl;
68 
+    border-color: $border-color-hl;
69 
+  }
70 
+}
71 
+
72 
+/**
73 
+ * Label styling
74 
+ */
75 
+
76 
+.formbody label {
77 
+  color: $label-color;
78 
+}
79 
+
80 
+/**
81 
+ * Fieldset styling
82 
+ */
83 
+.formbody > fieldset {
84 
+  margin-top: 1.5em;
85 
+
86 
+  legend {
87 
+    color: $legend-color;
88 
+    border-bottom-color: $legend-color;
89 
+  }
90 
+}
91 
+
92 
+
93 
+/**
94 
+ * Fix some width and height settings
95 
+ */
96 
+input[type="file"] {
97 
+  cursor: pointer;
98 
+}
99 
+
100 
+select, input[type="file"] {
101 
+  display: block;
102 
+}
103 
+
104 
+input[type="file"], input[type="image"], input[type="submit"], input[type="reset"], input[type="button"], input[type="radio"], input[type="checkbox"] {
105 
+  width: auto;
106 
+}
107 
+
108 
+textarea, select[multiple], select[size] {
109 
+  height: auto;
110 
+}
111 
+
112 
+/**
113 
+ * Checkboxes and radio buttons
114 
+ */
115 
+input[type="radio"], input[type="checkbox"] {
116 
+  margin: 0 3px 0 0;
117 
+}
118 
+
119 
+input[type="radio"], input[type="checkbox"], label {
120 
+  vertical-align: middle;
121 
+}
122 
+
123 
+/**
124 
+ * Handle disabled and read-only
125 
+ */
126 
+input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
127 
+  cursor: not-allowed;
128 
+  background: $background-color-ro;
129 
+}
130 
+
131 
+input[type="radio"][disabled], input[type="checkbox"][disabled], input[type="radio"][readonly], input[type="checkbox"][readonly] {
132 
+  background: transparent;
133 
+}
134 
+
135 
+/**
136 
+ * Buttons
137 
+ */
138 
+input[type="submit"], .button, button {
139 
+  display: inline-block;
140 
+  padding: $button-padding;
141 
+  margin-bottom: 0;
142 
+  text-align: center;
143 
+  vertical-align: middle;
144 
+  color: $button-text-color;
145 
+  cursor: pointer;
146 
+  border: $button-border-width solid $button-border-color;
147 
+  height: $button-height;
148 
+  @include border-radius($button-radius);
149 
+  background-color: $button-background-color;
150 
+  @include transition(background .15s linear);
151 
+  @include box-sizing(border-box);
152 
+
153 
+  &:hover {
154 
+    text-decoration: none;
155 
+  }
156 
+
157 
+  &:active {
158 
+    background-color: $button-background-color-hl;
159 
+    border-color: $button-border-color-hl;
160 
+  }
161 
+}
162 
+
163 
+/**
164 
+ * Optional button styles
165 
+ */
166 
+.button_block input[type="submit"],
167 
+.button_block button {
168 
+  display: block;
169 
+  width: 100%;
170 
+}
171 
+
172 
+/**
173 
+ * Checkbox
174 
+ */
175 
+.widget.widget-checkbox label, .widget.widget-radio label {
176 
+  display: inline-block;
177 
+  margin-bottom: 0;
178 
+}
0 179 
\ No newline at end of file