compass-ui 0.0.4 → 0.0.5
Sign up to get free protection for your applications and to get access to all the features.
- data/CHANGELOG.md +7 -0
- data/README.md +5 -5
- data/demos/images/kindofblue/select_arrow.gif +0 -0
- data/demos/images/kindofblue/selector.png +0 -0
- data/demos/images/kindofblue/ui-icons_222222_256x240.png +0 -0
- data/demos/images/kindofblue/ui-icons_eeeeee_256x240.png +0 -0
- data/demos/images/kindofblue/ui-icons_ffffff_256x240.png +0 -0
- data/demos/index.html +8 -6
- data/demos/js/demo.js +16 -5
- data/demos/sass/_demo.scss +33 -21
- data/demos/sass/kindofblue.scss +4 -0
- data/demos/sections/autocomplete.html +4 -2
- data/demos/sections/buttons.html +6 -0
- data/demos/sections/form.html +53 -13
- data/lib/compass-ui/version.rb +1 -1
- data/stylesheets/compass-ui/jquery-ui/_theme.scss +1 -1
- data/stylesheets/compass-ui/theme/_kindofblue.scss +204 -0
- data/stylesheets/compass-ui/theme/absolution/_progressbar.scss +1 -1
- data/stylesheets/compass-ui/theme/absolution/_slider.scss +1 -1
- data/stylesheets/compass-ui/theme/kindofblue/_accordion.scss +65 -0
- data/stylesheets/compass-ui/theme/kindofblue/_autocomplete.scss +28 -0
- data/stylesheets/compass-ui/theme/kindofblue/_color_extensions.scss +53 -0
- data/stylesheets/compass-ui/theme/kindofblue/_datepicker.scss +164 -0
- data/stylesheets/compass-ui/theme/kindofblue/_dialog.scss +90 -0
- data/stylesheets/compass-ui/theme/kindofblue/_formalize.scss +209 -0
- data/stylesheets/compass-ui/theme/kindofblue/_slider.scss +42 -0
- data/stylesheets/compass-ui/theme/kindofblue/_tabs.scss +68 -0
- data/templates/images/kindofblue/select_arrow.gif +0 -0
- data/templates/images/kindofblue/selector.png +0 -0
- data/templates/images/kindofblue/ui-icons_222222_256x240.png +0 -0
- data/templates/images/kindofblue/ui-icons_eeeeee_256x240.png +0 -0
- data/templates/images/kindofblue/ui-icons_ffffff_256x240.png +0 -0
- metadata +24 -4
|
@@ -9,6 +9,6 @@
|
|
|
9
9
|
border-color: $ui-hover-border-color;
|
|
10
10
|
@include jquery-ui-background($ui-hover-background-color, $ui-hover-background, $ui-hover-background-type);
|
|
11
11
|
}
|
|
12
|
-
@include jquery-ui-background($ui-
|
|
12
|
+
@include jquery-ui-background($ui-default-background-color, $ui-default-background, $ui-default-background-type);
|
|
13
13
|
}
|
|
14
14
|
}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
@mixin kindofblue-accordion {
|
|
2
|
+
.ui-accordion {
|
|
3
|
+
.ui-accordion-header {
|
|
4
|
+
border-color: $ui-default-border-color;
|
|
5
|
+
@include border-radius(4px);
|
|
6
|
+
|
|
7
|
+
a {
|
|
8
|
+
color: inherit;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.ui-icon {
|
|
12
|
+
margin-top: -7px;
|
|
13
|
+
width: 13px;
|
|
14
|
+
height: 13px;
|
|
15
|
+
border-width: $ui-default-border-width;
|
|
16
|
+
border-style: $ui-default-border-style;
|
|
17
|
+
border-color: $ui-default-border-color;
|
|
18
|
+
background: #ffffff image-url("#{$ui-images-url}#{$ui-icons}");
|
|
19
|
+
background-position: -34px -2px;
|
|
20
|
+
@include border-radius(3px);
|
|
21
|
+
@include single-box-shadow(rgba(0,0,0,.1), 0px, -6px, 5px, true);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.ui-accordion-content {
|
|
26
|
+
border-width: 0px;
|
|
27
|
+
@include border-radius(0px);
|
|
28
|
+
background: none;
|
|
29
|
+
margin-top: 0px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.ui-accordion-li-fix { display: inline; }
|
|
33
|
+
.ui-accordion-content-active { display: block; }
|
|
34
|
+
.ui-accordion-header-active { border-width: 0px; }
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
.ui-accordion-header.ui-state-hover .ui-icon {
|
|
38
|
+
background: $ui-hover-background-color image-url("#{$ui-images-url}#{$ui-icons-hover}");
|
|
39
|
+
background-position: -34px -2px;
|
|
40
|
+
border-width: $ui-hover-border-width;
|
|
41
|
+
border-style: $ui-hover-border-style;
|
|
42
|
+
border-color: $ui-hover-border-color;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.ui-accordion-header.ui-state-active .ui-icon,
|
|
46
|
+
.ui-accordion-header.ui-state-hover.ui-state-active .ui-icon {
|
|
47
|
+
background: $ui-hover-background-color image-url("#{$ui-images-url}#{$ui-icons-hover}");
|
|
48
|
+
background-position: -66px -1px;
|
|
49
|
+
border-width: $ui-hover-border-width;
|
|
50
|
+
border-style: $ui-hover-border-style;
|
|
51
|
+
border-color: $ui-hover-border-color;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.ui-accordion-header,
|
|
55
|
+
.ui-accordion-header.ui-state-active,
|
|
56
|
+
.ui-accordion-header.ui-state-hover,
|
|
57
|
+
.ui-accordion-header.ui-state-focus {
|
|
58
|
+
color: $ui-default-color;
|
|
59
|
+
border-color: $ui-default-border-color;
|
|
60
|
+
@include jquery-ui-background($ui-default-background-color, $ui-default-background, $ui-default-background-type);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
.ui-accordion-icons .ui-accordion-header a { padding-left: 2.6em; }
|
|
64
|
+
|
|
65
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
@mixin kindofblue-autocomplete {
|
|
2
|
+
.ui-menu {
|
|
3
|
+
padding: 5px;
|
|
4
|
+
border-color: #ffffff !important;
|
|
5
|
+
@include single-box-shadow($kob-shadow-color, 0px, 0px, 5px, false);
|
|
6
|
+
|
|
7
|
+
.ui-menu-item {
|
|
8
|
+
a {
|
|
9
|
+
&.ui-state-hover {
|
|
10
|
+
font-weight: normal;
|
|
11
|
+
margin: -1px -6px -1px -6px;
|
|
12
|
+
@include border-radius(0px);
|
|
13
|
+
padding-left: 9px;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.ui-autocomplete.ui-menu.ui-widget.ui-widget-content {
|
|
20
|
+
color: $ui-default-color;
|
|
21
|
+
border-width: $ui-default-border-width;
|
|
22
|
+
border-style: $ui-default-border-style;
|
|
23
|
+
border-color: $ui-default-border-color;
|
|
24
|
+
@include jquery-ui-background($ui-default-background-color, $ui-default-background, image);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
}
|
|
28
|
+
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
@mixin kindofblue-color-extensions {
|
|
2
|
+
.ui-state-danger,
|
|
3
|
+
a.ui-state-danger,
|
|
4
|
+
a.ui-state-danger:link,
|
|
5
|
+
.ui-widget-content .ui-state-danger,
|
|
6
|
+
.ui-widget-header .ui-state-danger {
|
|
7
|
+
border-width: $ui-default-border-width;
|
|
8
|
+
border-style: $ui-default-border-style;
|
|
9
|
+
border-color: $ui-default-border-color;
|
|
10
|
+
@include jquery-ui-background($ui-default-background-color, $ui-default-background, $ui-default-background-type);
|
|
11
|
+
font-weight: $ui-danger-font-weight;
|
|
12
|
+
|
|
13
|
+
color: $ui-danger-color;
|
|
14
|
+
|
|
15
|
+
&:hover {
|
|
16
|
+
border-width: $ui-danger-border-width;
|
|
17
|
+
border-style: $ui-danger-border-style;
|
|
18
|
+
border-color: $ui-danger-border-color;
|
|
19
|
+
@include jquery-ui-background($ui-danger-background-color, $ui-danger-background, $ui-danger-background-type);
|
|
20
|
+
font-weight: $ui-danger-font-weight;
|
|
21
|
+
color: $ui-danger-hover-color;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.ui-state-safe,
|
|
27
|
+
a.ui-state-safe,
|
|
28
|
+
a.ui-state-safe:link,
|
|
29
|
+
.ui-widget-content .ui-state-safe,
|
|
30
|
+
.ui-widget-header .ui-state-safe {
|
|
31
|
+
border-width: $ui-default-border-width;
|
|
32
|
+
border-style: $ui-default-border-style;
|
|
33
|
+
border-color: $ui-default-border-color;
|
|
34
|
+
@include jquery-ui-background($ui-default-background-color, $ui-default-background, $ui-default-background-type);
|
|
35
|
+
font-weight: $ui-safe-font-weight;
|
|
36
|
+
|
|
37
|
+
color: $ui-safe-color;
|
|
38
|
+
|
|
39
|
+
&:hover {
|
|
40
|
+
border-width: $ui-safe-border-width;
|
|
41
|
+
border-style: $ui-safe-border-style;
|
|
42
|
+
border-color: $ui-safe-border-color;
|
|
43
|
+
@include jquery-ui-background($ui-safe-background-color, $ui-safe-background, $ui-safe-background-type);
|
|
44
|
+
font-weight: $ui-safe-font-weight;
|
|
45
|
+
color: $ui-safe-hover-color;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.ui-large {
|
|
51
|
+
font-size: 2.0em;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
@mixin kindofblue-datepicker {
|
|
2
|
+
.ui-datepicker {
|
|
3
|
+
border-color: #ffffff;
|
|
4
|
+
@include single-box-shadow(#282425, 0px, 0px, 5px, false);
|
|
5
|
+
|
|
6
|
+
.ui-datepicker-header {
|
|
7
|
+
padding: 0.5em 0.2em;
|
|
8
|
+
@include border-radius(0px);
|
|
9
|
+
border-width: 0px;
|
|
10
|
+
border-bottom: $ui-titlebar-bottom-border-width solid $ui-titlebar-bottom-border-color;
|
|
11
|
+
background: none;
|
|
12
|
+
color: $ui-titlebar-color;
|
|
13
|
+
font-weight: bold;
|
|
14
|
+
|
|
15
|
+
.ui-icon {
|
|
16
|
+
background-image: image-url("#{$ui-images-url}#{$ui-icons}");
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.ui-datepicker-prev,
|
|
21
|
+
.ui-datepicker-next {
|
|
22
|
+
top: 4px;
|
|
23
|
+
border-width: 1px;
|
|
24
|
+
border-style: solid;
|
|
25
|
+
border-color: $ui-default-border-color;
|
|
26
|
+
cursor: pointer;
|
|
27
|
+
color: #ffffff;
|
|
28
|
+
&:hover {
|
|
29
|
+
color: $ui-hover-color;
|
|
30
|
+
border-width: $ui-hover-border-width;
|
|
31
|
+
border-style: $ui-hover-border-style;
|
|
32
|
+
border-color: $ui-hover-border-color;
|
|
33
|
+
@include jquery-ui-background($ui-hover-background-color, $ui-hover-background, image);
|
|
34
|
+
.ui-icon {
|
|
35
|
+
background-image: image-url("#{$ui-images-url}#{$ui-icons-hover}");
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
&:active {
|
|
39
|
+
color: $ui-active-color;
|
|
40
|
+
border-color: $ui-active-border-color;
|
|
41
|
+
@include jquery-ui-background($ui-active-background-color, $ui-active-background, image);
|
|
42
|
+
.ui-icon {
|
|
43
|
+
background-image: image-url("#{$ui-images-url}#{$ui-icons-hover}");
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.ui-datepicker-prev .ui-icon {
|
|
49
|
+
background-position: -96px 0;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.ui-datepicker-next .ui-icon {
|
|
53
|
+
background-position: -32px 0;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
table {
|
|
57
|
+
.ui-state-default,
|
|
58
|
+
.ui-widget-content .ui-state-default,
|
|
59
|
+
.ui-widget-header .ui-state-default {
|
|
60
|
+
border: 1px solid #eeeeee;
|
|
61
|
+
background: none;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.ui-state-highlight,
|
|
65
|
+
.ui-widget-content .ui-state-highlight,
|
|
66
|
+
.ui-widget-header .ui-state-highlight {
|
|
67
|
+
border-color: $ui-highlight-border-color;
|
|
68
|
+
@include border-radius(5px);
|
|
69
|
+
color: $ui-highlight-color;
|
|
70
|
+
@include jquery-ui-background($ui-highlight-background-color, $ui-highlight-background, image);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.ui-state-focus,
|
|
74
|
+
.ui-widget-content .ui-state-focus,
|
|
75
|
+
.ui-widget-header .ui-state-focus {
|
|
76
|
+
border-color: $ui-default-border-color;
|
|
77
|
+
@include border-radius(5px);
|
|
78
|
+
color: $ui-default-color;
|
|
79
|
+
@include jquery-ui-background($ui-default-background-color, $ui-default-background, image);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.ui-state-hover,
|
|
83
|
+
.ui-widget-content .ui-state-hover,
|
|
84
|
+
.ui-widget-header .ui-state-hover {
|
|
85
|
+
border-color: $ui-hover-border-color;
|
|
86
|
+
@include border-radius(5px);
|
|
87
|
+
color: $ui-hover-color;
|
|
88
|
+
@include jquery-ui-background($ui-default-background-color, $ui-hover-background, image);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.ui-state-active,
|
|
92
|
+
.ui-widget-content .ui-state-active,
|
|
93
|
+
.ui-widget-header .ui-state-active {
|
|
94
|
+
border-color: $ui-active-border-color;
|
|
95
|
+
@include border-radius(5px);
|
|
96
|
+
color: $ui-active-color;
|
|
97
|
+
@include jquery-ui-background($ui-default-background-color, $ui-active-background, image);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
.ui-datepicker-prev, .ui-datepicker-prev:hover { left: 4px; }
|
|
104
|
+
.ui-datepicker-next, .ui-datepicker-next:hover { right: 4px; }
|
|
105
|
+
.ui-datepicker-prev span, .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; }
|
|
106
|
+
.ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; font-weight: normal; }
|
|
107
|
+
.ui-datepicker-title select { font-size:1em; margin:1px 0; }
|
|
108
|
+
select.ui-datepicker-month-year {width: 100%;}
|
|
109
|
+
select.ui-datepicker-month,
|
|
110
|
+
select.ui-datepicker-year { width: 49%;}
|
|
111
|
+
table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
|
|
112
|
+
th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; }
|
|
113
|
+
td { border: 0; padding: 0px; }
|
|
114
|
+
td span, td a { display: block; padding: .6em; text-align: center; text-decoration: none; }
|
|
115
|
+
.ui-datepicker-buttonpane { margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
|
|
116
|
+
.ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
|
|
117
|
+
.ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }
|
|
118
|
+
|
|
119
|
+
.ui-datepicker-buttonpane {
|
|
120
|
+
@include clearfix;
|
|
121
|
+
background: $kob-buttonpane-background-color;
|
|
122
|
+
@include border-bottom-radius(5px);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
/* with multiple calendars */
|
|
128
|
+
.ui-datepicker.ui-datepicker-multi { width:auto; }
|
|
129
|
+
.ui-datepicker-multi .ui-datepicker-group { float:left; }
|
|
130
|
+
.ui-datepicker-multi .ui-datepicker-group table { width:100%; margin:0 auto .4em; }
|
|
131
|
+
.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
|
|
132
|
+
.ui-datepicker-multi-3 .ui-datepicker-group { width:33.4%; }
|
|
133
|
+
.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
|
|
134
|
+
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
|
|
135
|
+
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
|
|
136
|
+
.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
|
|
137
|
+
.ui-datepicker-row-break { clear:both; width:100%; }
|
|
138
|
+
|
|
139
|
+
/* RTL support */
|
|
140
|
+
.ui-datepicker-rtl { direction: rtl; }
|
|
141
|
+
.ui-datepicker-rtl .ui-datepicker-prev { right: 4px; left: auto; }
|
|
142
|
+
.ui-datepicker-rtl .ui-datepicker-next { left: 4px; right: auto; }
|
|
143
|
+
.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 4px; left: auto; }
|
|
144
|
+
.ui-datepicker-rtl .ui-datepicker-next:hover { left: 4px; right: auto; }
|
|
145
|
+
.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; }
|
|
146
|
+
.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }
|
|
147
|
+
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; }
|
|
148
|
+
.ui-datepicker-rtl .ui-datepicker-group { float:right; }
|
|
149
|
+
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
|
|
150
|
+
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
|
|
151
|
+
|
|
152
|
+
/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
|
|
153
|
+
.ui-datepicker-cover {
|
|
154
|
+
position: absolute; /*must have*/
|
|
155
|
+
z-index: -1; /*must have*/
|
|
156
|
+
filter: mask(); /*must have*/
|
|
157
|
+
top: -4px; /*must have*/
|
|
158
|
+
left: -4px; /*must have*/
|
|
159
|
+
width: 200px; /*must have*/
|
|
160
|
+
height: 200px; /*must have*/
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
}
|
|
164
|
+
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
@mixin kindofblue-dialog {
|
|
2
|
+
.ui-dialog {
|
|
3
|
+
border-color: #ffffff;
|
|
4
|
+
@include single-box-shadow($ui-shadow-background-color);
|
|
5
|
+
|
|
6
|
+
.ui-dialog-titlebar-close {
|
|
7
|
+
right: .6em;
|
|
8
|
+
border-width: 1px;
|
|
9
|
+
border-style: solid;
|
|
10
|
+
border-color: #cccccc;
|
|
11
|
+
padding: 0px;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.ui-dialog-content {
|
|
15
|
+
padding: 1em;
|
|
16
|
+
|
|
17
|
+
.ui-tabs {
|
|
18
|
+
margin: -1em;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
hr {
|
|
22
|
+
margin: 1em -1em 1em -1em;
|
|
23
|
+
border: 0px;
|
|
24
|
+
border-top: 1px solid #c1c1c1 !important;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.ui-dialog-buttonpane {
|
|
30
|
+
background: $kob-buttonpane-background-color;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.ui-dialog-titlebar {
|
|
34
|
+
padding: .5em 1em .3em;
|
|
35
|
+
position: relative;
|
|
36
|
+
@include border-bottom-radius(0px);
|
|
37
|
+
border: 0px;
|
|
38
|
+
border-bottom: $ui-titlebar-bottom-border-width solid $ui-titlebar-bottom-border-color;
|
|
39
|
+
font-size: 1.5em;
|
|
40
|
+
font-weight: bold;
|
|
41
|
+
background: none;
|
|
42
|
+
color: $ui-titlebar-color;
|
|
43
|
+
|
|
44
|
+
.ui-dialog-titlebar-close {
|
|
45
|
+
background: none;
|
|
46
|
+
color: $ui-titlebar-color;
|
|
47
|
+
|
|
48
|
+
.ui-icon {
|
|
49
|
+
background-image: image-url("#{$ui-images-url}#{$ui-icons}");
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
&.ui-state-active {
|
|
53
|
+
padding: 0px;
|
|
54
|
+
color: $ui-active-color;
|
|
55
|
+
border-width: $ui-active-border-width;
|
|
56
|
+
border-style: $ui-active-border-style;
|
|
57
|
+
border-color: $ui-active-border-color;
|
|
58
|
+
@include jquery-ui-background($ui-active-background-color, $ui-active-background, $ui-active-background-type);
|
|
59
|
+
.ui-icon {
|
|
60
|
+
background-image: image-url("#{$ui-images-url}#{$ui-icons-hover}");
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
&.ui-state-hover {
|
|
65
|
+
color: $ui-hover-color;
|
|
66
|
+
border-width: $ui-hover-border-width;
|
|
67
|
+
border-style: $ui-hover-border-style;
|
|
68
|
+
border-color: $ui-hover-border-color;
|
|
69
|
+
@include jquery-ui-background($ui-hover-background-color, $ui-hover-background, $ui-hover-background-type);
|
|
70
|
+
.ui-icon {
|
|
71
|
+
background-image: image-url("#{$ui-images-url}#{$ui-icons-hover}");
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.ui-resizable-se {
|
|
78
|
+
width: 14px;
|
|
79
|
+
height: 14px;
|
|
80
|
+
right: 1px;
|
|
81
|
+
bottom: 1px;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.ui-icon-grip-diagonal-se {
|
|
85
|
+
background-position: -64px - 224px;
|
|
86
|
+
display: none;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
@@ -0,0 +1,209 @@
|
|
|
1
|
+
// The following styles were taken from Formalize by Nathan Smith
|
|
2
|
+
// URL: http://formalize.me
|
|
3
|
+
@mixin kindofblue-formalize {
|
|
4
|
+
.ui-form {
|
|
5
|
+
input,
|
|
6
|
+
select,
|
|
7
|
+
textarea {
|
|
8
|
+
margin: 0;
|
|
9
|
+
vertical-align: middle;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
input.ui-button {
|
|
13
|
+
vertical-align: top;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
input[type="radio"],
|
|
17
|
+
input[type="checkbox"] {
|
|
18
|
+
position: relative;
|
|
19
|
+
vertical-align: top;
|
|
20
|
+
top: 3px;
|
|
21
|
+
// IE8, IE9, IE10
|
|
22
|
+
top: 0 \0;
|
|
23
|
+
// IE7
|
|
24
|
+
*top: -3px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
// iPad
|
|
28
|
+
@media (-webkit-min-device-pixel-ratio: 1) and (max-device-width: 1024px) {
|
|
29
|
+
input[type="radio"],
|
|
30
|
+
input[type="checkbox"] {
|
|
31
|
+
vertical-align: baseline;
|
|
32
|
+
top: 2px; } }
|
|
33
|
+
|
|
34
|
+
// iPhone 3
|
|
35
|
+
@media (-webkit-min-device-pixel-ratio: 1) and (max-device-width: 480px) {
|
|
36
|
+
input[type="radio"],
|
|
37
|
+
input[type="checkbox"] {
|
|
38
|
+
vertical-align: baseline;
|
|
39
|
+
top: 0; } }
|
|
40
|
+
|
|
41
|
+
// iPhone 4
|
|
42
|
+
@media (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 480px) {
|
|
43
|
+
input[type="radio"],
|
|
44
|
+
input[type="checkbox"] {
|
|
45
|
+
vertical-align: baseline;
|
|
46
|
+
top: 0; } }
|
|
47
|
+
textarea,
|
|
48
|
+
select,
|
|
49
|
+
input[type="date"],
|
|
50
|
+
input[type="datetime"],
|
|
51
|
+
input[type="datetime-local"],
|
|
52
|
+
input[type="email"],
|
|
53
|
+
input[type="month"],
|
|
54
|
+
input[type="number"],
|
|
55
|
+
input[type="password"],
|
|
56
|
+
input[type="search"],
|
|
57
|
+
input[type="tel"],
|
|
58
|
+
input[type="text"],
|
|
59
|
+
input[type="time"],
|
|
60
|
+
input[type="url"],
|
|
61
|
+
input[type="week"] {
|
|
62
|
+
-webkit-appearance: none;
|
|
63
|
+
-moz-border-radius: 0;
|
|
64
|
+
-webkit-border-radius: 0;
|
|
65
|
+
border-radius: 0;
|
|
66
|
+
-webkit-box-sizing: border-box;
|
|
67
|
+
-moz-box-sizing: border-box;
|
|
68
|
+
box-sizing: border-box;
|
|
69
|
+
-moz-background-clip: padding;
|
|
70
|
+
-webkit-background-clip: padding;
|
|
71
|
+
background-clip: padding-box;
|
|
72
|
+
background-color: white;
|
|
73
|
+
border: 1px solid;
|
|
74
|
+
border-color: #848484 #c1c1c1 #e1e1e1;
|
|
75
|
+
color: black;
|
|
76
|
+
outline: 0;
|
|
77
|
+
padding: 2px 3px;
|
|
78
|
+
font-size: 13px;
|
|
79
|
+
// Leaving out Helvetica Neue, to not throw off size="..."
|
|
80
|
+
// on inputs. Arial is more reliable, on Windows and OS X.
|
|
81
|
+
font-family: Arial, "Liberation Sans", FreeSans, sans-serif;
|
|
82
|
+
height: 1.8em;
|
|
83
|
+
// IE7
|
|
84
|
+
*padding-top: 2px;
|
|
85
|
+
*padding-bottom: 1px;
|
|
86
|
+
*height: auto; }
|
|
87
|
+
|
|
88
|
+
// Separate rule for Firefox.
|
|
89
|
+
// Separate rule for IE, too.
|
|
90
|
+
// Cannot stack with WebKit's.
|
|
91
|
+
::-webkit-input-placeholder {
|
|
92
|
+
color: #888888; }
|
|
93
|
+
|
|
94
|
+
input:-moz-placeholder,
|
|
95
|
+
textarea:-moz-placeholder {
|
|
96
|
+
color: #888888; }
|
|
97
|
+
|
|
98
|
+
input.placeholder-text,
|
|
99
|
+
textarea.placeholder-text {
|
|
100
|
+
color: #888888; }
|
|
101
|
+
|
|
102
|
+
:invalid {
|
|
103
|
+
// Suppress red glow that Firefox
|
|
104
|
+
// adds to form fields by default,
|
|
105
|
+
// even when user is still typing.
|
|
106
|
+
-moz-box-shadow: none;
|
|
107
|
+
-webkit-box-shadow: none;
|
|
108
|
+
box-shadow: none; }
|
|
109
|
+
|
|
110
|
+
button:focus,
|
|
111
|
+
button:active,
|
|
112
|
+
input:focus,
|
|
113
|
+
input:active,
|
|
114
|
+
select:focus,
|
|
115
|
+
select:active,
|
|
116
|
+
textarea:focus,
|
|
117
|
+
textarea:active {
|
|
118
|
+
@include single-box-shadow($kob-blue-medium, 0, 0, 7px);
|
|
119
|
+
z-index: 1; }
|
|
120
|
+
|
|
121
|
+
input[type="file"]:focus,
|
|
122
|
+
input[type="file"]:active,
|
|
123
|
+
input[type="radio"]:focus,
|
|
124
|
+
input[type="radio"]:active,
|
|
125
|
+
input[type="checkbox"]:focus,
|
|
126
|
+
input[type="checkbox"]:active {
|
|
127
|
+
-moz-box-shadow: none;
|
|
128
|
+
-webkit-box-shadow: none;
|
|
129
|
+
box-shadow: none; }
|
|
130
|
+
|
|
131
|
+
select[disabled],
|
|
132
|
+
textarea[disabled],
|
|
133
|
+
input[type="date"][disabled],
|
|
134
|
+
input[type="datetime"][disabled],
|
|
135
|
+
input[type="datetime-local"][disabled],
|
|
136
|
+
input[type="email"][disabled],
|
|
137
|
+
input[type="month"][disabled],
|
|
138
|
+
input[type="number"][disabled],
|
|
139
|
+
input[type="password"][disabled],
|
|
140
|
+
input[type="search"][disabled],
|
|
141
|
+
input[type="tel"][disabled],
|
|
142
|
+
input[type="text"][disabled],
|
|
143
|
+
input[type="time"][disabled],
|
|
144
|
+
input[type="url"][disabled],
|
|
145
|
+
input[type="week"][disabled] {
|
|
146
|
+
background-color: #eeeeee; }
|
|
147
|
+
|
|
148
|
+
button[disabled],
|
|
149
|
+
input[disabled],
|
|
150
|
+
select[disabled],
|
|
151
|
+
select[disabled] option,
|
|
152
|
+
select[disabled] optgroup,
|
|
153
|
+
textarea[disabled] {
|
|
154
|
+
-moz-box-shadow: none;
|
|
155
|
+
-webkit-box-shadow: none;
|
|
156
|
+
box-shadow: none;
|
|
157
|
+
-webkit-user-select: none;
|
|
158
|
+
-moz-user-select: none;
|
|
159
|
+
user-select: none;
|
|
160
|
+
color: #888888;
|
|
161
|
+
cursor: default; }
|
|
162
|
+
|
|
163
|
+
textarea,
|
|
164
|
+
select[size],
|
|
165
|
+
select[multiple] {
|
|
166
|
+
height: auto; }
|
|
167
|
+
|
|
168
|
+
// Tweaks for Safari + Chrome.
|
|
169
|
+
@media (-webkit-min-device-pixel-ratio: 0) {
|
|
170
|
+
select {
|
|
171
|
+
background-image: image-url("#{$ui-images-url}select_arrow.gif");
|
|
172
|
+
background-repeat: no-repeat;
|
|
173
|
+
background-position: right center;
|
|
174
|
+
padding-right: 20px; }
|
|
175
|
+
select[size],
|
|
176
|
+
select[multiple] {
|
|
177
|
+
background-image: none;
|
|
178
|
+
padding: 0; }
|
|
179
|
+
::-webkit-validation-bubble-message {
|
|
180
|
+
box-shadow: rgba(0, 0, 0, 0.5) 0 0 5px;
|
|
181
|
+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666666), color-stop(1, black));
|
|
182
|
+
border: 1px solid;
|
|
183
|
+
border-color: #747474 #5e5e5e #4f4f4f;
|
|
184
|
+
color: white;
|
|
185
|
+
font: 13px / 17px "Lucida Grande", Arial, "Liberation Sans", FreeSans, sans-serif;
|
|
186
|
+
overflow: hidden;
|
|
187
|
+
padding: 15px 15px 17px;
|
|
188
|
+
text-shadow: black 0 0 1px;
|
|
189
|
+
height: 16px; }
|
|
190
|
+
::-webkit-validation-bubble-arrow,
|
|
191
|
+
::-webkit-validation-bubble-top-outer-arrow,
|
|
192
|
+
::-webkit-validation-bubble-top-inner-arrow {
|
|
193
|
+
-webkit-box-shadow: none;
|
|
194
|
+
box-shadow: none;
|
|
195
|
+
background: #666666;
|
|
196
|
+
border: 0; } }
|
|
197
|
+
|
|
198
|
+
textarea {
|
|
199
|
+
min-height: 40px;
|
|
200
|
+
overflow: auto;
|
|
201
|
+
resize: vertical;
|
|
202
|
+
width: 100%; }
|
|
203
|
+
|
|
204
|
+
optgroup {
|
|
205
|
+
color: black;
|
|
206
|
+
font-style: normal;
|
|
207
|
+
font-weight: normal; }
|
|
208
|
+
}
|
|
209
|
+
}
|