Skip to content

Commit 3c41c32

Browse files
seurosseuros
committed
Merge pull request #330 from stim371/fancy_tags_fix
Add scss files for selectize, since the rubygem only includes less
2 parents 51c5b81 + 8222e43 commit 3c41c32

File tree

4 files changed

+539
-0
lines changed

4 files changed

+539
-0
lines changed

‎app/assets/stylesheets/protip.css.scss

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
@import "base";
22
@import "compass/css3";
3+
@import "selectize/selectize";
4+
@import "selectize/selectize.default";
35

46
.tip-content-show {
57
strong {

‎vendor/assets/stylesheets/selectize/selectize.bootstrap3.scss

+133
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
@import 'selectize';
2+
3+
$selectize-font-family: $font-family-base;
4+
$selectize-font-size: $font-size-base;
5+
$selectize-line-height: $line-height-computed;
6+
7+
$selectize-color-text: $text-color;
8+
$selectize-color-highlight: rgba(255, 237, 40, .4);
9+
$selectize-color-input: $input-bg;
10+
$selectize-color-input-full: $input-bg;
11+
$selectize-color-disabled: $input-bg;
12+
$selectize-color-item: #efefef;
13+
$selectize-color-item-border: rgba(0, 0, 0, 0);
14+
$selectize-color-item-active: $component-active-bg;
15+
$selectize-color-item-active-text: #fff;
16+
$selectize-color-item-active-border: rgba(0, 0, 0, 0);
17+
$selectize-color-optgroup: $dropdown-bg;
18+
$selectize-color-optgroup-text: $dropdown-header-color;
19+
$selectize-color-optgroup-border: $dropdown-divider-bg;
20+
$selectize-color-dropdown: $dropdown-bg;
21+
$selectize-color-dropdown-border-top: mix($input-border, $input-bg, .8);
22+
$selectize-color-dropdown-item-active: $dropdown-link-hover-bg;
23+
$selectize-color-dropdown-item-active-text: $dropdown-link-hover-color;
24+
$selectize-color-dropdown-item-create-active-text: $dropdown-link-hover-color;
25+
$selectize-opacity-disabled: .5;
26+
$selectize-shadow-input: none;
27+
$selectize-shadow-input-focus: inset 0 1px 2px rgba(0, 0, 0, .15);
28+
$selectize-border: 1px solid $input-border;
29+
$selectize-border-radius: $input-border-radius;
30+
31+
$selectize-width-item-border: 0;
32+
$selectize-padding-x: $padding-base-horizontal;
33+
$selectize-padding-y: $padding-base-vertical;
34+
$selectize-padding-dropdown-item-x: $padding-base-horizontal;
35+
$selectize-padding-dropdown-item-y: 3px;
36+
$selectize-padding-item-x: 3px;
37+
$selectize-padding-item-y: 1px;
38+
$selectize-margin-item-x: 3px;
39+
$selectize-margin-item-y: 3px;
40+
$selectize-caret-margin: 0;
41+
42+
$selectize-arrow-size: 5px;
43+
$selectize-arrow-color: $selectize-color-text;
44+
$selectize-arrow-offset: $selectize-padding-x + 5px;
45+
46+
.selectize-dropdown,
47+
.selectize-dropdown.form-control {
48+
height: auto;
49+
padding: 0;
50+
margin: 2px 0 0 0;
51+
z-index: $zindex-dropdown;
52+
background: $selectize-color-dropdown;
53+
border: 1px solid $dropdown-fallback-border;
54+
border: 1px solid $dropdown-border;
55+
@include selectize-border-radius($border-radius-base);
56+
@include selectize-box-shadow(0 6px 12px rgba(0, 0, 0, .175));
57+
}
58+
59+
.selectize-dropdown {
60+
61+
.optgroup-header {
62+
font-size: $font-size-small;
63+
line-height: $line-height-base;
64+
}
65+
66+
.optgroup:first-child:before {
67+
display: none;
68+
}
69+
70+
.optgroup:before {
71+
content: ' ';
72+
display: block;
73+
margin-left: $selectize-padding-dropdown-item-x * -1;
74+
margin-right: $selectize-padding-dropdown-item-x * -1;
75+
@include nav-divider;
76+
}
77+
78+
}
79+
80+
.selectize-dropdown-content {
81+
padding: 5px 0;
82+
}
83+
84+
.selectize-dropdown-header {
85+
padding: $selectize-padding-dropdown-item-y * 2 $selectize-padding-dropdown-item-x;
86+
}
87+
88+
.selectize-input {
89+
min-height: $input-height-base;
90+
91+
&.dropdown-active {
92+
@include selectize-border-radius($selectize-border-radius);
93+
}
94+
95+
&.dropdown-active:before {
96+
display: none;
97+
}
98+
99+
&.focus {
100+
$color: $input-border-focus;
101+
$color-rgba: rgba(red($color), green($color), blue($color), .6);
102+
border-color: $color;
103+
outline: 0;
104+
@include selectize-box-shadow(#{inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba});
105+
}
106+
107+
}
108+
109+
.selectize-control {
110+
111+
&.multi {
112+
113+
.selectize-input.has-items {
114+
padding-left: $selectize-padding-x - $selectize-padding-item-x;
115+
padding-right: $selectize-padding-x - $selectize-padding-item-x;
116+
}
117+
118+
.selectize-input > div {
119+
@include selectize-border-radius($selectize-border-radius - 1px);
120+
}
121+
122+
}
123+
124+
}
125+
126+
.form-control.selectize-control {
127+
padding: 0;
128+
height: auto;
129+
border: none;
130+
background: none;
131+
@include selectize-box-shadow(none);
132+
@include selectize-border-radius(0);
133+
}

‎vendor/assets/stylesheets/selectize/selectize.default.scss

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
@import 'selectize';
2+
3+
$selectize-color-item: #1da7ee;
4+
$selectize-color-item-text: #fff;
5+
$selectize-color-item-active-text: #fff;
6+
$selectize-color-item-border: #0073bb;
7+
$selectize-color-item-active: #92c836;
8+
$selectize-color-item-active-border: #00578d;
9+
$selectize-width-item-border: 1px;
10+
$selectize-caret-margin: 0 1px;
11+
12+
.selectize-control {
13+
14+
&.multi {
15+
16+
.selectize-input {
17+
18+
&.has-items {
19+
$padding-x: $selectize-padding-x - 3px;
20+
padding-left: $padding-x;
21+
padding-right: $padding-x;
22+
}
23+
24+
&.disabled [data-value] {
25+
color: #999;
26+
text-shadow: none;
27+
background: none;
28+
@include selectize-box-shadow(none);
29+
30+
&,
31+
.remove {
32+
border-color: #e6e6e6;
33+
}
34+
35+
.remove {
36+
background: none;
37+
}
38+
39+
}
40+
[data-value] {
41+
text-shadow: 0 1px 0 rgba(0, 51, 83, .3);
42+
@include selectize-border-radius(3px);
43+
@include selectize-vertical-gradient(#1da7ee, #178ee9);
44+
@include selectize-box-shadow(#{0 1px 0 rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .03)});
45+
46+
&.active {
47+
@include selectize-vertical-gradient(#008fd8, #0075cf);
48+
}
49+
50+
}
51+
52+
}
53+
54+
}
55+
56+
&.single {
57+
58+
.selectize-input {
59+
@include selectize-box-shadow(#{0 1px 0 rgba(0, 0, 0, .05), inset 0 1px 0 rgba(255, 255, 255, .8)});
60+
@include selectize-vertical-gradient(#fefefe, #f2f2f2);
61+
}
62+
63+
}
64+
65+
}
66+
67+
.selectize-control.single .selectize-input,
68+
.selectize-dropdown.single {
69+
border-color: #b8b8b8;
70+
}
71+
72+
.selectize-dropdown {
73+
74+
.optgroup-header {
75+
padding-top: $selectize-padding-dropdown-item-y + 2px;
76+
font-weight: bold;
77+
font-size: .85em;
78+
}
79+
80+
.optgroup {
81+
border-top: 1px solid $selectize-color-dropdown-border-top;
82+
83+
&:first-child {
84+
border-top: 0 none;
85+
}
86+
87+
}
88+
89+
}

0 commit comments

Comments
 (0)