vhx-quartz 0.7.7 → 0.8.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/vhx/quartz/version.rb +1 -1
- data/vendor/assets/javascripts/vhx-quartz.autosuggest.js +266 -0
- data/vendor/assets/javascripts/vhx-quartz.checkbox.js +46 -0
- data/vendor/assets/javascripts/vhx-quartz.filter.js +254 -0
- data/vendor/assets/javascripts/vhx-quartz.header.js +27 -0
- data/vendor/assets/javascripts/vhx-quartz.radio.js +66 -0
- data/vendor/assets/javascripts/vhx-quartz.search_input.js +66 -0
- data/vendor/assets/javascripts/vhx-quartz.select.js +263 -0
- data/vendor/assets/stylesheets/vhx-quartz.autosuggest.css +67 -0
- data/vendor/assets/stylesheets/vhx-quartz.checkbox.css +328 -0
- data/vendor/assets/stylesheets/vhx-quartz.css +9 -616
- data/vendor/assets/stylesheets/vhx-quartz.filter.css +66 -0
- data/vendor/assets/stylesheets/vhx-quartz.min.css +1 -1
- data/vendor/assets/stylesheets/vhx-quartz.radio.css +150 -0
- data/vendor/assets/stylesheets/vhx-quartz.select.css +128 -0
- metadata +14 -2
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
/* .....................................
|
|
2
|
+
Fonts
|
|
3
|
+
..................................... */
|
|
4
|
+
/* .....................................
|
|
5
|
+
Sets
|
|
6
|
+
..................................... */
|
|
7
|
+
/* .....................................
|
|
8
|
+
Media Query Ranges
|
|
9
|
+
..................................... */
|
|
10
|
+
/* .....................................
|
|
11
|
+
Colors - Grays
|
|
12
|
+
..................................... */
|
|
13
|
+
/* .....................................
|
|
14
|
+
Colors - Teals
|
|
15
|
+
..................................... */
|
|
16
|
+
/* .....................................
|
|
17
|
+
Colors - Red
|
|
18
|
+
..................................... */
|
|
19
|
+
/* .....................................
|
|
20
|
+
Colors - Navy
|
|
21
|
+
..................................... */
|
|
22
|
+
/* .....................................
|
|
23
|
+
Colors - Brand Palette
|
|
24
|
+
..................................... */
|
|
25
|
+
/* .....................................
|
|
26
|
+
Colors - External Palette
|
|
27
|
+
..................................... */
|
|
28
|
+
/* helper function for margin and padding
|
|
29
|
+
......................................*/
|
|
30
|
+
/*.....................................
|
|
31
|
+
Admin Radio
|
|
32
|
+
......................................*/
|
|
33
|
+
.form .radio-gray,
|
|
34
|
+
.form .radio-teal {
|
|
35
|
+
position: relative;
|
|
36
|
+
display: inline-block;
|
|
37
|
+
width: 100%;
|
|
38
|
+
list-style: none;
|
|
39
|
+
margin-left: 0;
|
|
40
|
+
color: #5E7887;
|
|
41
|
+
font-size: 14px;
|
|
42
|
+
background: transparent;
|
|
43
|
+
user-select: none;
|
|
44
|
+
/* radio
|
|
45
|
+
...................................*/
|
|
46
|
+
/* label unchecked
|
|
47
|
+
...................................*/
|
|
48
|
+
/* label checked
|
|
49
|
+
...................................*/
|
|
50
|
+
/* stacked radio
|
|
51
|
+
...................................*/
|
|
52
|
+
/* color styles
|
|
53
|
+
...................................*/ }
|
|
54
|
+
.form .radio-gray input[type="radio"],
|
|
55
|
+
.form .radio-teal input[type="radio"] {
|
|
56
|
+
display: none; }
|
|
57
|
+
.form .radio-gray li,
|
|
58
|
+
.form .radio-teal li {
|
|
59
|
+
display: inline-block;
|
|
60
|
+
margin-right: 10px; }
|
|
61
|
+
.form .radio-gray li:after,
|
|
62
|
+
.form .radio-teal li:after {
|
|
63
|
+
clear: both; }
|
|
64
|
+
.form .radio-gray li:before, .form .radio-gray li:after,
|
|
65
|
+
.form .radio-teal li:before,
|
|
66
|
+
.form .radio-teal li:after {
|
|
67
|
+
content: " ";
|
|
68
|
+
display: table; }
|
|
69
|
+
.form .radio-gray label,
|
|
70
|
+
.form .radio-teal label {
|
|
71
|
+
display: block;
|
|
72
|
+
height: 20px;
|
|
73
|
+
line-height: 20px;
|
|
74
|
+
margin: 0px;
|
|
75
|
+
float: left;
|
|
76
|
+
box-sizing: border-box; }
|
|
77
|
+
.form .radio-gray label .radio--icon,
|
|
78
|
+
.form .radio-teal label .radio--icon {
|
|
79
|
+
position: relative;
|
|
80
|
+
display: inline-block;
|
|
81
|
+
width: 20px;
|
|
82
|
+
height: 20px;
|
|
83
|
+
margin-right: 5px;
|
|
84
|
+
float: left;
|
|
85
|
+
border: 1px solid #5E7887;
|
|
86
|
+
box-shadow: none;
|
|
87
|
+
box-sizing: border-box;
|
|
88
|
+
border-radius: 20px;
|
|
89
|
+
transition: box-shadow .2s ease, color .2s ease; }
|
|
90
|
+
.form .radio-gray label .radio--icon .circle-top,
|
|
91
|
+
.form .radio-teal label .radio--icon .circle-top {
|
|
92
|
+
opacity: 0;
|
|
93
|
+
transition: opacity .2s ease;
|
|
94
|
+
display: block;
|
|
95
|
+
height: 5px;
|
|
96
|
+
overflow: hidden;
|
|
97
|
+
position: absolute;
|
|
98
|
+
top: 4px;
|
|
99
|
+
left: 4px; }
|
|
100
|
+
.form .radio-gray label .radio--icon .circle-top span,
|
|
101
|
+
.form .radio-teal label .radio--icon .circle-top span {
|
|
102
|
+
display: block;
|
|
103
|
+
width: 10px;
|
|
104
|
+
height: 10px;
|
|
105
|
+
background: #869AA5;
|
|
106
|
+
border-radius: 10px; }
|
|
107
|
+
.form .radio-gray label .radio--icon .circle-bottom,
|
|
108
|
+
.form .radio-teal label .radio--icon .circle-bottom {
|
|
109
|
+
opacity: 0;
|
|
110
|
+
transition: opacity .2s ease;
|
|
111
|
+
display: block;
|
|
112
|
+
height: 5px;
|
|
113
|
+
overflow: hidden;
|
|
114
|
+
position: absolute;
|
|
115
|
+
bottom: 4px;
|
|
116
|
+
left: 4px; }
|
|
117
|
+
.form .radio-gray label .radio--icon .circle-bottom span,
|
|
118
|
+
.form .radio-teal label .radio--icon .circle-bottom span {
|
|
119
|
+
position: relative;
|
|
120
|
+
top: -5px;
|
|
121
|
+
display: block;
|
|
122
|
+
width: 10px;
|
|
123
|
+
height: 10px;
|
|
124
|
+
background: #5E7887;
|
|
125
|
+
border-radius: 10px; }
|
|
126
|
+
.form .radio-gray label .radio--label,
|
|
127
|
+
.form .radio-teal label .radio--label {
|
|
128
|
+
display: block;
|
|
129
|
+
float: left;
|
|
130
|
+
height: 20px; }
|
|
131
|
+
.form .radio-gray input[type="radio"]:checked + label .radio--icon .circle-top, .form .radio-gray input[type="radio"]:checked + label .radio--icon .circle-bottom,
|
|
132
|
+
.form .radio-teal input[type="radio"]:checked + label .radio--icon .circle-top,
|
|
133
|
+
.form .radio-teal input[type="radio"]:checked + label .radio--icon .circle-bottom {
|
|
134
|
+
opacity: 1;
|
|
135
|
+
transition: opacity .2s ease; }
|
|
136
|
+
.form .radio-gray.radio--stacked,
|
|
137
|
+
.form .radio-teal.radio--stacked {
|
|
138
|
+
display: block;
|
|
139
|
+
height: auto; }
|
|
140
|
+
.form .radio-gray.radio--stacked li,
|
|
141
|
+
.form .radio-teal.radio--stacked li {
|
|
142
|
+
display: block;
|
|
143
|
+
margin-right: 0px;
|
|
144
|
+
margin-bottom: 10px; }
|
|
145
|
+
.form .radio-gray.radio-teal .circle-top span,
|
|
146
|
+
.form .radio-teal.radio-teal .circle-top span {
|
|
147
|
+
background: #22B9B0 !important; }
|
|
148
|
+
.form .radio-gray.radio-teal .circle-bottom span,
|
|
149
|
+
.form .radio-teal.radio-teal .circle-bottom span {
|
|
150
|
+
background: #149A97 !important; }
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
/* .....................................
|
|
2
|
+
Fonts
|
|
3
|
+
..................................... */
|
|
4
|
+
/* .....................................
|
|
5
|
+
Sets
|
|
6
|
+
..................................... */
|
|
7
|
+
/* .....................................
|
|
8
|
+
Media Query Ranges
|
|
9
|
+
..................................... */
|
|
10
|
+
/* .....................................
|
|
11
|
+
Colors - Grays
|
|
12
|
+
..................................... */
|
|
13
|
+
/* .....................................
|
|
14
|
+
Colors - Teals
|
|
15
|
+
..................................... */
|
|
16
|
+
/* .....................................
|
|
17
|
+
Colors - Red
|
|
18
|
+
..................................... */
|
|
19
|
+
/* .....................................
|
|
20
|
+
Colors - Navy
|
|
21
|
+
..................................... */
|
|
22
|
+
/* .....................................
|
|
23
|
+
Colors - Brand Palette
|
|
24
|
+
..................................... */
|
|
25
|
+
/* .....................................
|
|
26
|
+
Colors - External Palette
|
|
27
|
+
..................................... */
|
|
28
|
+
/* helper function for margin and padding
|
|
29
|
+
......................................*/
|
|
30
|
+
.c-select--input-container:after {
|
|
31
|
+
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2223%22%20height%3D%2223%22%20viewBox%3D%220%200%2023%2023%22%3E%3Cpath%20d%3D%22M21.8%2019.5L17.4%2015c-.6.9-1.5%201.7-2.4%202.4l4.5%204.4c1.4%201.6%203.8-.8%202.3-2.3z%22%20fill%3D%22%23375667%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M15%2017.4c4.4-3%205.2-9.4%201.8-13.4C13.8.5%208.6-.3%204.7%202.3.9%204.7-.4%209.9%201.7%2014c2.2%204.4%207.7%206.2%2012.1%204.1.4-.2.8-.5%201.2-.7zm-5.2-1.7C6.7%2015.7%204%2013%204%209.8%204%206.7%206.7%204%209.8%204c3.2%200%205.8%202.7%205.8%205.8.1%203.2-2.6%205.9-5.8%205.9z%22%20fill%3D%22%23375667%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M9.8%202.2c4.2%200%207.7%203.4%207.7%207.7%200%201.5-.5%203.1-1.4%204.3-.5.7-1%201.3-1.7%201.8l-.3.2c-1.2.9-2.8%201.3-4.3%201.3-4.2%200-7.7-3.4-7.7-7.7.1-4.2%203.5-7.6%207.7-7.6m0-1.5C4.7.7.6%204.8.6%209.9s4.1%209.2%209.2%209.2c1.8%200%203.7-.6%205.2-1.6.9-.6%201.7-1.4%202.3-2.4%201.1-1.5%201.6-3.3%201.6-5.2.1-5.1-4-9.2-9.1-9.2z%22%20fill%3D%22%23375667%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
|
|
32
|
+
background-repeat: no-repeat; }
|
|
33
|
+
|
|
34
|
+
/*
|
|
35
|
+
Mithril Chosen-like Dropdown w/ Search styles
|
|
36
|
+
See app/assets/javascripts/_shared/components/select/select.ui.js for markup
|
|
37
|
+
*/
|
|
38
|
+
.c-select--container {
|
|
39
|
+
position: relative; }
|
|
40
|
+
|
|
41
|
+
.c-select--dropdown {
|
|
42
|
+
position: absolute;
|
|
43
|
+
max-height: 282px;
|
|
44
|
+
top: 55px;
|
|
45
|
+
left: 0;
|
|
46
|
+
width: 100%;
|
|
47
|
+
background-color: #fff;
|
|
48
|
+
background: #ffffff;
|
|
49
|
+
z-index: 2147483600;
|
|
50
|
+
border: 1px solid #D7DDE1;
|
|
51
|
+
border-radius: 5px;
|
|
52
|
+
display: none; }
|
|
53
|
+
.c-select--dropdown.is-open {
|
|
54
|
+
display: block; }
|
|
55
|
+
.c-select--dropdown:after, .c-select--dropdown:before {
|
|
56
|
+
bottom: 100%;
|
|
57
|
+
right: 22px;
|
|
58
|
+
border: solid transparent;
|
|
59
|
+
content: " ";
|
|
60
|
+
height: 0;
|
|
61
|
+
width: 0;
|
|
62
|
+
position: absolute;
|
|
63
|
+
pointer-events: none; }
|
|
64
|
+
.c-select--dropdown:after {
|
|
65
|
+
border-color: rgba(255, 255, 255, 0);
|
|
66
|
+
border-bottom-color: #ffffff;
|
|
67
|
+
border-width: 9px;
|
|
68
|
+
margin-right: -10px; }
|
|
69
|
+
.c-select--dropdown:before {
|
|
70
|
+
border-color: rgba(255, 255, 255, 0);
|
|
71
|
+
border-bottom-color: #D7DDE1;
|
|
72
|
+
border-width: 10px;
|
|
73
|
+
margin-right: -11px; }
|
|
74
|
+
|
|
75
|
+
.c-select--input-container {
|
|
76
|
+
position: absolute;
|
|
77
|
+
width: 100%;
|
|
78
|
+
border-radius: 5px;
|
|
79
|
+
z-index: 2;
|
|
80
|
+
background: #fff; }
|
|
81
|
+
.c-select--input-container:after {
|
|
82
|
+
position: absolute;
|
|
83
|
+
top: 50%;
|
|
84
|
+
right: 24px;
|
|
85
|
+
width: 20px;
|
|
86
|
+
height: 20px;
|
|
87
|
+
margin-top: -10px;
|
|
88
|
+
content: ' ';
|
|
89
|
+
display: block;
|
|
90
|
+
background-position: 97% 50%;
|
|
91
|
+
background-size: 15px; }
|
|
92
|
+
|
|
93
|
+
.c-select--container.has-search .c-select--dropdown {
|
|
94
|
+
min-height: 150px; }
|
|
95
|
+
.c-select--container.has-search .c-select--options {
|
|
96
|
+
margin-top: 70px; }
|
|
97
|
+
|
|
98
|
+
.c-select--options {
|
|
99
|
+
margin-top: 15px;
|
|
100
|
+
margin-bottom: 15px;
|
|
101
|
+
overflow-y: auto;
|
|
102
|
+
max-height: 210px; }
|
|
103
|
+
.c-select--options.is-loading {
|
|
104
|
+
background-position: center center;
|
|
105
|
+
background-size: 40px;
|
|
106
|
+
background-repeat: no-repeat;
|
|
107
|
+
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%20%20viewBox%3D%220%200%2040%2040%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20opacity%3D%220.2%22%20fill%3D%22%237a878e%22%20d%3D%22M20.201%2C5.169c-8.254%2C0-14.946%2C6.692-14.946%2C14.946c0%2C8.255%2C6.692%2C14.946%2C14.946%2C14.946%0D%0A%20%20s14.946-6.691%2C14.946-14.946C35.146%2C11.861%2C28.455%2C5.169%2C20.201%2C5.169z%20M20.201%2C31.749c-6.425%2C0-11.634-5.208-11.634-11.634%0D%0A%20%20c0-6.425%2C5.209-11.634%2C11.634-11.634c6.425%2C0%2C11.633%2C5.209%2C11.633%2C11.634C31.834%2C26.541%2C26.626%2C31.749%2C20.201%2C31.749z%22%2F%3E%0D%0A%3Cpath%20fill%3D%22%237a878e%22%20d%3D%22M26.013%2C10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0%0D%0A%20%20C22.32%2C8.481%2C24.301%2C9.057%2C26.013%2C10.047z%22%3E%0D%0A%20%20%3CanimateTransform%20attributeType%3D%22xml%22%0D%0A%20%20%20%20attributeName%3D%22transform%22%0D%0A%20%20%20%20type%3D%22rotate%22%0D%0A%20%20%20%20from%3D%220%2020%2020%22%0D%0A%20%20%20%20to%3D%22360%2020%2020%22%0D%0A%20%20%20%20dur%3D%220.5s%22%0D%0A%20%20%20%20repeatCount%3D%22indefinite%22%2F%3E%0D%0A%20%20%3C%2Fpath%3E%0D%0A%3C%2Fsvg%3E"); }
|
|
108
|
+
.c-select--options.is-loading li {
|
|
109
|
+
opacity: 0; }
|
|
110
|
+
|
|
111
|
+
.c-select--option {
|
|
112
|
+
color: #233741; }
|
|
113
|
+
.c-select--option.is-selected {
|
|
114
|
+
cursor: pointer;
|
|
115
|
+
background-color: #F0F2F4; }
|
|
116
|
+
.c-select--option.padding-horizontal-large {
|
|
117
|
+
padding-left: 25px !important;
|
|
118
|
+
padding-right: 25px !important; }
|
|
119
|
+
.c-select--option.padding-vertical-small {
|
|
120
|
+
padding-top: 0.3125rem !important;
|
|
121
|
+
padding-bottom: 0.3125rem !important; }
|
|
122
|
+
|
|
123
|
+
.c-select--item-label {
|
|
124
|
+
max-width: 80%;
|
|
125
|
+
white-space: nowrap;
|
|
126
|
+
overflow: hidden;
|
|
127
|
+
text-overflow: ellipsis;
|
|
128
|
+
display: inline-block; }
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: vhx-quartz
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.8.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Scott Robertson, Courtney Burton, Steven Bone, David Gonzalez
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2016-
|
|
11
|
+
date: 2016-07-05 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: railties
|
|
@@ -91,8 +91,18 @@ files:
|
|
|
91
91
|
- README.md
|
|
92
92
|
- lib/vhx/quartz.rb
|
|
93
93
|
- lib/vhx/quartz/version.rb
|
|
94
|
+
- vendor/assets/javascripts/vhx-quartz.autosuggest.js
|
|
95
|
+
- vendor/assets/javascripts/vhx-quartz.checkbox.js
|
|
96
|
+
- vendor/assets/javascripts/vhx-quartz.filter.js
|
|
97
|
+
- vendor/assets/javascripts/vhx-quartz.header.js
|
|
98
|
+
- vendor/assets/javascripts/vhx-quartz.radio.js
|
|
99
|
+
- vendor/assets/javascripts/vhx-quartz.search_input.js
|
|
100
|
+
- vendor/assets/javascripts/vhx-quartz.select.js
|
|
101
|
+
- vendor/assets/stylesheets/vhx-quartz.autosuggest.css
|
|
102
|
+
- vendor/assets/stylesheets/vhx-quartz.checkbox.css
|
|
94
103
|
- vendor/assets/stylesheets/vhx-quartz.css
|
|
95
104
|
- vendor/assets/stylesheets/vhx-quartz.css.map
|
|
105
|
+
- vendor/assets/stylesheets/vhx-quartz.filter.css
|
|
96
106
|
- vendor/assets/stylesheets/vhx-quartz.icon-activity.css
|
|
97
107
|
- vendor/assets/stylesheets/vhx-quartz.icon-add-member.css
|
|
98
108
|
- vendor/assets/stylesheets/vhx-quartz.icon-alert.css
|
|
@@ -250,6 +260,8 @@ files:
|
|
|
250
260
|
- vendor/assets/stylesheets/vhx-quartz.icons-ui-white.css
|
|
251
261
|
- vendor/assets/stylesheets/vhx-quartz.icons-ui.css
|
|
252
262
|
- vendor/assets/stylesheets/vhx-quartz.min.css
|
|
263
|
+
- vendor/assets/stylesheets/vhx-quartz.radio.css
|
|
264
|
+
- vendor/assets/stylesheets/vhx-quartz.select.css
|
|
253
265
|
homepage: http://github.com/vhx/quartz-rails
|
|
254
266
|
licenses:
|
|
255
267
|
- MIT
|