eSales Media Git repositories
Browse code

Use a more modular structure for better extensibility

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

Initial commit

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