active_administration 0.0.2 → 0.0.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (91) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile +1 -1
  3. data/README.md +2 -1
  4. data/active_administration.gemspec +2 -1
  5. data/app/assets/javascripts/active_administration/README.md +0 -0
  6. data/app/assets/javascripts/active_administration/metro-accordion.js +70 -0
  7. data/app/assets/javascripts/active_administration/metro-button-set.js +88 -0
  8. data/app/assets/javascripts/active_administration/metro-calendar.js +437 -0
  9. data/app/assets/javascripts/active_administration/metro-carousel.js +304 -0
  10. data/app/assets/javascripts/active_administration/metro-core.js +39 -0
  11. data/app/assets/javascripts/active_administration/metro-countdown.js +200 -0
  12. data/app/assets/javascripts/active_administration/metro-date-format.js +137 -0
  13. data/app/assets/javascripts/active_administration/metro-datepicker.js +138 -0
  14. data/app/assets/javascripts/active_administration/metro-dialog.js +221 -0
  15. data/app/assets/javascripts/active_administration/metro-drag-tile.js +46 -0
  16. data/app/assets/javascripts/active_administration/metro-dropdown.js +112 -0
  17. data/app/assets/javascripts/active_administration/metro-fluentmenu.js +57 -0
  18. data/app/assets/javascripts/active_administration/metro-global.js +4 -0
  19. data/app/assets/javascripts/active_administration/metro-hint.js +104 -0
  20. data/app/assets/javascripts/active_administration/metro-initiator.js +271 -0
  21. data/app/assets/javascripts/active_administration/metro-input-control.js +318 -0
  22. data/app/assets/javascripts/active_administration/metro-listview.js +53 -0
  23. data/app/assets/javascripts/active_administration/metro-live-tile.js +162 -0
  24. data/app/assets/javascripts/active_administration/metro-loader.js +46 -0
  25. data/app/assets/javascripts/active_administration/metro-locale.js +132 -0
  26. data/app/assets/javascripts/active_administration/metro-notify.js +120 -0
  27. data/app/assets/javascripts/active_administration/metro-panel.js +41 -0
  28. data/app/assets/javascripts/active_administration/metro-plugin-template.js +21 -0
  29. data/app/assets/javascripts/active_administration/metro-progressbar.js +97 -0
  30. data/app/assets/javascripts/active_administration/metro-pull.js +38 -0
  31. data/app/assets/javascripts/active_administration/metro-rating.js +99 -0
  32. data/app/assets/javascripts/active_administration/metro-scroll.js +756 -0
  33. data/app/assets/javascripts/active_administration/metro-slider.js +304 -0
  34. data/app/assets/javascripts/active_administration/metro-stepper.js +105 -0
  35. data/app/assets/javascripts/active_administration/metro-streamer.js +214 -0
  36. data/app/assets/javascripts/active_administration/metro-tab-control.js +96 -0
  37. data/app/assets/javascripts/active_administration/metro-table.js +74 -0
  38. data/app/assets/javascripts/active_administration/metro-tile-transform.js +65 -0
  39. data/app/assets/javascripts/active_administration/metro-times.js +190 -0
  40. data/app/assets/javascripts/active_administration/metro-touch-handler.js +65 -0
  41. data/app/assets/javascripts/active_administration/metro-treeview.js +64 -0
  42. data/app/assets/javascripts/active_administration/metro-wizard.js +148 -0
  43. data/app/assets/stylesheets/active_administration/accordion.less +64 -0
  44. data/app/assets/stylesheets/active_administration/balloon.less +88 -0
  45. data/app/assets/stylesheets/active_administration/breadcrumbs.less +118 -0
  46. data/app/assets/stylesheets/active_administration/buttons.less +383 -0
  47. data/app/assets/stylesheets/active_administration/calendar.less +123 -0
  48. data/app/assets/stylesheets/active_administration/carousel.less +118 -0
  49. data/app/assets/stylesheets/active_administration/colors.less +589 -0
  50. data/app/assets/stylesheets/active_administration/countdown.less +57 -0
  51. data/app/assets/stylesheets/active_administration/dataTables.less +134 -0
  52. data/app/assets/stylesheets/active_administration/fluent-menu.less +231 -0
  53. data/app/assets/stylesheets/active_administration/forms.less +414 -0
  54. data/app/assets/stylesheets/active_administration/funcs.less +178 -0
  55. data/app/assets/stylesheets/active_administration/grid.less +91 -0
  56. data/app/assets/stylesheets/active_administration/hint.less +120 -0
  57. data/app/assets/stylesheets/active_administration/iconFont-content.less +1353 -0
  58. data/app/assets/stylesheets/active_administration/iconFont.less +47 -0
  59. data/app/assets/stylesheets/active_administration/icons.less +10 -0
  60. data/app/assets/stylesheets/active_administration/images.less +75 -0
  61. data/app/assets/stylesheets/active_administration/layout.less +137 -0
  62. data/app/assets/stylesheets/active_administration/lists.less +258 -0
  63. data/app/assets/stylesheets/active_administration/menus.less +469 -0
  64. data/app/assets/stylesheets/active_administration/metro-bootstrap-responsive.less +300 -0
  65. data/app/assets/stylesheets/active_administration/metro-bootstrap.less +68 -0
  66. data/app/assets/stylesheets/active_administration/misc.less +72 -0
  67. data/app/assets/stylesheets/active_administration/navigation-bar.less +317 -0
  68. data/app/assets/stylesheets/active_administration/notice.less +52 -0
  69. data/app/assets/stylesheets/active_administration/notify.less +43 -0
  70. data/app/assets/stylesheets/active_administration/pagination.less +83 -0
  71. data/app/assets/stylesheets/active_administration/panels.less +38 -0
  72. data/app/assets/stylesheets/active_administration/progress-bar.less +25 -0
  73. data/app/assets/stylesheets/active_administration/rating.less +103 -0
  74. data/app/assets/stylesheets/active_administration/reset.less +219 -0
  75. data/app/assets/stylesheets/active_administration/scroll.less +141 -0
  76. data/app/assets/stylesheets/active_administration/sidebar.less +158 -0
  77. data/app/assets/stylesheets/active_administration/slider.less +106 -0
  78. data/app/assets/stylesheets/active_administration/stepper.less +80 -0
  79. data/app/assets/stylesheets/active_administration/streamer.less +250 -0
  80. data/app/assets/stylesheets/active_administration/tab-control.less +79 -0
  81. data/app/assets/stylesheets/active_administration/tables.less +170 -0
  82. data/app/assets/stylesheets/active_administration/tiles.less +599 -0
  83. data/app/assets/stylesheets/active_administration/transform.less +23 -0
  84. data/app/assets/stylesheets/active_administration/treeview.less +96 -0
  85. data/app/assets/stylesheets/active_administration/typography.less +382 -0
  86. data/app/assets/stylesheets/active_administration/utils.less +180 -0
  87. data/app/assets/stylesheets/active_administration/variables.less +250 -0
  88. data/app/assets/stylesheets/active_administration/window.less +225 -0
  89. data/app/assets/stylesheets/active_administration/wizard.less +53 -0
  90. data/lib/active_admin/version.rb +1 -1
  91. metadata +103 -10
@@ -0,0 +1,57 @@
1
+ .countdown, .times{
2
+ width: auto;
3
+ margin:0 auto;
4
+ font: 20px/1.5 'Open Sans Condensed',sans-serif;
5
+ text-align:center;
6
+ letter-spacing:-3px;
7
+
8
+ .digit-wrapper{
9
+ display: inline-block;
10
+ height: 1.6em;
11
+ overflow: hidden;
12
+ position: relative;
13
+ width: 1.05em;
14
+
15
+ .digit{
16
+ position:absolute;
17
+ display:block;
18
+ width:1em;
19
+ text-align:center;
20
+ vertical-align: middle;
21
+ letter-spacing:-1px;
22
+
23
+ &.stop {
24
+ background-color: @red;
25
+ }
26
+ }
27
+ }
28
+
29
+ .divider{
30
+ display :inline-block;
31
+ width: 16px;
32
+ height: 1.5em;
33
+ position :relative;
34
+ font-weight: bold;
35
+
36
+ &:before {
37
+ width: 100%;
38
+ height:1.5em;
39
+ position: absolute;
40
+ content: ":";
41
+ color: inherit;
42
+ font-size: inherit;
43
+ vertical-align: middle;
44
+ text-align: center;
45
+ left: -20%;
46
+ top: -15%;
47
+ }
48
+ }
49
+
50
+ &.inverse {
51
+ .digit {
52
+ color: @grayDark !important;
53
+ background-color: @grayLighter !important;
54
+ }
55
+ }
56
+ }
57
+
@@ -0,0 +1,134 @@
1
+ .dataTable {
2
+ clear: both;
3
+
4
+ thead {
5
+ .sorting_asc, .sorting_desc, .sorting {
6
+ cursor: pointer;
7
+
8
+ &:after {
9
+ font-family: @sysIconFontName;
10
+ position: relative;
11
+ float: right;
12
+ right: 0;
13
+ color: @grayLight;
14
+ }
15
+ }
16
+
17
+ .sorting {
18
+ &:after {
19
+ content: "\e011";
20
+ }
21
+ }
22
+
23
+ .sorting_asc {
24
+ &:after {
25
+ content: "\e010";
26
+ }
27
+ }
28
+
29
+ .sorting_desc {
30
+ &:after {
31
+ content: "\e012";
32
+ }
33
+ }
34
+
35
+ .sorting_asc, .sorting_desc {
36
+ &:after {
37
+ color: @dark;
38
+ }
39
+ }
40
+ }
41
+ }
42
+
43
+ .dataTables_wrapper {
44
+ .dataTables_filter, .dataTables_length {
45
+ label {
46
+ vertical-align: middle;
47
+ }
48
+
49
+ input, select {
50
+ border: 1px @inputRestState solid;
51
+ width: auto;
52
+ height: 100%;
53
+ padding: 5px;
54
+ z-index: 1;
55
+ position: relative;
56
+
57
+ &:focus {
58
+ outline: 0;
59
+ border-color: @inputFocusState;
60
+ }
61
+ }
62
+ }
63
+
64
+ .dataTables_length {
65
+ float: left;
66
+
67
+ select {
68
+ margin: 0 5px;
69
+ }
70
+
71
+ }
72
+
73
+ .dataTables_filter {
74
+ float: right;
75
+
76
+ input {
77
+ margin-left: 5px;
78
+ }
79
+ }
80
+
81
+ .dataTables_paginate {
82
+ float: right;
83
+ text-align: right;
84
+
85
+ .paginate_button {
86
+ .button;
87
+ color: inherit;
88
+ display: block;
89
+ float: left;
90
+ margin-right: 1px;
91
+
92
+ &.current {
93
+ background-color: @lightBlue ;
94
+ color: @white;
95
+ }
96
+ }
97
+ }
98
+
99
+ .dataTables_info {
100
+ float: left;
101
+ }
102
+
103
+ .dataTables_scrollHeadInner {
104
+ table {
105
+ margin: 0 !important;
106
+ }
107
+ }
108
+
109
+ .dataTables_processing {
110
+ position: absolute;
111
+ top: 50%;
112
+ left: 50%;
113
+ margin-left: -100px;
114
+ margin-top: -2em;
115
+ width: 200px;
116
+ padding: 20px;
117
+ text-align: center;
118
+ font-size: 1.2rem;
119
+ background-color: @white;
120
+ .shadow;
121
+ }
122
+ }
123
+
124
+ .dataTables_wrapper .dataTables_scroll {
125
+ clear: both;
126
+ }
127
+
128
+ .dataTables_wrapper:after {
129
+ visibility: hidden;
130
+ display: block;
131
+ content: "";
132
+ clear: both;
133
+ height: 0;
134
+ }
@@ -0,0 +1,231 @@
1
+ .fluent-menu {
2
+ font-size: 14px;
3
+ //overflow: hidden;
4
+
5
+ .tabs-holder {
6
+ list-style: none;
7
+ position: relative;
8
+ margin: 0;
9
+ padding: 0;
10
+ display: block;
11
+ z-index: 2;
12
+ .clearfix;
13
+
14
+ li {
15
+ display: block;
16
+ float: left;
17
+ margin-right: 5px;
18
+ background-color: #ffffff;
19
+
20
+ a {
21
+ display: block;
22
+ float: left;
23
+ padding: 4px 15px;
24
+ text-transform: uppercase;
25
+ font-size: .8em;
26
+ color: @fmTabRestColor;
27
+
28
+ &:hover {
29
+ color: @fmTabActiveColor;
30
+ }
31
+ }
32
+
33
+ &:first-child {
34
+ margin-left: 0px;
35
+ }
36
+
37
+ &.active {
38
+ border: 1px @fmBorderColor solid;
39
+ border-bottom-color: @white;
40
+ a {
41
+ color: @fmTabActiveColor;
42
+ }
43
+ }
44
+ &.special {
45
+ border: 1px @fmTabActiveColor solid;
46
+ background-color: @fmTabActiveColor;
47
+ a {
48
+ color: @white;
49
+ &:hover {
50
+ color: @white;
51
+ }
52
+ }
53
+ }
54
+ }
55
+ }
56
+
57
+ .tabs-content {
58
+ z-index: 1;
59
+ position: relative;
60
+ margin-top: -1px;
61
+ border: 1px @fmBorderColor solid;
62
+ background-color: #ffffff;
63
+ height: 120px;
64
+ //overflow: hidden;
65
+
66
+ .tab-panel {
67
+ display: block;
68
+ height: 100%;
69
+ padding: 5px 0 2px;
70
+
71
+
72
+ .tab-panel-group {
73
+ height: 100%;
74
+ position: relative;
75
+ display: block;
76
+ float: left;
77
+ padding: 0 5px;
78
+ //margin-right: 5px;
79
+ //background-color: #ccc;
80
+ border-right: 1px @fmBorderColor solid;
81
+
82
+ &:last-child {
83
+ margin-right: 0;
84
+ //border-right: 0;
85
+ }
86
+ }
87
+
88
+ .tab-group-caption {
89
+ font-size: 10px;
90
+ margin: 2px 0;
91
+ text-align: center;
92
+ display: block;
93
+ position: absolute;
94
+ bottom: 0px;
95
+ right: 0;
96
+ left: 0;
97
+ white-space: nowrap;
98
+ }
99
+
100
+ .tab-group-content {
101
+
102
+ }
103
+
104
+ .tab-content-segment {
105
+ display: block;
106
+ float: left;
107
+ position: relative;
108
+ }
109
+
110
+ .tab-content-composit {
111
+
112
+ }
113
+ }
114
+ }
115
+ }
116
+
117
+ // Buttons
118
+
119
+ .fluent-menu {
120
+ .fluent-button {
121
+ background-color: @white;
122
+ padding: 5px 5px;
123
+ font-size: 14px;
124
+ line-height: 14px;
125
+ display: block;
126
+ cursor: default;
127
+ &:hover {
128
+ background-color: @fmElementHoverBackground;
129
+ }
130
+ img {
131
+ display: block;
132
+ float: left;
133
+ margin-right: 5px;
134
+ width: 16px;
135
+ height: 16px;
136
+ }
137
+ [class*="icon-"] {
138
+ color: @fmTabRestColor;
139
+ }
140
+
141
+ .button-label {
142
+ //padding: 0 5px;
143
+ display: inline-block;
144
+ color: inherit;
145
+ font: inherit;
146
+ }
147
+
148
+ &:active {
149
+ top: 0;
150
+ left: 0;
151
+ background-color: darken(@fmElementHoverBackground, 20%) !important;
152
+ }
153
+ }
154
+
155
+ .fluent-big-button {
156
+ .fluent-button;
157
+
158
+ padding: 7px 5px;
159
+ text-align: center;
160
+ white-space: normal;
161
+ line-height: 12px;
162
+ float: left;
163
+ position: relative;
164
+
165
+ img, [class*="icon-"] {
166
+ display: block;
167
+ width: 40px;
168
+ height: 40px;
169
+ font-size: 40px;
170
+ float: none;
171
+ text-align: center;
172
+ margin: 5px auto 5px;
173
+ }
174
+
175
+ br {
176
+ line-height: 4px;
177
+ height: 4px;
178
+ font-size: 4px;
179
+ }
180
+
181
+ }
182
+
183
+ .fluent-tool-button {
184
+ .fluent-button;
185
+ padding: 4px;
186
+ img, [class*="icon-"] {
187
+ display: block;
188
+ width: 16px;
189
+ height: 16px;
190
+ font-size: 16px;
191
+ float: none;
192
+ text-align: center;
193
+ }
194
+ img {
195
+ margin-right: 0;
196
+ }
197
+ }
198
+
199
+ .dropdown-toggle {
200
+ &:before, &:after {
201
+ content: "";
202
+ }
203
+ .button-label {
204
+ padding-right: 5px;
205
+ &:before, &:after {
206
+ content: "";
207
+ }
208
+ &:after {
209
+ content: "\e012";
210
+ font-family: @sysIconFontName;
211
+ position: absolute;
212
+ right: 0px;
213
+ bottom: 3px;
214
+ font-size: .8em;
215
+ }
216
+ }
217
+ }
218
+
219
+ .dropdown-menu {
220
+ position: absolute;
221
+ top: 100%;
222
+ z-index: 100;
223
+ a {
224
+ font-size: 10pt !important;
225
+ &:hover {
226
+ background-color: @fmElementHoverBackground;
227
+ color: @fmTabRestColor;
228
+ }
229
+ }
230
+ }
231
+ }
@@ -0,0 +1,414 @@
1
+ form {
2
+ margin: 0 0 14pt;
3
+ }
4
+
5
+ fieldset {
6
+ margin: 0;
7
+ padding: 0;
8
+ border: 0;
9
+ }
10
+
11
+ legend {
12
+ display: block;
13
+ width: 100%;
14
+ padding: 0;
15
+ margin-bottom: @baseLineHeight;
16
+ font-size: @baseFontSize * 1.5;
17
+ line-height: @baseLineHeight * 2;
18
+ color: @grayDark;
19
+ border: 0;
20
+ border-bottom: 1px solid #e5e5e5;
21
+
22
+ // Small
23
+ small {
24
+ font-size: @baseLineHeight * .75;
25
+ color: @grayLight;
26
+ }
27
+ }
28
+
29
+ label {
30
+ display: block;
31
+ margin: 5px 0;
32
+ }
33
+
34
+ .input-control {
35
+ //display: block;
36
+ //margin-bottom: @baseLineHeight / 2;
37
+ }
38
+
39
+ .input-control {
40
+ &.checkbox, &.radio, &.switch, &.text, &.password, &.select, &.textarea {
41
+ display: inline-block;
42
+ cursor: pointer;
43
+ position: relative;
44
+ margin-bottom: 7pt;
45
+ }
46
+ }
47
+
48
+ .input-control {
49
+ &.checkbox, &.radio {
50
+ input[type="checkbox"], input[type="radio"] {
51
+ position: absolute;
52
+ opacity: 0;
53
+ width: 1px;
54
+ height: 1px;
55
+ }
56
+
57
+
58
+ input[type="checkbox"]:focus ~ .check, input[type="radio"]:focus ~ .check {
59
+ outline: 1px @grayLight dotted !important;
60
+ }
61
+
62
+ .caption {
63
+ margin: 0 5px;
64
+ }
65
+
66
+ .check {
67
+ .square(20px);
68
+ background-color: @white;
69
+ border: 2px @inputRestState solid;
70
+ padding: 0;
71
+ margin: 0 5px 0 0;
72
+ position: relative;
73
+ display: inline-block;
74
+ vertical-align: middle;
75
+ }
76
+
77
+ &.text-left {
78
+ .check {
79
+ margin: 0 0 0 5px;
80
+ }
81
+ }
82
+
83
+ &:hover {
84
+ .check {
85
+ border-color: @inputHoverState;
86
+ }
87
+ }
88
+
89
+ .check:active {
90
+ border-color: @inputActiveState;
91
+ }
92
+ .check:focus {
93
+ border-color: @inputFocusState;
94
+ }
95
+
96
+ .check:after {
97
+ position: absolute;
98
+ font-family: @sysIconFontName;
99
+ font-size: 9pt;
100
+ line-height: 9pt;
101
+ }
102
+
103
+ input[type="checkbox"]:checked ~ .check:after, input[type="radio"]:checked ~ .check:after {
104
+ content: "\e003";
105
+ margin: 2px;
106
+ top: 0;
107
+ color: @dark;
108
+ }
109
+
110
+ input[type="checkbox"]:disabled ~ .check, input[type="radio"]:disabled ~ .check {
111
+ border-color: @inputRestState;
112
+ background-color: @inputDisabledBgState;
113
+
114
+ &:after {
115
+ color: @inputDisabledState;
116
+ }
117
+ }
118
+
119
+ input[data-show="intermediate"] ~ .check, input[data-show="intermediate"]:checked ~ .check {
120
+ &:after {
121
+ display: block;
122
+ content: "" !important;
123
+ .square(10px);
124
+ background-color: @dark;
125
+ margin: 3px;
126
+ }
127
+ }
128
+
129
+ input[data-show="intermediate"]:disabled ~ .check {
130
+ &:after {
131
+ background-color: @inputDisabledState;
132
+ }
133
+ }
134
+ }
135
+
136
+ &.radio {
137
+ .check {
138
+ border-radius: 50%;
139
+ }
140
+ &.default-style {
141
+ input[type="radio"]:checked ~ .check:after {
142
+ display: block;
143
+ content: "" !important;
144
+ .square(10px);
145
+ border-radius: 50%;
146
+ background-color: @dark;
147
+ margin: 3px;
148
+ }
149
+
150
+ input[type="radio"]:checked:disabled ~ .check:after {
151
+ background-color: @inputDisabledState;
152
+ }
153
+ }
154
+ }
155
+ }
156
+
157
+ .input-control {
158
+ &.switch {
159
+ input[type="checkbox"] {
160
+ position: absolute;
161
+ opacity: 0;
162
+ width: 1px;
163
+ height: 1px;
164
+ }
165
+
166
+ .caption {
167
+ margin: 0 5px;
168
+ }
169
+
170
+ .check {
171
+ //background-color: transparent;
172
+ position: relative;
173
+ .size(18px, 45px);
174
+ outline: 2px #a6a6a6 solid;
175
+ border: 1px #fff solid;
176
+ cursor: pointer;
177
+ background: #A6A6A6;
178
+ z-index: 1;
179
+ display: inline-block;
180
+ vertical-align: middle;
181
+ }
182
+
183
+ .check:after {
184
+ position: absolute;
185
+ left: -1px;
186
+ top: -1px;
187
+ display: block;
188
+ content: "";
189
+ .size(16px, 9px);
190
+ outline: 2px #333 solid;
191
+ border: 1px #333 solid;
192
+ cursor: pointer;
193
+ background: #333;
194
+ z-index: 2;
195
+ //transition: left 0.3s ease, right 0.3s ease;
196
+ }
197
+
198
+ input[type="checkbox"]:focus ~ .check, input[type="radio"]:focus ~ .check {
199
+ outline: 1px @grayLight dotted !important;
200
+ }
201
+
202
+ input[type="checkbox"]:checked ~ .check {
203
+ background: #008287;
204
+ &:after {
205
+ left: auto;
206
+ right: -1px;
207
+ }
208
+ }
209
+
210
+ input[type="checkbox"]:disabled ~ .check {
211
+ background-color: @inputDisabledBgState;
212
+ border-color: @white;
213
+ &:after {
214
+ background-color: @inputDisabledState;
215
+ outline-color: @inputDisabledState;
216
+ border-color: @inputDisabledState;
217
+ }
218
+ }
219
+ }
220
+ }
221
+
222
+ .input-control {
223
+ &.text, &.password, &.file, &.email, &.tel, &.number {
224
+ display: inline-block;
225
+ cursor: pointer;
226
+ position: relative;
227
+ background-color: #fff;
228
+ outline: 0;
229
+ height: 34px;
230
+ width: 100%;
231
+
232
+ .btn-clear, .btn-reveal, .btn-date, .btn-file, .btn-search {
233
+ background-color: #F0F0F0;
234
+ position: absolute;
235
+ top: 5px;
236
+ z-index: 2;
237
+ border: 0;
238
+ right: 4px;
239
+ .square(24px);
240
+ min-height: 1px;
241
+ min-width: 1px;
242
+ padding: 0;
243
+ margin: 0;
244
+ display: none;
245
+ &:after {
246
+ font-family: @sysIconFontName;
247
+ font-size: 1em;
248
+ }
249
+ &:not(:disabled):active {
250
+ background-color: @dark;
251
+ color: @white;
252
+ }
253
+ &:active {
254
+ left: auto;
255
+ }
256
+
257
+ &:focus {
258
+ outline: 1px #ccc dotted ;
259
+ }
260
+ }
261
+
262
+ input:focus ~ .btn-clear, input:focus ~ .btn-reveal {
263
+ display: block;
264
+ }
265
+
266
+ input:not(:focus) ~ .btn-clear:active, input:not(:focus) ~ .btn-reveal:active {
267
+ display: block;
268
+ }
269
+
270
+ .btn-clear:after {content: "\e00d";}
271
+ .btn-reveal:after {content: "\e007";}
272
+ .btn-search:after {content: "\e00e";}
273
+ .btn-date:after {content: "\e013";}
274
+ .btn-file:after {content: "\e008";}
275
+ .btn-search {display: block;}
276
+ .btn-date {display: block;}
277
+ .btn-file {display: block;}
278
+
279
+ [class*="btn-"] {
280
+ background-color: transparent;
281
+ }
282
+
283
+ input::-ms-reveal, input::-ms-clear {
284
+ display: none;
285
+ }
286
+
287
+ input {
288
+ border: 1px @inputRestState solid;
289
+ width: 100%;
290
+ height: 100%;
291
+ padding: 5px;
292
+ z-index: 1;
293
+ -webkit-appearance: none;
294
+ //padding-right: 30px;
295
+ &:focus {
296
+ outline: 0;
297
+ border-color: @inputFocusState;
298
+ }
299
+ &:disabled {
300
+ padding-right: 5px;
301
+ }
302
+ }
303
+
304
+ input:disabled ~ .btn-clear, input:disabled ~ .btn-reveal {
305
+ display: none;
306
+ }
307
+
308
+ input::-moz-placeholder {color: @placeHolderText;}
309
+ input::-webkit-input-placeholder {color: @placeHolderText;}
310
+ }
311
+ }
312
+
313
+ .input-control {
314
+ &.select, &.textarea {
315
+ display: inline-block;
316
+ cursor: pointer;
317
+ position: relative;
318
+ width: 100%;
319
+ select, textarea {
320
+ border: 1px @inputRestState solid;
321
+ width: 100%;
322
+ padding: 5px;
323
+ &:focus {
324
+ outline: 0;
325
+ border-color: @inputFocusState;
326
+ }
327
+ &:disabled {
328
+ padding-right: 5px;
329
+ }
330
+ }
331
+
332
+ textarea {
333
+ min-height: 100px;
334
+ }
335
+ }
336
+ }
337
+
338
+ .input-control {
339
+ &.text, &.password, &.select, &.textarea, &.file, &.email, &.tel, &.number {
340
+ &.warning-state {
341
+ input, select, textarea {
342
+ border-color: @orange;
343
+ }
344
+ }
345
+ &.error-state {
346
+ input, select, textarea {
347
+ border-color: @red;
348
+ }
349
+ }
350
+ &.info-state {
351
+ input, select, textarea {
352
+ border-color: @lightBlue;
353
+ }
354
+ }
355
+ &.success-state {
356
+ input, select, textarea {
357
+ border-color: @green;
358
+ }
359
+ }
360
+
361
+ input[data-state="warning"] {
362
+ border-color: @orange;
363
+ }
364
+ input[data-state="error"] {
365
+ border-color: @red;
366
+ }
367
+ input[data-state="info"] {
368
+ border-color: @lightBlue;
369
+ }
370
+ input[data-state="success"] {
371
+ border-color: @green;
372
+ }
373
+ }
374
+ }
375
+
376
+ .input-control {
377
+ &.text, &.password {
378
+ //input:invalid {border-color: @red;}
379
+ }
380
+ }
381
+
382
+ .input-control {
383
+ &.text, &.password, &.select, &.textarea, &.file, &.email, &.tel, &.number {
384
+ &[class*="span"] {
385
+ margin-left: 0;
386
+ }
387
+ &.block {
388
+ }
389
+ }
390
+ }
391
+
392
+ .input-control {
393
+ &.file {
394
+ overflow: hidden;
395
+ input[type="file"] {
396
+ position: absolute;
397
+ opacity: 0;
398
+ width: 1px;
399
+ height: 1px;
400
+ bottom: 0;
401
+ right: 0;
402
+ }
403
+ }
404
+ }
405
+
406
+ input[type="button"], input[type="submit"], input[type="reset"] {
407
+ .button;
408
+ }
409
+
410
+ input[type=number]::-webkit-inner-spin-button,
411
+ input[type=number]::-webkit-outer-spin-button {
412
+ -webkit-appearance: none;
413
+ margin: 0;
414
+ }