romo 0.18.2 → 0.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/assets/css/romo/base.scss +545 -536
- data/assets/css/romo/buttons.scss +200 -196
- data/assets/css/romo/colors.scss +213 -209
- data/assets/css/romo/datepicker.scss +62 -58
- data/assets/css/romo/dropdown.scss +27 -23
- data/assets/css/romo/forms.scss +199 -195
- data/assets/css/romo/grid.scss +272 -268
- data/assets/css/romo/grid_table.scss +281 -277
- data/assets/css/romo/indicator_text_input.scss +17 -13
- data/assets/css/romo/labels.scss +60 -56
- data/assets/css/romo/lists.scss +30 -26
- data/assets/css/romo/modal.scss +28 -24
- data/assets/css/romo/normalize.scss +417 -413
- data/assets/css/romo/select.scss +96 -92
- data/assets/css/romo/sortable.scss +13 -9
- data/assets/css/romo/table.scss +211 -207
- data/assets/css/romo/tabs.scss +58 -54
- data/assets/css/romo/tooltip.scss +88 -84
- data/assets/css/romo/z_index.scss +23 -19
- data/assets/js/romo/select_dropdown.js +4 -1
- data/lib/romo/version.rb +1 -1
- metadata +2 -2
data/assets/css/romo/tabs.scss
CHANGED
|
@@ -1,71 +1,75 @@
|
|
|
1
1
|
@import 'css/romo/vars';
|
|
2
2
|
@import 'css/romo/mixins';
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
.romo {
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
display: block;
|
|
8
|
-
@include list-unstyled;
|
|
9
|
-
@include clearfix;
|
|
6
|
+
/* tabs */
|
|
10
7
|
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
.romo-tabs {
|
|
9
|
+
display: block;
|
|
10
|
+
@include list-unstyled;
|
|
11
|
+
@include clearfix;
|
|
13
12
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
@include rm-push;
|
|
17
|
-
@include rm-pad;
|
|
18
|
-
}
|
|
13
|
+
border-bottom: $tabDividerSize solid $tabBgColorActive;
|
|
14
|
+
}
|
|
19
15
|
|
|
20
|
-
.romo-tabs
|
|
21
|
-
|
|
16
|
+
.romo-tabs > li {
|
|
17
|
+
float: left;
|
|
18
|
+
@include rm-push;
|
|
19
|
+
@include rm-pad;
|
|
20
|
+
}
|
|
22
21
|
|
|
23
|
-
.romo-tabs
|
|
24
|
-
|
|
25
|
-
cursor: pointer;
|
|
22
|
+
.romo-tabs-pull-left > li { float: left; }
|
|
23
|
+
.romo-tabs-pull-right > li { float: right; }
|
|
26
24
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
color: $tabColor;
|
|
25
|
+
.romo-tabs > li > a {
|
|
26
|
+
display: block;
|
|
27
|
+
cursor: pointer;
|
|
31
28
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
29
|
+
@include border1;
|
|
30
|
+
background-color: $tabBgColor;
|
|
31
|
+
border-color: $tabBgColor;
|
|
32
|
+
color: $tabColor;
|
|
33
|
+
|
|
34
|
+
&:hover,
|
|
35
|
+
&:focus {
|
|
36
|
+
outline: 0;
|
|
37
|
+
text-decoration: none;
|
|
38
|
+
background-color: $tabBgColorHover;
|
|
39
|
+
border-color: $tabBgColorHover;
|
|
40
|
+
}
|
|
38
41
|
}
|
|
39
|
-
}
|
|
40
42
|
|
|
41
|
-
.romo-tabs > li.active > a {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}
|
|
43
|
+
.romo-tabs > li.active > a {
|
|
44
|
+
background-color: $tabBgColorActive;
|
|
45
|
+
border-color: $tabBgColorActive;
|
|
46
|
+
color: $tabColorActive;
|
|
47
|
+
}
|
|
46
48
|
|
|
47
|
-
.romo-tabs > li.disabled a,
|
|
48
|
-
.romo-tabs > li:disabled a {
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
.romo-tabs > li.disabled a,
|
|
50
|
+
.romo-tabs > li:disabled a {
|
|
51
|
+
color: $tabColorDisabled;
|
|
52
|
+
cursor: $notAllowedCursor;
|
|
51
53
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
54
|
+
&:hover,
|
|
55
|
+
&:focus {
|
|
56
|
+
background-color: $tabBgColor;
|
|
57
|
+
border-color: $tabBgColorHover;
|
|
58
|
+
}
|
|
56
59
|
}
|
|
57
|
-
}
|
|
58
60
|
|
|
59
|
-
.romo-tabs.romo-tabs-small > li > a,
|
|
60
|
-
.romo-tabs.romo-tabs0 > li > a { @include font-size0; @include font-weight0; @include line-height0; @include button-pad0; }
|
|
61
|
-
.romo-tabs > li > a,
|
|
62
|
-
.romo-tabs.romo-tabs1 > li > a { @include font-size1; @include font-weight1; @include line-height1; @include button-pad1; }
|
|
63
|
-
.romo-tabs.romo-tabs-large > li > a,
|
|
64
|
-
.romo-tabs.romo-tabs2 > li > a { @include font-size2; @include font-weight2; @include line-height2; @include button-pad2; }
|
|
65
|
-
.romo-tabs.romo-tabs3 > li > a { @include font-size3; @include font-weight3; @include line-height3; @include button-pad3; }
|
|
61
|
+
.romo-tabs.romo-tabs-small > li > a,
|
|
62
|
+
.romo-tabs.romo-tabs0 > li > a { @include font-size0; @include font-weight0; @include line-height0; @include button-pad0; }
|
|
63
|
+
.romo-tabs > li > a,
|
|
64
|
+
.romo-tabs.romo-tabs1 > li > a { @include font-size1; @include font-weight1; @include line-height1; @include button-pad1; }
|
|
65
|
+
.romo-tabs.romo-tabs-large > li > a,
|
|
66
|
+
.romo-tabs.romo-tabs2 > li > a { @include font-size2; @include font-weight2; @include line-height2; @include button-pad2; }
|
|
67
|
+
.romo-tabs.romo-tabs3 > li > a { @include font-size3; @include font-weight3; @include line-height3; @include button-pad3; }
|
|
68
|
+
|
|
69
|
+
.romo-tabs.romo-tabs-stacked { @include rm-border; }
|
|
70
|
+
.romo-tabs.romo-tabs-stacked > li { float: none; }
|
|
71
|
+
.romo-tabs.romo-tabs-stacked > li > a { @include border1; border-color: $baseBorderColor; }
|
|
72
|
+
.romo-tabs.romo-tabs-stacked > li.active > a { border-color: $tabBgColorActive; }
|
|
73
|
+
.romo-tabs.romo-tabs-stacked > li:not(:last-child) > a { @include rm-border-bottom; }
|
|
66
74
|
|
|
67
|
-
|
|
68
|
-
.romo-tabs.romo-tabs-stacked > li { float: none; }
|
|
69
|
-
.romo-tabs.romo-tabs-stacked > li > a { @include border1; border-color: $baseBorderColor; }
|
|
70
|
-
.romo-tabs.romo-tabs-stacked > li.active > a { border-color: $tabBgColorActive; }
|
|
71
|
-
.romo-tabs.romo-tabs-stacked > li:not(:last-child) > a { @include rm-border-bottom; }
|
|
75
|
+
}
|
|
@@ -1,89 +1,93 @@
|
|
|
1
1
|
@import 'css/romo/vars';
|
|
2
2
|
@import 'css/romo/mixins';
|
|
3
3
|
|
|
4
|
-
.romo
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
4
|
+
.romo {
|
|
5
|
+
|
|
6
|
+
.romo-tooltip {
|
|
7
|
+
cursor: pointer;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.romo-tooltip-popup {
|
|
11
|
+
position: absolute;
|
|
12
|
+
float: left;
|
|
13
|
+
@include border1-radius;
|
|
14
|
+
|
|
15
|
+
white-space: normal;
|
|
16
|
+
text-align: center;
|
|
17
|
+
|
|
18
|
+
font-size: 11px;
|
|
19
|
+
line-height: 1.4;
|
|
20
|
+
font-weight: 300;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.romo-tooltip-popup:not([class*="romo-tooltip-open"]) {
|
|
24
|
+
display: none;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.romo-tooltip-arrow {
|
|
28
|
+
position: absolute;
|
|
29
|
+
width: 0;
|
|
30
|
+
height: 0;
|
|
31
|
+
border-color: transparent;
|
|
32
|
+
border-style: solid;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.romo-tooltip-popup[data-romo-tooltip-arrow-position="top"] .romo-tooltip-arrow {
|
|
36
|
+
border-width: 6px 6px 0;
|
|
37
|
+
bottom: -6px;
|
|
38
|
+
left: 50%;
|
|
39
|
+
margin-left: -6px;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.romo-tooltip-popup[data-romo-tooltip-arrow-position="right"] .romo-tooltip-arrow {
|
|
43
|
+
border-width: 6px 6px 6px 0;
|
|
44
|
+
left: -6px;
|
|
45
|
+
top: 50%;
|
|
46
|
+
margin-top: -6px;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.romo-tooltip-popup[data-romo-tooltip-arrow-position="bottom"] .romo-tooltip-arrow {
|
|
50
|
+
border-width: 0 6px 6px;
|
|
51
|
+
top: -6px;
|
|
52
|
+
left: 50%;
|
|
53
|
+
margin-left: -6px;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.romo-tooltip-popup[data-romo-tooltip-arrow-position="left"] .romo-tooltip-arrow {
|
|
57
|
+
border-width: 6px 0 6px 6px;
|
|
58
|
+
right: -6px;
|
|
59
|
+
top: 50%;
|
|
60
|
+
margin-top: -6px;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.romo-tooltip-popup[data-romo-tooltip-alignment="left"] { @include align-left; }
|
|
64
|
+
.romo-tooltip-popup[data-romo-tooltip-alignment="center"] { @include align-center; }
|
|
65
|
+
.romo-tooltip-popup[data-romo-tooltip-alignment="right"] { @include align-right; }
|
|
66
|
+
|
|
67
|
+
.romo-tooltip-body {
|
|
68
|
+
padding: 6px 8px;
|
|
69
|
+
overflow: hidden;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
/* theme */
|
|
74
|
+
|
|
75
|
+
.romo-tooltip-popup {
|
|
76
|
+
background-color: $tooltipBgColor;
|
|
77
|
+
color: $tooltipColor;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.romo-tooltip-popup[data-romo-tooltip-arrow-position="top"] .romo-tooltip-arrow {
|
|
81
|
+
border-top-color: $tooltipBgColor;
|
|
82
|
+
}
|
|
83
|
+
.romo-tooltip-popup[data-romo-tooltip-arrow-position="right"] .romo-tooltip-arrow {
|
|
84
|
+
border-right-color: $tooltipBgColor;
|
|
85
|
+
}
|
|
86
|
+
.romo-tooltip-popup[data-romo-tooltip-arrow-position="bottom"] .romo-tooltip-arrow {
|
|
87
|
+
border-bottom-color: $tooltipBgColor;
|
|
88
|
+
}
|
|
89
|
+
.romo-tooltip-popup[data-romo-tooltip-arrow-position="left"] .romo-tooltip-arrow {
|
|
90
|
+
border-left-color: $tooltipBgColor;
|
|
91
|
+
}
|
|
24
92
|
|
|
25
|
-
.romo-tooltip-arrow {
|
|
26
|
-
position: absolute;
|
|
27
|
-
width: 0;
|
|
28
|
-
height: 0;
|
|
29
|
-
border-color: transparent;
|
|
30
|
-
border-style: solid;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.romo-tooltip-popup[data-romo-tooltip-arrow-position="top"] .romo-tooltip-arrow {
|
|
34
|
-
border-width: 6px 6px 0;
|
|
35
|
-
bottom: -6px;
|
|
36
|
-
left: 50%;
|
|
37
|
-
margin-left: -6px;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.romo-tooltip-popup[data-romo-tooltip-arrow-position="right"] .romo-tooltip-arrow {
|
|
41
|
-
border-width: 6px 6px 6px 0;
|
|
42
|
-
left: -6px;
|
|
43
|
-
top: 50%;
|
|
44
|
-
margin-top: -6px;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.romo-tooltip-popup[data-romo-tooltip-arrow-position="bottom"] .romo-tooltip-arrow {
|
|
48
|
-
border-width: 0 6px 6px;
|
|
49
|
-
top: -6px;
|
|
50
|
-
left: 50%;
|
|
51
|
-
margin-left: -6px;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.romo-tooltip-popup[data-romo-tooltip-arrow-position="left"] .romo-tooltip-arrow {
|
|
55
|
-
border-width: 6px 0 6px 6px;
|
|
56
|
-
right: -6px;
|
|
57
|
-
top: 50%;
|
|
58
|
-
margin-top: -6px;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.romo-tooltip-popup[data-romo-tooltip-alignment="left"] { @include align-left; }
|
|
62
|
-
.romo-tooltip-popup[data-romo-tooltip-alignment="center"] { @include align-center; }
|
|
63
|
-
.romo-tooltip-popup[data-romo-tooltip-alignment="right"] { @include align-right; }
|
|
64
|
-
|
|
65
|
-
.romo-tooltip-body {
|
|
66
|
-
padding: 6px 8px;
|
|
67
|
-
overflow: hidden;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
/* theme */
|
|
72
|
-
|
|
73
|
-
.romo-tooltip-popup {
|
|
74
|
-
background-color: $tooltipBgColor;
|
|
75
|
-
color: $tooltipColor;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
.romo-tooltip-popup[data-romo-tooltip-arrow-position="top"] .romo-tooltip-arrow {
|
|
79
|
-
border-top-color: $tooltipBgColor;
|
|
80
|
-
}
|
|
81
|
-
.romo-tooltip-popup[data-romo-tooltip-arrow-position="right"] .romo-tooltip-arrow {
|
|
82
|
-
border-right-color: $tooltipBgColor;
|
|
83
|
-
}
|
|
84
|
-
.romo-tooltip-popup[data-romo-tooltip-arrow-position="bottom"] .romo-tooltip-arrow {
|
|
85
|
-
border-bottom-color: $tooltipBgColor;
|
|
86
|
-
}
|
|
87
|
-
.romo-tooltip-popup[data-romo-tooltip-arrow-position="left"] .romo-tooltip-arrow {
|
|
88
|
-
border-left-color: $tooltipBgColor;
|
|
89
93
|
}
|
|
@@ -1,26 +1,30 @@
|
|
|
1
1
|
@import 'css/romo/vars';
|
|
2
2
|
@import 'css/romo/mixins';
|
|
3
3
|
|
|
4
|
-
.romo
|
|
5
|
-
z-index: $tooltipZIndex;
|
|
6
|
-
}
|
|
7
|
-
.romo-tooltip-popup * {
|
|
8
|
-
z-index: inherit;
|
|
9
|
-
}
|
|
4
|
+
.romo {
|
|
10
5
|
|
|
11
|
-
.romo-
|
|
12
|
-
|
|
13
|
-
}
|
|
14
|
-
.romo-
|
|
15
|
-
|
|
16
|
-
}
|
|
6
|
+
.romo-tooltip-popup {
|
|
7
|
+
z-index: $tooltipZIndex;
|
|
8
|
+
}
|
|
9
|
+
.romo-tooltip-popup * {
|
|
10
|
+
z-index: inherit;
|
|
11
|
+
}
|
|
17
12
|
|
|
18
|
-
|
|
19
|
-
|
|
13
|
+
.romo-dropdown-popup {
|
|
14
|
+
z-index: $dropdownZIndex;
|
|
15
|
+
}
|
|
16
|
+
.romo-dropdown-popup * {
|
|
17
|
+
z-index: inherit;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
// 1300 is reserved for app specific things like nav bars, etc
|
|
21
|
+
// modals should appear on top of everything though
|
|
22
|
+
|
|
23
|
+
.romo-modal-popup {
|
|
24
|
+
z-index: $modalZIndex;
|
|
25
|
+
}
|
|
26
|
+
.romo-modal-popup * {
|
|
27
|
+
z-index: inherit;
|
|
28
|
+
}
|
|
20
29
|
|
|
21
|
-
.romo-modal-popup {
|
|
22
|
-
z-index: $modalZIndex;
|
|
23
|
-
}
|
|
24
|
-
.romo-modal-popup * {
|
|
25
|
-
z-index: inherit;
|
|
26
30
|
}
|
|
@@ -171,7 +171,10 @@ RomoSelectDropdown.prototype.doFilterOptionElems = function() {
|
|
|
171
171
|
this.optionFilter.val(),
|
|
172
172
|
this.romoDropdown.bodyElem.find('LI[data-romo-select-item="opt"]'),
|
|
173
173
|
function(elem) {
|
|
174
|
-
|
|
174
|
+
// The romo word boundary filter by default considers a space, "-" and "_" as word boundaries.
|
|
175
|
+
// We want to also consider other non-word characters (such as ":", "/", ".", "?", "=", "&")
|
|
176
|
+
// as word boundaries as well.
|
|
177
|
+
return elem[0].textContent.replace(/\W/g, ' ');
|
|
175
178
|
}
|
|
176
179
|
);
|
|
177
180
|
|
data/lib/romo/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: romo
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.19.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Kelly Redding
|
|
@@ -10,7 +10,7 @@ autorequire:
|
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
12
|
|
|
13
|
-
date: 2017-
|
|
13
|
+
date: 2017-06-19 00:00:00 Z
|
|
14
14
|
dependencies:
|
|
15
15
|
- !ruby/object:Gem::Dependency
|
|
16
16
|
name: assert
|