semantic-ui-sass 0.19.3.1 → 1.7.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (107) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +21 -0
  3. data/README.md +5 -6
  4. data/app/assets/fonts/semantic-ui/icons.eot +0 -0
  5. data/app/assets/fonts/semantic-ui/icons.otf +0 -0
  6. data/app/assets/fonts/semantic-ui/icons.svg +472 -367
  7. data/app/assets/fonts/semantic-ui/icons.ttf +0 -0
  8. data/app/assets/fonts/semantic-ui/icons.woff +0 -0
  9. data/app/assets/images/semantic-ui/flags.png +0 -0
  10. data/app/assets/javascripts/semantic-ui.js +9 -5
  11. data/app/assets/javascripts/semantic-ui/accordion.js +169 -102
  12. data/app/assets/javascripts/semantic-ui/api.js +840 -0
  13. data/app/assets/javascripts/semantic-ui/checkbox.js +203 -46
  14. data/app/assets/javascripts/semantic-ui/{behavior/colorize.js → colorize.js} +4 -2
  15. data/app/assets/javascripts/semantic-ui/dimmer.js +110 -76
  16. data/app/assets/javascripts/semantic-ui/dropdown.js +897 -285
  17. data/app/assets/javascripts/semantic-ui/{behavior/form.js → form.js} +127 -42
  18. data/app/assets/javascripts/semantic-ui/modal.js +294 -219
  19. data/app/assets/javascripts/semantic-ui/nag.js +120 -186
  20. data/app/assets/javascripts/semantic-ui/popup.js +491 -223
  21. data/app/assets/javascripts/semantic-ui/progress.js +779 -0
  22. data/app/assets/javascripts/semantic-ui/rating.js +66 -22
  23. data/app/assets/javascripts/semantic-ui/search.js +219 -99
  24. data/app/assets/javascripts/semantic-ui/shape.js +72 -29
  25. data/app/assets/javascripts/semantic-ui/sidebar.js +678 -142
  26. data/app/assets/javascripts/semantic-ui/site.js +487 -0
  27. data/app/assets/javascripts/semantic-ui/{behavior/state.js → state.js} +116 -151
  28. data/app/assets/javascripts/semantic-ui/sticky.js +771 -0
  29. data/app/assets/javascripts/semantic-ui/tab.js +680 -603
  30. data/app/assets/javascripts/semantic-ui/transition.js +269 -158
  31. data/app/assets/javascripts/semantic-ui/video.js +113 -32
  32. data/app/assets/javascripts/semantic-ui/visibility.js +970 -0
  33. data/app/assets/javascripts/semantic-ui/visit.js +513 -0
  34. data/app/assets/stylesheets/semantic-ui.scss +2 -0
  35. data/app/assets/stylesheets/semantic-ui/collections/_breadcrumb.scss +58 -14
  36. data/app/assets/stylesheets/semantic-ui/collections/_form.scss +464 -372
  37. data/app/assets/stylesheets/semantic-ui/collections/_grid.scss +1385 -533
  38. data/app/assets/stylesheets/semantic-ui/collections/_menu.scss +482 -655
  39. data/app/assets/stylesheets/semantic-ui/collections/_message.scss +238 -139
  40. data/app/assets/stylesheets/semantic-ui/collections/_table.scss +631 -280
  41. data/app/assets/stylesheets/semantic-ui/elements/_all.scss +3 -2
  42. data/app/assets/stylesheets/semantic-ui/elements/_button.scss +1614 -657
  43. data/app/assets/stylesheets/semantic-ui/elements/_divider.scss +143 -80
  44. data/app/assets/stylesheets/semantic-ui/elements/_flag.scss +1018 -0
  45. data/app/assets/stylesheets/semantic-ui/elements/_header.scss +302 -145
  46. data/app/assets/stylesheets/semantic-ui/elements/_icon.scss +1653 -1365
  47. data/app/assets/stylesheets/semantic-ui/elements/_image.scss +160 -59
  48. data/app/assets/stylesheets/semantic-ui/elements/_input.scss +247 -118
  49. data/app/assets/stylesheets/semantic-ui/elements/_label.scss +501 -470
  50. data/app/assets/stylesheets/semantic-ui/elements/_list.scss +888 -0
  51. data/app/assets/stylesheets/semantic-ui/elements/_loader.scss +189 -98
  52. data/app/assets/stylesheets/semantic-ui/elements/_rail.scss +125 -0
  53. data/app/assets/stylesheets/semantic-ui/elements/_reveal.scss +147 -212
  54. data/app/assets/stylesheets/semantic-ui/elements/_segment.scss +328 -190
  55. data/app/assets/stylesheets/semantic-ui/elements/_step.scss +261 -185
  56. data/app/assets/stylesheets/semantic-ui/globals/_all.scss +2 -0
  57. data/app/assets/stylesheets/semantic-ui/globals/_reset.scss +430 -0
  58. data/app/assets/stylesheets/semantic-ui/globals/_site.scss +128 -0
  59. data/app/assets/stylesheets/semantic-ui/modules/_accordion.scss +190 -106
  60. data/app/assets/stylesheets/semantic-ui/modules/_all.scss +2 -1
  61. data/app/assets/stylesheets/semantic-ui/modules/_checkbox.scss +303 -201
  62. data/app/assets/stylesheets/semantic-ui/modules/_dimmer.scss +72 -63
  63. data/app/assets/stylesheets/semantic-ui/modules/_dropdown.scss +711 -331
  64. data/app/assets/stylesheets/semantic-ui/modules/_modal.scss +262 -140
  65. data/app/assets/stylesheets/semantic-ui/modules/_nag.scss +82 -71
  66. data/app/assets/stylesheets/semantic-ui/modules/_popup.scss +163 -119
  67. data/app/assets/stylesheets/semantic-ui/modules/_progress.scss +435 -0
  68. data/app/assets/stylesheets/semantic-ui/modules/_rating.scss +163 -68
  69. data/app/assets/stylesheets/semantic-ui/modules/_search.scss +223 -150
  70. data/app/assets/stylesheets/semantic-ui/modules/_shape.scss +39 -40
  71. data/app/assets/stylesheets/semantic-ui/modules/_sidebar.scss +413 -147
  72. data/app/assets/stylesheets/semantic-ui/modules/_sticky.scss +80 -0
  73. data/app/assets/stylesheets/semantic-ui/modules/_tab.scss +49 -20
  74. data/app/assets/stylesheets/semantic-ui/modules/_transition.scss +542 -568
  75. data/app/assets/stylesheets/semantic-ui/modules/_video.scss +69 -37
  76. data/app/assets/stylesheets/semantic-ui/views/_ad.scss +265 -0
  77. data/app/assets/stylesheets/semantic-ui/views/_all.scss +1 -1
  78. data/app/assets/stylesheets/semantic-ui/views/_card.scss +758 -0
  79. data/app/assets/stylesheets/semantic-ui/views/_comment.scss +133 -92
  80. data/app/assets/stylesheets/semantic-ui/views/_feed.scss +200 -87
  81. data/app/assets/stylesheets/semantic-ui/views/_item.scss +298 -523
  82. data/app/assets/stylesheets/semantic-ui/views/_statistic.scss +390 -12
  83. data/lib/semantic/ui/sass/version.rb +2 -2
  84. data/tasks/converter.rb +99 -216
  85. metadata +22 -27
  86. data/app/assets/fonts/semantic-ui/basic.icons.eot +0 -0
  87. data/app/assets/fonts/semantic-ui/basic.icons.svg +0 -450
  88. data/app/assets/fonts/semantic-ui/basic.icons.ttf +0 -0
  89. data/app/assets/fonts/semantic-ui/basic.icons.woff +0 -0
  90. data/app/assets/images/semantic-ui/loader-large-inverted.gif +0 -0
  91. data/app/assets/images/semantic-ui/loader-large.gif +0 -0
  92. data/app/assets/images/semantic-ui/loader-medium-inverted.gif +0 -0
  93. data/app/assets/images/semantic-ui/loader-medium.gif +0 -0
  94. data/app/assets/images/semantic-ui/loader-mini-inverted.gif +0 -0
  95. data/app/assets/images/semantic-ui/loader-mini.gif +0 -0
  96. data/app/assets/images/semantic-ui/loader-small-inverted.gif +0 -0
  97. data/app/assets/images/semantic-ui/loader-small.gif +0 -0
  98. data/app/assets/javascripts/semantic-ui/behavior/api.js +0 -634
  99. data/app/assets/javascripts/semantic-ui/chatroom.js +0 -772
  100. data/app/assets/stylesheets/semantic-ui/depends/_basic.icon.scss +0 -4
  101. data/app/assets/stylesheets/semantic-ui/depends/_icon.scss +0 -4
  102. data/app/assets/stylesheets/semantic-ui/depends/_loader.scss +0 -8
  103. data/app/assets/stylesheets/semantic-ui/elements/_basic.icon.scss +0 -1124
  104. data/app/assets/stylesheets/semantic-ui/elements/_progress.scss +0 -280
  105. data/app/assets/stylesheets/semantic-ui/modules/_chatroom.scss +0 -299
  106. data/app/assets/stylesheets/semantic-ui/modules/_reveal.scss +0 -322
  107. data/app/assets/stylesheets/semantic-ui/views/_list.scss +0 -700
@@ -1,7 +1,7 @@
1
- /*
2
- * # Semantic - Dimmer
3
- * http://github.com/jlukic/semantic-ui/
4
- *
1
+ /*
2
+ * # Semantic UI
3
+ * https://github.com/Semantic-Org/Semantic-UI
4
+ * http://www.semantic-ui.com/
5
5
  *
6
6
  * Copyright 2014 Contributors
7
7
  * Released under the MIT license
@@ -9,118 +9,118 @@
9
9
  *
10
10
  */
11
11
 
12
+
13
+
12
14
  /*******************************
13
15
  Dimmer
14
16
  *******************************/
15
17
 
16
- .ui.dimmable {
18
+ .dimmable {
17
19
  position: relative;
18
20
  }
19
-
20
21
  .ui.dimmer {
21
22
  display: none;
22
23
  position: absolute;
23
24
  top: 0em !important;
24
25
  left: 0em !important;
25
- width: 0%;
26
- height: 0%;
26
+ width: 100%;
27
+ height: 100%;
27
28
  text-align: center;
28
29
  vertical-align: middle;
29
- background-color: rgba(0, 0, 0, 0.85);
30
+ background: rgba(0, 0, 0, 0.85);
30
31
  opacity: 0;
31
32
  line-height: 1;
32
33
  -webkit-animation-fill-mode: both;
33
- animation-fill-mode: both;
34
+ animation-fill-mode: both;
34
35
  -webkit-animation-duration: 0.5s;
35
- animation-duration: 0.5s;
36
+ animation-duration: 0.5s;
36
37
  -webkit-transition: background-color 0.5s linear;
37
- transition: background-color 0.5s linear;
38
+ transition: background-color 0.5s linear;
38
39
  -webkit-user-select: none;
39
- -moz-user-select: none;
40
- -ms-user-select: none;
41
- user-select: none;
42
- -webkit-box-sizing: border-box;
43
- -moz-box-sizing: border-box;
44
- box-sizing: border-box;
40
+ -moz-user-select: none;
41
+ -ms-user-select: none;
42
+ user-select: none;
43
+ will-change: opacity;
45
44
  z-index: 1000;
46
45
  }
47
46
 
48
47
  /* Dimmer Content */
49
-
50
48
  .ui.dimmer > .content {
51
49
  width: 100%;
52
50
  height: 100%;
53
51
  display: table;
54
52
  -webkit-user-select: text;
55
- -moz-user-select: text;
56
- -ms-user-select: text;
57
- user-select: text;
53
+ -moz-user-select: text;
54
+ -ms-user-select: text;
55
+ user-select: text;
58
56
  }
59
-
60
57
  .ui.dimmer > .content > div {
61
58
  display: table-cell;
62
59
  vertical-align: middle;
63
- color: #FFFFFF;
60
+ color: #ffffff;
64
61
  }
65
62
 
66
63
  /* Loose Coupling */
67
-
68
64
  .ui.segment > .ui.dimmer {
69
- border-radius: 5px;
65
+ border-radius: inherit !important;
70
66
  }
71
67
 
72
- .ui.horizontal.segment > .ui.dimmer,
73
- .ui.vertical.segment > .ui.dimmer {
74
- border-radius: 5px;
75
- }
76
68
 
77
69
  /*******************************
78
70
  States
79
71
  *******************************/
80
72
 
81
- .ui.dimmed.dimmable:not(body) {
73
+ .animating.dimmable:not(body),
74
+ .dimmed.dimmable:not(body) {
82
75
  overflow: hidden;
83
76
  }
84
-
85
- .ui.dimmed.dimmable > .ui.animating.dimmer,
86
- .ui.dimmed.dimmable > .ui.visible.dimmer,
77
+ .dimmed.dimmable > .ui.animating.dimmer,
78
+ .dimmed.dimmable > .ui.visible.dimmer,
87
79
  .ui.active.dimmer {
88
80
  display: block;
89
- width: 100%;
90
- height: 100%;
91
81
  opacity: 1;
92
82
  }
93
-
94
83
  .ui.disabled.dimmer {
95
- width: 0em !important;
96
- height: 0em !important;
84
+ width: 0 !important;
85
+ height: 0 !important;
97
86
  }
98
87
 
88
+
99
89
  /*******************************
100
90
  Variations
101
91
  *******************************/
102
92
 
93
+
103
94
  /*--------------
104
95
  Page
105
96
  ---------------*/
106
97
 
107
98
  .ui.page.dimmer {
108
99
  position: fixed;
109
- -webkit-transform-style: preserve-3d;
110
- -ms-transform-style: preserve-3d;
111
- transform-style: preserve-3d;
100
+ -webkit-transform-style: '';
101
+ transform-style: '';
112
102
  -webkit-perspective: 2000px;
113
- -ms-perspective: 2000px;
114
- perspective: 2000px;
103
+ perspective: 2000px;
115
104
  -webkit-transform-origin: center center;
116
- -ms-transform-origin: center center;
117
- transform-origin: center center;
105
+ -ms-transform-origin: center center;
106
+ transform-origin: center center;
118
107
  }
119
-
120
- .ui.scrolling.dimmable > .dimmer,
121
- .ui.scrolling.page.dimmer {
122
- position: absolute;
108
+ body.animating.in.dimmable,
109
+ body.dimmed.dimmable {
110
+ overflow: hidden;
123
111
  }
112
+ body.dimmable > .dimmer {
113
+ position: fixed;
114
+ }
115
+ /*
116
+ body.dimmable > :not(.dimmer) {
117
+ filter: @elementStartFilter;
118
+ }
119
+ body.dimmed.dimmable > :not(.dimmer) {
120
+ filter: @elementEndFilter;
121
+ transition: @elementTransition;
122
+ }
123
+ */
124
124
 
125
125
  /*--------------
126
126
  Aligned
@@ -129,7 +129,6 @@
129
129
  .ui.dimmer > .top.aligned.content > * {
130
130
  vertical-align: top;
131
131
  }
132
-
133
132
  .ui.dimmer > .bottom.aligned.content > * {
134
133
  vertical-align: bottom;
135
134
  }
@@ -139,40 +138,50 @@
139
138
  ---------------*/
140
139
 
141
140
  .ui.inverted.dimmer {
142
- background-color: rgba(255, 255, 255, 0.85);
141
+ background: rgba(255, 255, 255, 0.85);
143
142
  }
144
-
145
143
  .ui.inverted.dimmer > .content > * {
146
- color: rgba(0, 0, 0, 0.8);
144
+ color: #ffffff;
147
145
  }
148
146
 
149
147
  /*--------------
150
148
  Simple
151
149
  ---------------*/
152
150
 
153
- /* Displays without javascript */
154
151
 
152
+ /* Displays without javascript */
155
153
  .ui.simple.dimmer {
156
154
  display: block;
157
155
  overflow: hidden;
158
156
  opacity: 1;
157
+ width: 0%;
158
+ height: 0%;
159
159
  z-index: -100;
160
160
  background-color: rgba(0, 0, 0, 0);
161
161
  }
162
-
163
- .ui.dimmed.dimmable > .ui.simple.dimmer {
162
+ .dimmed.dimmable > .ui.simple.dimmer {
164
163
  overflow: visible;
165
164
  opacity: 1;
166
165
  width: 100%;
167
166
  height: 100%;
168
- background-color: rgba(0, 0, 0, 0.85);
167
+ background: rgba(0, 0, 0, 0.85);
169
168
  z-index: 1;
170
169
  }
171
-
172
170
  .ui.simple.inverted.dimmer {
173
- background-color: rgba(255, 255, 255, 0);
171
+ background: rgba(255, 255, 255, 0);
172
+ }
173
+ .dimmed.dimmable > .ui.simple.inverted.dimmer {
174
+ background: rgba(255, 255, 255, 0.85);
174
175
  }
175
176
 
176
- .ui.dimmed.dimmable > .ui.simple.inverted.dimmer {
177
- background-color: rgba(255, 255, 255, 0.85);
178
- }
177
+
178
+ /*******************************
179
+ Theme Overrides
180
+ *******************************/
181
+
182
+
183
+
184
+ /*******************************
185
+ User Overrides
186
+ *******************************/
187
+
@@ -1,7 +1,7 @@
1
- /*
2
- * # Semantic - Dropdown
3
- * http://github.com/jlukic/semantic-ui/
4
- *
1
+ /*
2
+ * # Semantic UI
3
+ * https://github.com/Semantic-Org/Semantic-UI
4
+ * http://www.semantic-ui.com/
5
5
  *
6
6
  * Copyright 2014 Contributors
7
7
  * Released under the MIT license
@@ -9,6 +9,8 @@
9
9
  *
10
10
  */
11
11
 
12
+
13
+
12
14
  /*******************************
13
15
  Dropdown
14
16
  *******************************/
@@ -17,64 +19,68 @@
17
19
  cursor: pointer;
18
20
  position: relative;
19
21
  display: inline-block;
20
- line-height: 1;
21
- -webkit-transition: border-radius 0.1s ease,
22
- width 0.2s ease;
23
- transition: border-radius 0.1s ease,
24
- width 0.2s ease;
25
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
26
- -moz-tap-highlight-color: rgba(0, 0, 0, 0);
22
+ line-height: 1em;
27
23
  tap-highlight-color: rgba(0, 0, 0, 0);
24
+ outline: none;
25
+ text-align: left;
26
+ -webkit-transition: border-radius 0.1s ease, width 0.2s ease;
27
+ transition: border-radius 0.1s ease, width 0.2s ease;
28
28
  }
29
29
 
30
+
30
31
  /*******************************
31
32
  Content
32
33
  *******************************/
33
34
 
35
+
34
36
  /*--------------
35
- Menu
37
+ Menu
36
38
  ---------------*/
37
39
 
38
40
  .ui.dropdown .menu {
39
41
  cursor: auto;
40
42
  position: absolute;
41
43
  display: none;
44
+ outline: none;
42
45
  top: 100%;
43
46
  margin: 0em;
44
- background-color: #FFFFFF;
47
+ padding: 0em 0em;
48
+ background: #ffffff;
45
49
  min-width: 100%;
46
50
  white-space: nowrap;
47
- font-size: 0.875em;
51
+ font-size: 1rem;
48
52
  text-shadow: none;
49
- -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
50
- box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
51
- border-radius: 0px 0px 0.325em 0.325em;
53
+ text-align: left;
54
+ box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.15);
55
+ border: 1px solid rgba(39, 41, 43, 0.15);
56
+ border-radius: 0em 0em 0.2857rem 0.2857rem;
52
57
  -webkit-transition: opacity 0.2s ease;
53
- transition: opacity 0.2s ease;
58
+ transition: opacity 0.2s ease;
54
59
  z-index: 11;
60
+ will-change: transform, opacity;
55
61
  }
56
62
 
57
63
  /*--------------
58
- Icon
64
+ Hidden Input
65
+ ---------------*/
66
+
67
+ .ui.dropdown > input[type="hidden"],
68
+ .ui.dropdown > select {
69
+ display: none !important;
70
+ }
71
+
72
+ /*--------------
73
+ Dropdown Icon
59
74
  ---------------*/
60
75
 
61
76
  .ui.dropdown > .dropdown.icon {
62
77
  width: auto;
63
78
  margin: 0em 0em 0em 1em;
64
79
  }
65
-
66
- .ui.dropdown > .dropdown.icon:before {
67
- content: "\f0d7";
68
- }
69
-
70
- .ui.dropdown .menu .item .dropdown.icon {
80
+ .ui.dropdown .menu > .item .dropdown.icon {
71
81
  width: auto;
72
82
  float: right;
73
- margin: 0em 0em 0em 0.5em;
74
- }
75
-
76
- .ui.dropdown .menu .item .dropdown.icon:before {
77
- content: "\f0da"/*rtl:"\f0d9"*/;
83
+ margin: 0.2em 0em 0em 0.75em;
78
84
  }
79
85
 
80
86
  /*--------------
@@ -84,13 +90,98 @@
84
90
  .ui.dropdown > .text {
85
91
  display: inline-block;
86
92
  -webkit-transition: color 0.2s ease;
87
- transition: color 0.2s ease;
93
+ transition: color 0.2s ease;
88
94
  }
89
95
 
90
- /* Flyout Direction */
96
+ /*--------------
97
+ Menu Item
98
+ ---------------*/
91
99
 
92
- .ui.dropdown .menu {
93
- left: 0px;
100
+ .ui.dropdown .menu > .item {
101
+ position: relative;
102
+ cursor: pointer;
103
+ display: block;
104
+ border: none;
105
+ height: auto;
106
+ border-top: none;
107
+ line-height: 1.2em;
108
+ color: rgba(0, 0, 0, 0.8);
109
+ padding: 0.65rem 1.25rem !important;
110
+ font-size: 1rem;
111
+ text-transform: none;
112
+ font-weight: normal;
113
+ box-shadow: none;
114
+ -webkit-touch-callout: none;
115
+ }
116
+ .ui.dropdown .menu > .item:first-child {
117
+ border-top: none;
118
+ }
119
+
120
+ /*--------------
121
+ Floated Content
122
+ ---------------*/
123
+
124
+ .ui.dropdown > .text > [class*="right floated"],
125
+ .ui.dropdown .menu .item > [class*="right floated"] {
126
+ float: right;
127
+ margin-right: 0em;
128
+ margin-left: 1em;
129
+ }
130
+ .ui.dropdown > .text > [class*="left floated"],
131
+ .ui.dropdown .menu .item > [class*="left floated"] {
132
+ float: right;
133
+ margin-left: 0em;
134
+ margin-right: 1em;
135
+ }
136
+ .ui.dropdown .menu .item > .icon.floated,
137
+ .ui.dropdown .menu .item > .flag.floated,
138
+ .ui.dropdown .menu .item > .image.floated,
139
+ .ui.dropdown .menu .item > img.floated {
140
+ margin-top: 0.2em;
141
+ }
142
+
143
+ /*--------------
144
+ Menu Divider
145
+ ---------------*/
146
+
147
+ .ui.dropdown .menu > .header {
148
+ margin: 1rem 0rem 0.75rem;
149
+ padding: 0em 1.25rem;
150
+ color: rgba(0, 0, 0, 0.85);
151
+ font-size: 0.8em;
152
+ font-weight: bold;
153
+ text-transform: uppercase;
154
+ }
155
+ .ui.dropdown .menu > .divider {
156
+ border-top: 1px solid rgba(0, 0, 0, 0.05);
157
+ height: 0em;
158
+ margin: 0.5em 0em;
159
+ }
160
+ .ui.dropdown .menu > .input {
161
+ margin: 0.75rem 1.25rem;
162
+ min-width: 200px;
163
+ }
164
+ .ui.dropdown .menu > .header + .input {
165
+ margin-top: 0em;
166
+ }
167
+ .ui.dropdown .menu > .input:not(.transparent) input {
168
+ padding: 0.5em 1em;
169
+ }
170
+ .ui.dropdown .menu > .input:not(.transparent) .button,
171
+ .ui.dropdown .menu > .input:not(.transparent) .icon,
172
+ .ui.dropdown .menu > .input:not(.transparent) .label {
173
+ padding-top: 0.5em;
174
+ padding-bottom: 0.5em;
175
+ }
176
+
177
+ /*-----------------
178
+ Item Description
179
+ -------------------*/
180
+
181
+ .ui.dropdown > .text > .description,
182
+ .ui.dropdown .menu > .item > .description {
183
+ margin: 0em 0em 0em 1em;
184
+ color: rgba(0, 0, 0, 0.4);
94
185
  }
95
186
 
96
187
  /*--------------
@@ -100,91 +191,377 @@
100
191
  .ui.dropdown .menu .menu {
101
192
  top: 0% !important;
102
193
  left: 100% !important;
103
- margin: 0em !important;
104
- border-radius: 0 0.325em 0.325em 0em !important;
194
+ right: auto !important;
195
+ margin: 0em 0em 0em -0.5em !important;
196
+ border-radius: 0em 0.2857rem 0.2857rem 0em !important;
197
+ z-index: 21 !important;
105
198
  }
106
199
 
200
+ /* Hide Arrow */
107
201
  .ui.dropdown .menu .menu:after {
108
202
  display: none;
109
203
  }
110
204
 
111
- .ui.dropdown .menu .item {
112
- cursor: pointer;
113
- border: none;
114
- border-top: 1px solid rgba(0, 0, 0, 0.05);
115
- height: auto;
116
- font-size: 0.875em;
117
- display: block;
118
- color: rgba(0, 0, 0, 0.75);
119
- padding: 0.85em 1em !important;
120
- font-size: 0.875rem;
121
- text-transform: none;
122
- font-weight: normal;
123
- text-align: left;
124
- -webkit-touch-callout: none;
125
- }
126
205
 
127
- .ui.dropdown .menu .item:before {
128
- display: none;
129
- }
206
+ /*******************************
207
+ Coupling
208
+ *******************************/
209
+
130
210
 
131
- .ui.dropdown .menu .item .icon {
211
+ /*--------------
212
+ Sub Elements
213
+ ---------------*/
214
+
215
+
216
+ /* Icons / Flags / Labels / Image */
217
+ .ui.dropdown > .text > .icon,
218
+ .ui.dropdown > .text > .label,
219
+ .ui.dropdown > .text > .flag,
220
+ .ui.dropdown > .text > img,
221
+ .ui.dropdown > .text > .image {
222
+ margin-top: 0em;
223
+ }
224
+ .ui.dropdown .menu > .item > .icon,
225
+ .ui.dropdown .menu > .item > .label,
226
+ .ui.dropdown .menu > .item > .flag,
227
+ .ui.dropdown .menu > .item > .image,
228
+ .ui.dropdown .menu > .item > img {
229
+ margin-top: 0.2em;
230
+ }
231
+ .ui.dropdown > .text > .icon,
232
+ .ui.dropdown > .text > .label,
233
+ .ui.dropdown > .text > .flag,
234
+ .ui.dropdown > .text > img,
235
+ .ui.dropdown > .text > .image,
236
+ .ui.dropdown .menu > .item > .icon,
237
+ .ui.dropdown .menu > .item > .label,
238
+ .ui.dropdown .menu > .item > .flag,
239
+ .ui.dropdown .menu > .item > .image,
240
+ .ui.dropdown .menu > .item > img {
241
+ margin-left: 0em;
132
242
  margin-right: 0.75em;
133
243
  }
134
244
 
135
- .ui.dropdown .menu .item:first-child {
136
- border-top: none;
245
+ /*--------------
246
+ Image
247
+ ---------------*/
248
+
249
+ .ui.dropdown > .text > img,
250
+ .ui.dropdown > .text > .image,
251
+ .ui.dropdown .menu > .item > .image,
252
+ .ui.dropdown .menu > .item > img {
253
+ display: inline-block;
254
+ vertical-align: middle;
255
+ width: auto;
256
+ max-height: 2.5em;
137
257
  }
138
258
 
139
- /*******************************
140
- Coupling
141
- *******************************/
259
+ /*--------------
260
+ Menu
261
+ ---------------*/
142
262
 
143
- /* Opposite on last menu on right */
144
263
 
264
+ /* Remove Menu Item Divider */
265
+ .ui.dropdown .ui.menu > .item:before,
266
+ .ui.menu .ui.dropdown .menu > .item:before {
267
+ display: none;
268
+ }
269
+
270
+ /* Prevent Menu Item Border */
271
+ .ui.menu .ui.dropdown .menu .active.item {
272
+ border-left: none;
273
+ }
274
+
275
+ /* Automatically float dropdown menu right on last menu item */
145
276
  .ui.menu .right.menu .dropdown:last-child .menu,
277
+ .ui.menu .right.dropdown.item .menu,
146
278
  .ui.buttons > .ui.dropdown:last-child .menu {
147
279
  left: auto;
148
- right: 0px;
280
+ right: 0em;
149
281
  }
150
282
 
151
- .ui.vertical.menu .dropdown.item > .dropdown.icon:before {
152
- content: "\f0da"/*rtl:"\f0d9"*/;
153
- }
283
+ /*--------------
284
+ Button
285
+ ---------------*/
154
286
 
287
+
288
+ /* No Margin On Icon Button */
155
289
  .ui.dropdown.icon.button > .dropdown.icon {
156
290
  margin: 0em;
157
291
  }
292
+ .ui.dropdown.button:not(.pointing):not(.floating).active,
293
+ .ui.dropdown.button:not(.pointing):not(.floating).visible {
294
+ border-bottom-left-radius: 0em;
295
+ border-bottom-right-radius: 0em;
296
+ }
297
+
158
298
 
159
299
  /*******************************
160
- States
300
+ Types
161
301
  *******************************/
162
302
 
163
- /* Dropdown Visible */
164
303
 
165
- .ui.visible.dropdown > .menu {
166
- display: block;
304
+ /*--------------
305
+ Selection
306
+ ---------------*/
307
+
308
+
309
+ /* Displays like a select box */
310
+ .ui.selection.dropdown {
311
+ cursor: pointer;
312
+ word-wrap: break-word;
313
+ white-space: normal;
314
+ outline: 0;
315
+ -webkit-transform: rotateZ(0deg);
316
+ transform: rotateZ(0deg);
317
+ min-width: 180px;
318
+ background: #ffffff;
319
+ display: inline-block;
320
+ padding: 0.8em 1.1em;
321
+ color: rgba(0, 0, 0, 0.8);
322
+ box-shadow: none;
323
+ border: 1px solid rgba(39, 41, 43, 0.15);
324
+ border-radius: 0.2857rem;
325
+ -webkit-transition: border-radius 0.1s ease, width 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
326
+ transition: border-radius 0.1s ease, width 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
327
+ }
328
+ .ui.selection.dropdown.visible,
329
+ .ui.selection.dropdown.active {
330
+ z-index: 10;
331
+ }
332
+ select.ui.dropdown {
333
+ height: 38px;
334
+ padding: 0em;
335
+ margin: 0em;
336
+ visibility: hidden;
337
+ }
338
+ .ui.selection.dropdown > .text {
339
+ margin-right: 2em;
340
+ }
341
+ .ui.selection.dropdown > .search.icon,
342
+ .ui.selection.dropdown > .delete.icon,
343
+ .ui.selection.dropdown > .dropdown.icon {
344
+ position: absolute;
345
+ top: auto;
346
+ margin: 0em;
347
+ width: auto;
348
+ right: 1.1em;
349
+ opacity: 0.8;
350
+ -webkit-transition: opacity 0.2s ease;
351
+ transition: opacity 0.2s ease;
167
352
  }
168
353
 
169
- /*--------------------
170
- Hover
171
- ----------------------*/
354
+ /* Compact */
355
+ .ui.compact.selection.dropdown {
356
+ min-width: 0px;
357
+ }
172
358
 
173
- /* Menu Item Hover */
359
+ /* Remove Selection */
360
+ .ui.selection.dropdown > .delete.icon {
361
+ opacity: 0.6;
362
+ }
363
+ .ui.selection.dropdown > .delete.icon:hover {
364
+ opacity: 1;
365
+ }
174
366
 
175
- .ui.dropdown .menu .item:hover {
176
- background-color: rgba(0, 0, 0, 0.02);
177
- z-index: 12;
367
+ /* Selection Menu */
368
+ .ui.selection.dropdown .menu {
369
+ overflow-x: hidden;
370
+ overflow-y: auto;
371
+ -webkit-backface-visibility: hidden;
372
+ backface-visibility: hidden;
373
+ -webkit-overflow-scrolling: touch;
374
+ border-top: none !important;
375
+ width: auto;
376
+ margin: 0px -1px;
377
+ min-width: -webkit-calc(100% + 2px);
378
+ min-width: calc(100% + 2px);
379
+ outline: none;
380
+ box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
381
+ -webkit-transition: box-shadow 0.2s ease, border 0.2s ease;
382
+ transition: box-shadow 0.2s ease, border 0.2s ease;
383
+ }
384
+ .ui.selection.dropdown .menu:after,
385
+ .ui.selection.dropdown .menu:before {
386
+ display: none;
387
+ }
388
+ @media only screen and (max-width: 767px) {
389
+ .ui.selection.dropdown .menu {
390
+ max-height: 7.7142rem;
391
+ }
392
+ }
393
+ @media only screen and (min-width: 768px) {
394
+ .ui.selection.dropdown .menu {
395
+ max-height: 10.2856rem;
396
+ }
397
+ }
398
+ @media only screen and (min-width: 992px) {
399
+ .ui.selection.dropdown .menu {
400
+ max-height: 15.4284rem;
401
+ }
402
+ }
403
+ @media only screen and (min-width: 1920px) {
404
+ .ui.selection.dropdown .menu {
405
+ max-height: 20.5712rem;
406
+ }
407
+ }
408
+
409
+ /* Menu Item */
410
+ .ui.selection.dropdown .menu > .item {
411
+ border-top: 1px solid rgba(0, 0, 0, 0.05);
412
+ padding-left: 1.1em !important;
413
+
414
+ /* Add in spacing for scroll bar */
415
+ padding-right: -webkit-calc(2.1em) !important;
416
+ padding-right: calc(2.1em) !important;
417
+ white-space: normal;
418
+ word-wrap: normal;
419
+ }
420
+
421
+ /* Hover */
422
+ .ui.selection.dropdown:hover {
423
+ border-color: rgba(39, 41, 43, 0.3);
424
+ box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05);
425
+ }
426
+
427
+ /* Visible Hover */
428
+ .ui.selection.visible.dropdown:hover {
429
+ border-color: rgba(39, 41, 43, 0.3);
430
+ box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
431
+ }
432
+ .ui.selection.visible.dropdown:hover .menu {
433
+ border: 1px solid rgba(39, 41, 43, 0.3);
434
+ box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.08);
435
+ }
436
+
437
+ /* Visible */
438
+ .ui.selection.dropdown.visible {
439
+ border-color: rgba(39, 41, 43, 0.15);
440
+ box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
441
+ }
442
+ .ui.visible.selection.dropdown > .dropdown.icon {
443
+ opacity: 1;
444
+ }
445
+
446
+ /* Active Item */
447
+ .ui.selection.active.dropdown > .text:not(.default),
448
+ .ui.selection.visible.dropdown > .text:not(.default) {
449
+ font-weight: normal;
450
+ color: rgba(0, 0, 0, 0.8);
451
+ }
452
+
453
+ /* Connecting Border */
454
+ .ui.active.selection.dropdown,
455
+ .ui.visible.selection.dropdown {
456
+ border-bottom-left-radius: 0em !important;
457
+ border-bottom-right-radius: 0em !important;
458
+ }
459
+
460
+ /*--------------
461
+ Searchable
462
+ ---------------*/
463
+
464
+
465
+ /* Search Selection */
466
+ .ui.search.dropdown {
467
+ min-width: '';
468
+ }
469
+
470
+ /* Search Dropdown */
471
+ .ui.search.dropdown > input.search {
472
+ background: none transparent;
473
+ border: none;
474
+ box-shadow: none;
475
+ cursor: pointer;
476
+ position: absolute;
477
+ border-radius: 0em !important;
478
+ top: 0em;
479
+ left: 0em;
480
+ width: 100%;
481
+ outline: none;
482
+ -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
483
+ padding: inherit;
484
+ /*Amazing trick */
485
+ }
486
+
487
+ /* Search Selection */
488
+ .ui.search.selection.dropdown > input.search {
489
+ line-height: 1.2em;
490
+ }
491
+ .ui.search.dropdown.active > input.search,
492
+ .ui.search.dropdown.visible > input.search {
493
+ cursor: auto;
494
+ }
495
+ .ui.active.search.dropdown > input.search:focus + .text {
496
+ color: rgba(0, 0, 0, 0.4) !important;
178
497
  }
179
498
 
499
+ /* Search Menu */
500
+ .ui.search.dropdown .menu {
501
+ overflow-x: hidden;
502
+ overflow-y: auto;
503
+ -webkit-backface-visibility: hidden;
504
+ backface-visibility: hidden;
505
+ -webkit-overflow-scrolling: touch;
506
+ }
507
+ @media only screen and (max-width: 767px) {
508
+ .ui.search.dropdown .menu {
509
+ max-height: 7.7142rem;
510
+ }
511
+ }
512
+ @media only screen and (min-width: 768px) {
513
+ .ui.search.dropdown .menu {
514
+ max-height: 10.2856rem;
515
+ }
516
+ }
517
+ @media only screen and (min-width: 992px) {
518
+ .ui.search.dropdown .menu {
519
+ max-height: 15.4284rem;
520
+ }
521
+ }
522
+ @media only screen and (min-width: 1920px) {
523
+ .ui.search.dropdown .menu {
524
+ max-height: 20.5712rem;
525
+ }
526
+ }
527
+
528
+ /*--------------
529
+ Inline
530
+ ---------------*/
531
+
532
+ .ui.inline.dropdown {
533
+ cursor: pointer;
534
+ display: inline-block;
535
+ color: inherit;
536
+ }
537
+ .ui.inline.dropdown .dropdown.icon {
538
+ margin: 0em 0.5em 0em 0.25em;
539
+ vertical-align: top;
540
+ }
541
+ .ui.inline.dropdown > .text {
542
+ font-weight: bold;
543
+ }
544
+ .ui.inline.dropdown .menu {
545
+ cursor: auto;
546
+ margin-top: 0.25em;
547
+ border-radius: 0.2857rem;
548
+ }
549
+
550
+
551
+ /*******************************
552
+ States
553
+ *******************************/
554
+
555
+
180
556
  /*--------------------
181
- Selected
557
+ Hover
182
558
  ----------------------*/
183
559
 
184
- /* Menu Item Selected */
185
560
 
186
- .ui.dropdown .menu .item.selected {
187
- background-color: rgba(0, 0, 0, 0.02);
561
+ /* Menu Item Hover */
562
+ .ui.dropdown .menu > .item:hover {
563
+ background: rgba(0, 0, 0, 0.05);
564
+ color: rgba(0, 0, 0, 0.8);
188
565
  z-index: 12;
189
566
  }
190
567
 
@@ -192,15 +569,12 @@
192
569
  Active
193
570
  ----------------------*/
194
571
 
195
- /* Menu Item Active */
196
572
 
573
+ /* Menu Item Active */
197
574
  .ui.dropdown .menu .active.item {
198
- box-shadow: none;
199
- background-color: rgba(0, 0, 0, 0.06) !important;
200
- border-left: none;
201
- border-color: transparent !important;
202
- -webkit-box-shadow: none;
203
- -moz-shadow: none;
575
+ background: transparent;
576
+ font-weight: bold;
577
+ color: rgba(0, 0, 0, 0.8);
204
578
  box-shadow: none;
205
579
  z-index: 12;
206
580
  }
@@ -211,14 +585,52 @@
211
585
 
212
586
  .ui.dropdown > .default.text,
213
587
  .ui.default.dropdown > .text {
214
- color: rgba(0, 0, 0, 0.5);
588
+ color: rgba(179, 179, 179, 0.7);
215
589
  }
216
-
217
590
  .ui.dropdown:hover > .default.text,
218
591
  .ui.default.dropdown:hover > .text {
592
+ color: rgba(140, 140, 140, 0.7);
593
+ }
594
+
595
+ /*--------------------
596
+ Loading
597
+ ----------------------*/
598
+
599
+ .ui.loading.dropdown > .text {
600
+ -webkit-transition: none;
601
+ transition: none;
602
+ }
603
+ .ui.dropdown > .loading.menu {
604
+ display: block;
605
+ visibility: hidden;
606
+ z-index: -1;
607
+ }
608
+
609
+ /*--------------------
610
+ Keyboard Select
611
+ ----------------------*/
612
+
613
+
614
+ /* Selected Item */
615
+ .ui.dropdown.selected,
616
+ .ui.dropdown .menu .selected.item {
617
+ background: rgba(0, 0, 0, 0.03);
219
618
  color: rgba(0, 0, 0, 0.8);
220
619
  }
221
620
 
621
+ /*--------------------
622
+ Search Filtered
623
+ ----------------------*/
624
+
625
+
626
+ /* Filtered Item */
627
+ .ui.dropdown > .filtered.text {
628
+ visibility: hidden;
629
+ }
630
+ .ui.dropdown .filtered.item {
631
+ display: none;
632
+ }
633
+
222
634
  /*--------------------
223
635
  Error
224
636
  ----------------------*/
@@ -226,75 +638,95 @@
226
638
  .ui.dropdown.error,
227
639
  .ui.dropdown.error > .text,
228
640
  .ui.dropdown.error > .default.text {
229
- color: #D95C5C !important;
641
+ color: #a94442;
230
642
  }
231
-
232
643
  .ui.selection.dropdown.error {
233
- background-color: #FFFAFA;
234
- -webkit-box-shadow: 0px 0px 0px 1px rgba(231, 190, 190, 1) !important;
235
- box-shadow: 0px 0px 0px 1px rgba(231, 190, 190, 1) !important;
644
+ background: #fff0f0;
645
+ border-color: #dbb1b1;
236
646
  }
237
-
238
647
  .ui.selection.dropdown.error:hover {
239
- -webkit-box-shadow: 0px 0px 0px 1px rgba(231, 190, 190, 1) !important;
240
- box-shadow: 0px 0px 0px 1px rgba(231, 190, 190, 1) !important;
648
+ border-color: #dbb1b1;
241
649
  }
242
-
243
650
  .ui.dropdown.error > .menu,
244
651
  .ui.dropdown.error > .menu .menu {
245
- -webkit-box-shadow: 0px 0px 1px 1px #E7BEBE !important;
246
- box-shadow: 0px 0px 1px 1px #E7BEBE !important;
652
+ border-color: #dbb1b1;
247
653
  }
248
-
249
- .ui.dropdown.error > .menu .item {
250
- color: #D95C5C !important;
654
+ .ui.dropdown.error > .menu > .item {
655
+ color: #d95c5c;
251
656
  }
252
657
 
253
658
  /* Item Hover */
254
-
255
- .ui.dropdown.error > .menu .item:hover {
256
- background-color: #FFF2F2 !important;
659
+ .ui.dropdown.error > .menu > .item:hover {
660
+ background-color: #fff2f2;
257
661
  }
258
662
 
259
663
  /* Item Active */
260
-
261
664
  .ui.dropdown.error > .menu .active.item {
262
- background-color: #FDCFCF !important;
665
+ background-color: #fdcfcf;
263
666
  }
264
667
 
668
+
265
669
  /*******************************
266
670
  Variations
267
671
  *******************************/
268
672
 
673
+
674
+ /*--------------
675
+ Direction
676
+ ---------------*/
677
+
678
+
679
+ /* Flyout Direction */
680
+ .ui.dropdown .menu {
681
+ left: 0px;
682
+ }
683
+
684
+ /* Default Side (Right) */
685
+ .ui.dropdown .right.menu > .menu,
686
+ .ui.dropdown .menu .right.menu {
687
+ left: 100% !important;
688
+ right: auto !important;
689
+ }
690
+
691
+ /* Left Flyout Menu */
692
+ .ui.dropdown > .left.menu .menu,
693
+ .ui.dropdown .menu .left.menu {
694
+ left: auto !important;
695
+ right: 100% !important;
696
+ }
697
+ .ui.dropdown .item .left.dropdown.icon,
698
+ .ui.dropdown .left.menu .item .dropdown.icon {
699
+ width: auto;
700
+ float: left;
701
+ margin: 0.2em 0.75em 0em 0em;
702
+ }
703
+
269
704
  /*--------------
270
705
  Simple
271
706
  ---------------*/
272
707
 
273
- /* Displays without javascript */
274
708
 
709
+ /* Displays without javascript */
275
710
  .ui.simple.dropdown .menu:before,
276
711
  .ui.simple.dropdown .menu:after {
277
712
  display: none;
278
713
  }
279
-
280
714
  .ui.simple.dropdown .menu {
715
+ position: absolute;
281
716
  display: block;
282
717
  overflow: hidden;
283
718
  top: -9999px !important;
284
- position: absolute;
285
719
  opacity: 0;
286
720
  width: 0;
287
721
  height: 0;
288
- -webkit-transition: opacity 0.2s ease-out;
289
- transition: opacity 0.2s ease-out;
722
+ -webkit-transition: opacity 0.2s ease;
723
+ transition: opacity 0.2s ease;
290
724
  }
291
-
292
725
  .ui.simple.active.dropdown,
293
726
  .ui.simple.dropdown:hover {
294
727
  border-bottom-left-radius: 0em !important;
295
728
  border-bottom-right-radius: 0em !important;
296
729
  }
297
-
298
730
  .ui.simple.active.dropdown > .menu,
299
731
  .ui.simple.dropdown:hover > .menu {
300
732
  overflow: visible;
@@ -303,9 +735,8 @@
303
735
  top: 100% !important;
304
736
  opacity: 1;
305
737
  }
306
-
307
- .ui.simple.dropdown > .menu .item:active > .menu,
308
- .ui.simple.dropdown:hover > .menu .item:hover > .menu {
738
+ .ui.simple.dropdown > .menu > .item:active > .menu,
739
+ .ui.simple.dropdown:hover > .menu > .item:hover > .menu {
309
740
  overflow: visible;
310
741
  width: auto;
311
742
  height: auto;
@@ -313,7 +744,6 @@
313
744
  left: 100% !important;
314
745
  opacity: 1;
315
746
  }
316
-
317
747
  .ui.simple.disabled.dropdown:hover .menu {
318
748
  display: none;
319
749
  height: 0px;
@@ -321,143 +751,9 @@
321
751
  overflow: hidden;
322
752
  }
323
753
 
324
- /*--------------
325
- Selection
326
- ---------------*/
327
-
328
- /* Displays like a select box */
329
-
330
- .ui.selection.dropdown {
331
- cursor: pointer;
332
- display: inline-block;
333
- word-wrap: break-word;
334
- white-space: normal;
335
- background-color: #FFFFFF;
336
- padding: 0.65em 1em;
337
- line-height: 1.33;
338
- color: rgba(0, 0, 0, 0.8);
339
- -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important;
340
- box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important;
341
- border-radius: 0.3125em !important;
342
- }
343
-
344
- .ui.selection.dropdown select {
345
- display: none;
346
- }
347
-
348
- .ui.selection.dropdown > .dropdown.icon {
349
- opacity: 0.7;
350
- margin: 0.2em 0em 0.2em 1.25em;
351
- -webkit-transition: opacity 0.2s ease-out;
352
- transition: opacity 0.2s ease-out;
353
- }
354
-
355
- .ui.selection.dropdown,
356
- .ui.selection.dropdown .menu {
357
- -webkit-transition: -webkit-box-shadow 0.2s ease-out;
358
- transition: box-shadow 0.2s ease-out;
359
- }
360
-
361
- .ui.selection.dropdown .menu {
362
- top: 100%;
363
- max-height: 312px;
364
- overflow-x: hidden;
365
- overflow-y: auto;
366
- -webkit-box-shadow: 0px 1px 0px 1px #E0E0E0;
367
- box-shadow: 0px 1px 0px 1px #E0E0E0;
368
- border-radius: 0px 0px 0.325em 0.325em;
369
- }
370
-
371
- .ui.selection.dropdown .menu:after,
372
- .ui.selection.dropdown .menu:before {
373
- display: none;
374
- }
375
-
376
- .ui.selection.dropdown .menu img {
377
- height: 2.5em;
378
- display: inline-block;
379
- vertical-align: middle;
380
- margin-right: 0.5em;
381
- }
382
-
383
- /*--------------------
384
- Error
385
- ----------------------*/
386
-
387
- .ui.selection.dropdown.error,
388
- .ui.selection.dropdown.error .item {
389
- background-color: #FFFAFA;
390
- color: #D95C5C;
391
- }
392
-
393
- .ui.selection.dropdown.error {
394
- -webkit-box-shadow: 0px 0px 0px 1px rgba(231, 190, 190, 1) !important;
395
- box-shadow: 0px 0px 0px 1px rgba(231, 190, 190, 1) !important;
396
- }
397
-
398
- .ui.selection.dropdown.error .menu {
399
- -webkit-box-shadow: 0px 1px 0px 1px #E7BEBE;
400
- box-shadow: 0px 1px 0px 1px #E7BEBE;
401
- border-radius: 0px 0px 0.325em 0.325em;
402
- }
403
-
404
- /* Menu Item Active */
405
-
406
- .ui.selection.dropdown.error .menu .active.item {
407
- background-color: #FDCFCF !important;
408
- }
409
-
410
- /* Hover */
411
-
412
- .ui.selection.dropdown:hover {
413
- -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) !important;
414
- box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) !important;
415
- }
416
-
417
- .ui.selection.dropdown:hover .menu {
418
- -webkit-box-shadow: 0px 1px 0px 1px #D3D3D3;
419
- box-shadow: 0px 1px 0px 1px #D3D3D3;
420
- }
421
-
422
- .ui.selection.dropdown:hover > .dropdown.icon {
423
- opacity: 1;
424
- }
425
-
426
- .ui.selection.dropdown.error:hover {
427
- -webkit-box-shadow: 0px 0px 0px 1px rgba(231, 190, 190, 1) !important;
428
- box-shadow: 0px 0px 0px 1px rgba(231, 190, 190, 1) !important;
429
- }
430
-
431
- .ui.selection.dropdown.error:hover .menu {
432
- -webkit-box-shadow: 0px 1px 0px 1px #E7BEBE;
433
- box-shadow: 0px 1px 0px 1px #E7BEBE;
434
- }
435
-
436
- .ui.selection.dropdown.error .menu .item:hover {
437
- background-color: #FFF2F2;
438
- }
439
-
440
- /* Selected */
441
-
442
- .ui.selection.dropdown.error .menu .item.selected {
443
- background-color: #FFF2F2;
444
- }
445
-
446
754
  /* Visible */
447
-
448
- .ui.visible.selection.dropdown {
449
- border-bottom-left-radius: 0em !important;
450
- border-bottom-right-radius: 0em !important;
451
- }
452
-
453
- /* Active */
454
-
455
- .ui.active.selection.dropdown {
456
- border-radius: 0.3125em 0.3125em 0em 0em !important;
457
- }
458
-
459
- .ui.active.selection.dropdown > .dropdown.icon {
460
- opacity: 1;
755
+ .ui.simple.visible.dropdown > .menu {
756
+ display: block;
461
757
  }
462
758
 
463
759
  /*--------------
@@ -466,36 +762,13 @@
466
762
 
467
763
  .ui.fluid.dropdown {
468
764
  display: block;
765
+ width: 100%;
766
+ min-width: 0em;
469
767
  }
470
-
471
768
  .ui.fluid.dropdown > .dropdown.icon {
472
769
  float: right;
473
770
  }
474
771
 
475
- /*--------------
476
- Inline
477
- ---------------*/
478
-
479
- .ui.inline.dropdown {
480
- cursor: pointer;
481
- display: inline-block;
482
- color: inherit;
483
- }
484
-
485
- .ui.inline.dropdown .dropdown.icon {
486
- margin: 0em 0.5em 0em 0.25em;
487
- }
488
-
489
- .ui.inline.dropdown .text {
490
- font-weight: bold;
491
- }
492
-
493
- .ui.inline.dropdown .menu {
494
- cursor: auto;
495
- margin-top: 0.25em;
496
- border-radius: 0.325em;
497
- }
498
-
499
772
  /*--------------
500
773
  Floating
501
774
  ---------------*/
@@ -503,117 +776,224 @@
503
776
  .ui.floating.dropdown .menu {
504
777
  left: 0;
505
778
  right: auto;
779
+ box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
780
+ border-radius: 0.2857rem;
781
+ }
782
+ .ui.floating.dropdown > .menu {
506
783
  margin-top: 0.5em !important;
507
- border-radius: 0.325em;
508
784
  }
509
785
 
510
786
  /*--------------
511
787
  Pointing
512
788
  ---------------*/
513
789
 
514
- .ui.pointing.dropdown .menu {
790
+ .ui.pointing.dropdown > .menu {
515
791
  top: 100%;
516
792
  margin-top: 0.75em;
517
- border-radius: 0.325em;
793
+ border-radius: 0.2857rem;
518
794
  }
519
-
520
- .ui.pointing.dropdown .menu:after {
795
+ .ui.pointing.dropdown > .menu:after {
521
796
  display: block;
522
797
  position: absolute;
523
798
  pointer-events: none;
524
- content: " ";
799
+ content: '';
525
800
  visibility: visible;
801
+ -webkit-transform: rotate(45deg);
802
+ -ms-transform: rotate(45deg);
803
+ transform: rotate(45deg);
526
804
  width: 0.5em;
527
805
  height: 0.5em;
528
- -webkit-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05);
529
- box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05);
530
- background-image: none;
531
- background-color: #FFFFFF;
532
- -webkit-transform: rotate(45deg);
533
- -ms-transform: rotate(45deg);
534
- transform: rotate(45deg);
535
- z-index: 12;
806
+ box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.1);
807
+ background: #ffffff;
808
+ z-index: 2;
536
809
  }
537
-
538
- .ui.pointing.dropdown .menu .active.item:first-child {
539
- background: transparent -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.03));
540
- background: transparent-webkit-gradient(linear, top left, bottom left, from(transparent), to(rgba(0, 0, 0, 0.03)));
541
- background: transparent linear-gradient(transparent, rgba(0, 0, 0, 0.03));
542
- }
543
-
544
- /* Directions */
545
-
546
- .ui.pointing.dropdown .menu:after {
810
+ .ui.pointing.dropdown > .menu:after {
547
811
  top: -0.25em;
548
812
  left: 50%;
549
813
  margin: 0em 0em 0em -0.25em;
550
814
  }
551
815
 
552
- .ui.top.left.pointing.dropdown .menu {
816
+ /* Top Left Pointing */
817
+ .ui.top.left.pointing.dropdown > .menu {
553
818
  top: 100%;
554
819
  bottom: auto;
555
820
  left: 0%;
556
821
  right: auto;
557
- margin: 0.75em 0em 0em;
822
+ margin: 1em 0em 0em;
558
823
  }
559
-
560
- .ui.top.left.pointing.dropdown .menu:after {
824
+ .ui.top.left.pointing.dropdown > .menu {
825
+ top: 100%;
826
+ bottom: auto;
827
+ left: 0%;
828
+ right: auto;
829
+ margin: 1em 0em 0em;
830
+ }
831
+ .ui.top.left.pointing.dropdown > .menu:after {
561
832
  top: -0.25em;
562
- left: 1.25em;
833
+ left: 1em;
563
834
  right: auto;
564
835
  margin: 0em;
565
836
  -webkit-transform: rotate(45deg);
566
- -ms-transform: rotate(45deg);
567
- transform: rotate(45deg);
837
+ -ms-transform: rotate(45deg);
838
+ transform: rotate(45deg);
568
839
  }
569
840
 
570
- .ui.top.right.pointing.dropdown .menu {
841
+ /* Top Right Pointing */
842
+ .ui.top.right.pointing.dropdown > .menu {
571
843
  top: 100%;
572
844
  bottom: auto;
573
845
  right: 0%;
574
846
  left: auto;
575
- margin: 0.75em 0em 0em;
847
+ margin: 1em 0em 0em;
576
848
  }
577
-
578
- .ui.top.right.pointing.dropdown .menu:after {
849
+ .ui.top.right.pointing.dropdown > .menu:after {
579
850
  top: -0.25em;
580
851
  left: auto;
581
- right: 1.25em;
852
+ right: 1em;
582
853
  margin: 0em;
583
854
  -webkit-transform: rotate(45deg);
584
- -ms-transform: rotate(45deg);
585
- transform: rotate(45deg);
855
+ -ms-transform: rotate(45deg);
856
+ transform: rotate(45deg);
586
857
  }
587
858
 
588
- .ui.left.pointing.dropdown .menu {
859
+ /* Left Pointing */
860
+ .ui.left.pointing.dropdown > .menu {
589
861
  top: 0%;
590
862
  left: 100%;
591
863
  right: auto;
592
- margin: 0em 0em 0em 0.75em;
864
+ margin: 0em 0em 0em 1em;
593
865
  }
594
-
595
- .ui.left.pointing.dropdown .menu:after {
866
+ .ui.left.pointing.dropdown > .menu:after {
596
867
  top: 1em;
597
868
  left: -0.25em;
598
869
  margin: 0em 0em 0em 0em;
599
870
  -webkit-transform: rotate(-45deg);
600
- -ms-transform: rotate(-45deg);
601
- transform: rotate(-45deg);
871
+ -ms-transform: rotate(-45deg);
872
+ transform: rotate(-45deg);
602
873
  }
603
874
 
604
- .ui.right.pointing.dropdown .menu {
875
+ /* Right Pointing */
876
+ .ui.right.pointing.dropdown > .menu {
605
877
  top: 0%;
606
878
  left: auto;
607
879
  right: 100%;
608
- margin: 0em 0.75em 0em 0em;
880
+ margin: 0em 1em 0em 0em;
609
881
  }
610
-
611
- .ui.right.pointing.dropdown .menu:after {
882
+ .ui.right.pointing.dropdown > .menu:after {
612
883
  top: 1em;
613
884
  left: auto;
614
885
  right: -0.25em;
615
886
  margin: 0em 0em 0em 0em;
616
887
  -webkit-transform: rotate(135deg);
617
- -ms-transform: rotate(135deg);
618
- transform: rotate(135deg);
619
- }
888
+ -ms-transform: rotate(135deg);
889
+ transform: rotate(135deg);
890
+ }
891
+
892
+ /* Bottom Pointing */
893
+ .ui.bottom.pointing.dropdown > .menu {
894
+ top: auto;
895
+ bottom: 100%;
896
+ left: 0%;
897
+ right: auto;
898
+ margin: 0em 0em 1em;
899
+ }
900
+ .ui.bottom.pointing.dropdown > .menu:after {
901
+ top: auto;
902
+ bottom: -0.25em;
903
+ right: auto;
904
+ margin: 0em;
905
+ -webkit-transform: rotate(-135deg);
906
+ -ms-transform: rotate(-135deg);
907
+ transform: rotate(-135deg);
908
+ }
909
+
910
+ /* Reverse Sub-Menu Direction */
911
+ .ui.bottom.pointing.dropdown > .menu .menu {
912
+ top: auto !important;
913
+ bottom: 0px !important;
914
+ }
915
+
916
+ /* Bottom Left */
917
+ .ui.bottom.left.pointing.dropdown > .menu {
918
+ left: 0%;
919
+ right: auto;
920
+ }
921
+ .ui.bottom.left.pointing.dropdown > .menu:after {
922
+ left: 1em;
923
+ right: auto;
924
+ }
925
+
926
+ /* Bottom Right */
927
+ .ui.bottom.right.pointing.dropdown > .menu {
928
+ right: 0%;
929
+ left: auto;
930
+ }
931
+ .ui.bottom.right.pointing.dropdown > .menu:after {
932
+ left: auto;
933
+ right: 1em;
934
+ }
935
+
936
+
937
+ /*******************************
938
+ Theme Overrides
939
+ *******************************/
940
+
941
+
942
+ /* Dropdown Carets */
943
+ @font-face {
944
+ font-family: 'Dropdown';
945
+ src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfuIIAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zjo82LgAAAFwAAABVGhlYWQAQ88bAAACxAAAADZoaGVhAwcB6QAAAvwAAAAkaG10eAS4ABIAAAMgAAAAIGxvY2EBNgDeAAADQAAAABJtYXhwAAoAFgAAA1QAAAAgbmFtZVcZpu4AAAN0AAABRXBvc3QAAwAAAAAEvAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDX//3//wAB/+MPLQADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAIABJQElABMAABM0NzY3BTYXFhUUDwEGJwYvASY1AAUGBwEACAUGBoAFCAcGgAUBEgcGBQEBAQcECQYHfwYBAQZ/BwYAAQAAAG4BJQESABMAADc0PwE2MzIfARYVFAcGIyEiJyY1AAWABgcIBYAGBgUI/wAHBgWABwaABQWABgcHBgUFBgcAAAABABIASQC3AW4AEwAANzQ/ATYXNhcWHQEUBwYnBi8BJjUSBoAFCAcFBgYFBwgFgAbbBwZ/BwEBBwQJ/wgEBwEBB38GBgAAAAABAAAASQClAW4AEwAANxE0NzYzMh8BFhUUDwEGIyInJjUABQYHCAWABgaABQgHBgVbAQAIBQYGgAUIBwWABgYFBwAAAAEAAAABAADZuaKOXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAAAAACgAUAB4AQgBkAIgAqgAAAAEAAAAIABQAAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAOAAAAAQAAAAAAAgAOAEcAAQAAAAAAAwAOACQAAQAAAAAABAAOAFUAAQAAAAAABQAWAA4AAQAAAAAABgAHADIAAQAAAAAACgA0AGMAAwABBAkAAQAOAAAAAwABBAkAAgAOAEcAAwABBAkAAwAOACQAAwABBAkABAAOAFUAAwABBAkABQAWAA4AAwABBAkABgAOADkAAwABBAkACgA0AGMAaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAGkAYwBvAG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAVwAAoAAAAABSgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAdkAAAHZLDXE/09TLzIAAALQAAAAYAAAAGAIIweQY21hcAAAAzAAAABMAAAATA9+4ghnYXNwAAADfAAAAAgAAAAIAAAAEGhlYWQAAAOEAAAANgAAADYAQ88baGhlYQAAA7wAAAAkAAAAJAMHAelobXR4AAAD4AAAACAAAAAgBLgAEm1heHAAAAQAAAAABgAAAAYACFAAbmFtZQAABAgAAAFFAAABRVcZpu5wb3N0AAAFUAAAACAAAAAgAAMAAAEABAQAAQEBCGljb21vb24AAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAACIDx0AAACNER0AAAAJHQAAAdASAAkBAQgPERMWGyAlKmljb21vb25pY29tb29udTB1MXUyMHVGMEQ3dUYwRDh1RjBEOXVGMERBAAACAYkABgAIAgABAAQABwAKAA0AVgCfAOgBL/yUDvyUDvyUDvuUDvtvi/emFYuQjZCOjo+Pj42Qiwj3lIsFkIuQiY6Hj4iNhouGi4aJh4eHCPsU+xQFiIiGiYaLhouHjYeOCPsU9xQFiI+Jj4uQCA77b4v3FBWLkI2Pjo8I9xT3FAWPjo+NkIuQi5CJjogI9xT7FAWPh42Hi4aLhomHh4eIiIaJhosI+5SLBYaLh42HjoiPiY+LkAgO+92d928Vi5CNkI+OCPcU9xQFjo+QjZCLkIuPiY6Hj4iNhouGCIv7lAWLhomHh4iIh4eJhouGi4aNiI8I+xT3FAWHjomPi5AIDvvdi+YVi/eUBYuQjZCOjo+Pj42Qi5CLkImOhwj3FPsUBY+IjYaLhouGiYeHiAj7FPsUBYiHhomGi4aLh42Hj4iOiY+LkAgO+JQU+JQViwwKAAAAAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA8NoB4P/g/+AB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDw2v/9//8AAAAAACDw1//9//8AAf/jDy0AAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAABAAA5emozXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAUAAACAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoANABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoANABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff');
946
+ font-weight: normal;
947
+ font-style: normal;
948
+ }
949
+ .ui.dropdown > .dropdown.icon {
950
+ font-family: 'Dropdown';
951
+ line-height: 1;
952
+ height: 1em;
953
+ width: 1.23em;
954
+ -webkit-backface-visibility: hidden;
955
+ backface-visibility: hidden;
956
+ font-weight: normal;
957
+ font-style: normal;
958
+ text-align: center;
959
+ }
960
+ .ui.dropdown > .dropdown.icon {
961
+ width: auto;
962
+ }
963
+ .ui.dropdown > .dropdown.icon:before {
964
+ content: '\f0d7';
965
+ }
966
+
967
+ /* Sub Menu */
968
+ .ui.dropdown .menu .item .dropdown.icon:before {
969
+ content: '\f0da' /*rtl:'\f0d9'*/;
970
+ }
971
+ .ui.dropdown .item .left.dropdown.icon:before,
972
+ .ui.dropdown .left.menu .item .dropdown.icon:before {
973
+ content: "\f0d9" /*rtl:"\f0da"*/;
974
+ }
975
+
976
+ /* Vertical Menu Dropdown */
977
+ .ui.vertical.menu .dropdown.item > .dropdown.icon:before {
978
+ content: "\f0da" /*rtl:"\f0d9"*/;
979
+ }
980
+ /* Icons for Reference
981
+ .dropdown.down.icon {
982
+ content: "\f0d7";
983
+ }
984
+ .dropdown.up.icon {
985
+ content: "\f0d8";
986
+ }
987
+ .dropdown.left.icon {
988
+ content: "\f0d9";
989
+ }
990
+ .dropdown.icon.icon {
991
+ content: "\f0da";
992
+ }
993
+ */
994
+
995
+
996
+ /*******************************
997
+ User Overrides
998
+ *******************************/
999
+