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
data/CHANGELOG.md
CHANGED
@@ -1,5 +1,12 @@
|
|
1
1
|
# Compass-UI Changelog
|
2
2
|
|
3
|
+
### v0.0.5
|
4
|
+
|
5
|
+
- Fixed Date.now error in IE for demos
|
6
|
+
- Added Kind of Blue Theme
|
7
|
+
- Fixed background on absolution progressbar and focus on absolution slider
|
8
|
+
- Created gh-pages branch
|
9
|
+
|
3
10
|
### v0.0.4
|
4
11
|
|
5
12
|
- Equating smoothness with jquery-ui-base theme when installing icons
|
data/README.md
CHANGED
@@ -44,15 +44,15 @@ $ compass-ui install smoothness -d "app/assets/images"
|
|
44
44
|
|
45
45
|
## Existing Themes
|
46
46
|
|
47
|
-
* jQuery UI - Base Theme (
|
47
|
+
* jQuery UI - Base Theme (`@import "compass-ui/theme/jquery-ui-base"`): The base theme from which all others are derived.
|
48
48
|
|
49
|
-
*
|
49
|
+
* Kind of Blue Theme (`@import "compass-ui/theme/kindofblue"`): A simple theme I created that was inspired by Absolution and currently in use for one of my projects. Little IE support.
|
50
50
|
|
51
|
-
|
51
|
+
* Absolution Theme (`@import "compass-ui/theme/absolution"`): I've ported [Michaël Vanderheeren's][mvan] wonderful [Absolution Theme](https://github.com/michaelvanderheeren/Absolution) over to Compass/Sass as a proof-of-concept. However, please follow him if you'd like to keep up with his improvements on that theme.
|
52
52
|
|
53
|
-
* Smoothness Theme - the jQuery UI plain gem in just a few lines.
|
53
|
+
* Smoothness Theme (`@import "compass-ui/theme/smoothness`"): the jQuery UI plain gem in just a few lines.
|
54
54
|
|
55
|
-
* Dot Luv Theme - the gaudy Dot Luv theme as a proof-of-concept, by just changing default variables and adding background images.
|
55
|
+
* Dot Luv Theme (`@import "compass-ui/theme/dot-luv"`): the gaudy Dot Luv theme as a proof-of-concept, by just changing default variables and adding background images.
|
56
56
|
|
57
57
|
## Creating a New Theme
|
58
58
|
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
data/demos/index.html
CHANGED
@@ -6,12 +6,12 @@
|
|
6
6
|
<meta http-equiv="Cache-Control" content="no-cache" />
|
7
7
|
|
8
8
|
<title>Compass-UI</title>
|
9
|
-
<link type="text/css" href="stylesheets/default.css" rel="stylesheet" />
|
9
|
+
<link type="text/css" href="stylesheets/default.css" rel="stylesheet" id="theme" />
|
10
10
|
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
|
11
11
|
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
|
12
12
|
<script type="text/javascript" src="js/demo.js"></script>
|
13
13
|
</head>
|
14
|
-
<body class="ui-form">
|
14
|
+
<body class="ui-form formalize">
|
15
15
|
<div id="container">
|
16
16
|
<div id="header">
|
17
17
|
<h1>Compass-UI Theme Tests</h1>
|
@@ -23,9 +23,11 @@
|
|
23
23
|
</h2>
|
24
24
|
|
25
25
|
<div id="toggle-css">
|
26
|
-
<
|
26
|
+
<h3>Choose a Theme to Test:</h3>
|
27
27
|
<a href="#" rel="stylesheets/default.css"
|
28
28
|
data-summary="The jQuery UI Base Theme from Compass-UI">jQuery Base Theme</a>
|
29
|
+
<a href="#" rel="stylesheets/kindofblue.css"
|
30
|
+
data-summary="The Original Kind of Blue Theme developed with Compass-UI">Kind of Blue Theme</a>
|
29
31
|
<a href="#" rel="stylesheets/absolution.css"
|
30
32
|
data-summary="The Absolution Theme from Michaël Vanderheeren">Absolution Theme</a>
|
31
33
|
<a href="#" rel="stylesheets/smoothness.css"
|
@@ -36,10 +38,10 @@
|
|
36
38
|
data-summary="An external color test to demonstrate working with Compass-UI outside the gem itself">Color Test</a>
|
37
39
|
</div>
|
38
40
|
|
39
|
-
<
|
40
|
-
<
|
41
|
+
<div>
|
42
|
+
<h3>Resources:</h3>
|
41
43
|
<a href="https://github.com/patrickward/compass-ui">Github Project</a>
|
42
|
-
</
|
44
|
+
</div>
|
43
45
|
|
44
46
|
</div>
|
45
47
|
<div id="content">
|
data/demos/js/demo.js
CHANGED
@@ -130,6 +130,9 @@ $(function(){
|
|
130
130
|
}
|
131
131
|
});
|
132
132
|
|
133
|
+
// Color buttons
|
134
|
+
$("#dangerButton, #safeButton").button();
|
135
|
+
|
133
136
|
// Button Set
|
134
137
|
$("#radio1").buttonset();
|
135
138
|
|
@@ -163,9 +166,16 @@ $(function(){
|
|
163
166
|
$('#tabs2').tabs();
|
164
167
|
$("#accordion2").accordion({ header: "h4" });
|
165
168
|
// Nested button tests
|
166
|
-
$("#nestedButtonTest_1, #nestedButtonTest_2, #buttonInModal")
|
167
|
-
|
168
|
-
|
169
|
+
$("#nestedButtonTest_1, #nestedButtonTest_2, #buttonInModal")
|
170
|
+
.button().click(function(e) {
|
171
|
+
e.preventDefault();
|
172
|
+
});
|
173
|
+
break;
|
174
|
+
// ---------------------------
|
175
|
+
// Combinations
|
176
|
+
// ---------------------------
|
177
|
+
case 'demo-form':
|
178
|
+
$('.format-ui-button').button();
|
169
179
|
break;
|
170
180
|
default:
|
171
181
|
// code
|
@@ -173,12 +183,13 @@ $(function(){
|
|
173
183
|
|
174
184
|
}
|
175
185
|
|
176
|
-
//
|
186
|
+
// Handle Style Switching
|
177
187
|
$('#toggle-css a').click(function() {
|
178
188
|
var name = $(this).html();
|
179
189
|
var summary = $(this).attr('data-summary');
|
180
190
|
summary = name + '<br><span class="summary">' + summary + '</span>';
|
181
|
-
$('link[rel=stylesheet]').attr({href: $(this).attr('rel') + '?' + Date.now() });
|
191
|
+
// $('link[rel=stylesheet]').attr({href: $(this).attr('rel') + '?' + Date.now() });
|
192
|
+
$('link[id="theme"]').attr({href: $(this).attr('rel') + '?' + Number(new Date()) });
|
182
193
|
$('h2#showing span')
|
183
194
|
.fadeOut('slow', function() {
|
184
195
|
$(this)
|
data/demos/sass/_demo.scss
CHANGED
@@ -15,7 +15,6 @@ body{
|
|
15
15
|
// font: 100% "Trebuchet MS", Helvetica, sans-serif;
|
16
16
|
}
|
17
17
|
|
18
|
-
|
19
18
|
#container {
|
20
19
|
// @include container;
|
21
20
|
margin: 20px auto;
|
@@ -74,10 +73,35 @@ body{
|
|
74
73
|
font-size: 1.5em;
|
75
74
|
padding: 0.9em 0.7em;
|
76
75
|
}
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
76
|
+
|
77
|
+
h2#showing {
|
78
|
+
@include border-radius(5px);
|
79
|
+
background-color: $test-green;
|
80
|
+
@include background-image(linear-gradient($test-green-medium, $test-green));
|
81
|
+
color: $test-green-dark;
|
82
|
+
padding: 0.9em;
|
83
|
+
span {
|
84
|
+
color: white;
|
85
|
+
display: block;
|
86
|
+
}
|
87
|
+
span.summary {
|
88
|
+
font-size: 0.7em;
|
89
|
+
color: #ffffff;
|
90
|
+
padding-top: 6px;
|
91
|
+
}
|
92
|
+
}
|
93
|
+
|
94
|
+
#toggle-css {
|
95
|
+
a {
|
96
|
+
color: $test-blue-dark;
|
97
|
+
text-decoration: none;
|
98
|
+
padding: 5px 0 5px 5px;
|
99
|
+
&:hover {
|
100
|
+
background: $test-blue-dark;
|
101
|
+
color: #ffffff;
|
102
|
+
}
|
103
|
+
}
|
104
|
+
}
|
81
105
|
}
|
82
106
|
}
|
83
107
|
|
@@ -130,22 +154,9 @@ h2 {
|
|
130
154
|
font-size: 1.5em;
|
131
155
|
font-weight: bold;
|
132
156
|
}
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
background-color: $test-green;
|
137
|
-
@include background-image(linear-gradient($test-green-medium, $test-green));
|
138
|
-
color: $test-green-dark;
|
139
|
-
padding: 0.9em;
|
140
|
-
span {
|
141
|
-
color: white;
|
142
|
-
display: block;
|
143
|
-
}
|
144
|
-
span.summary {
|
145
|
-
font-size: 0.7em;
|
146
|
-
color: #ffffff;
|
147
|
-
padding-top: 6px;
|
148
|
-
}
|
157
|
+
h3 {
|
158
|
+
font-size: 1.2em;
|
159
|
+
font-weight: bold;
|
149
160
|
}
|
150
161
|
|
151
162
|
p {
|
@@ -157,3 +168,4 @@ strong {
|
|
157
168
|
font-weight: bold;
|
158
169
|
}
|
159
170
|
|
171
|
+
|
@@ -1,6 +1,8 @@
|
|
1
1
|
<h2 class="demoHeaders">Autocomplete</h2>
|
2
2
|
<div class="ui-widget">
|
3
|
-
<
|
4
|
-
|
3
|
+
<form class="ui-form">
|
4
|
+
<label for="countries">Countries: </label>
|
5
|
+
<input id="countries" type="text">
|
6
|
+
</form>
|
5
7
|
</div>
|
6
8
|
|
data/demos/sections/buttons.html
CHANGED
@@ -9,6 +9,12 @@
|
|
9
9
|
<div id="leftIconButton">Left Icon</div> <br /><br />
|
10
10
|
<div id="bothIconButton">Left & Right Icons</div>
|
11
11
|
|
12
|
+
<!-- Colored Button Extensions -->
|
13
|
+
<h2 class="demoHeaders">Colored Button Extensions</h2>
|
14
|
+
<p>Some themes, such as "Kind of Blue" support additional colored buttons:</p>
|
15
|
+
<div id="dangerButton" class="ui-state-danger">Danger Button</div>
|
16
|
+
<div id="safeButton" class="ui-state-safe">Safe Button</div>
|
17
|
+
|
12
18
|
<!-- Button Set -->
|
13
19
|
<h2 class="demoHeaders">Button Toggle</h2>
|
14
20
|
<div id="radio1">
|
data/demos/sections/form.html
CHANGED
@@ -1,26 +1,66 @@
|
|
1
1
|
<h2 class="demoHeaders">Common Input Fields</h2>
|
2
2
|
<form action="#" class="ui-form" method="get" accept-charset="utf-8">
|
3
|
-
<p><input type="submit" value="Continue →"></p>
|
4
3
|
<p>
|
5
|
-
<
|
6
|
-
<input type="
|
4
|
+
<input type="submit" value="Regular Submit →">
|
5
|
+
<input class="format-ui-button" type="submit" value="Formatted Submit →">
|
7
6
|
</p>
|
8
7
|
<p>
|
9
|
-
<
|
10
|
-
<input type="
|
8
|
+
<h3>Input (type: 'text')</h3>
|
9
|
+
<input type="text" >
|
11
10
|
</p>
|
12
11
|
<p>
|
13
|
-
<
|
12
|
+
<h3>Input (type: 'email')</h3>
|
13
|
+
<input type="email" >
|
14
|
+
</p>
|
15
|
+
<p>
|
16
|
+
<h3>Input (type: 'password')</h3>
|
17
|
+
<input type="password" >
|
18
|
+
</p>
|
19
|
+
<p>
|
20
|
+
<h3>Input (type: 'url')</h3>
|
21
|
+
<input type="url" >
|
22
|
+
</p>
|
23
|
+
<p>
|
24
|
+
<h3>Input (type: 'date')</h3>
|
25
|
+
<input type="date" >
|
26
|
+
</p>
|
27
|
+
<p>
|
28
|
+
<h3>Input (type: 'datetime')</h3>
|
29
|
+
<input type="datetime" >
|
30
|
+
</p>
|
31
|
+
<p>
|
32
|
+
<h3>Input (type: 'month')</h3>
|
33
|
+
<input type="month" >
|
34
|
+
</p>
|
35
|
+
<p>
|
36
|
+
<h3>Input (type: 'tel')</h3>
|
37
|
+
<input type="tel" >
|
38
|
+
</p>
|
39
|
+
<p>
|
40
|
+
<h3>Input (type: 'number')</h3>
|
41
|
+
<input type="number" >
|
42
|
+
</p>
|
43
|
+
<p>
|
44
|
+
<h3>Text Area</h3>
|
14
45
|
<textarea cols="30"></textarea>
|
15
46
|
</p>
|
16
47
|
<p>
|
17
|
-
<
|
18
|
-
<input type="radio"
|
19
|
-
<input type="checkbox"
|
20
|
-
<input type="range"
|
21
|
-
<
|
22
|
-
<input type="
|
23
|
-
<input type="
|
48
|
+
<h3>Other Inputs</h3>
|
49
|
+
<p><input type="radio" > Input Radio</p>
|
50
|
+
<p><input type="checkbox" > Input Checkbox</p>
|
51
|
+
<p></strong> <input type="range" ></p>
|
52
|
+
<p>
|
53
|
+
<input type="file" >
|
54
|
+
<input type="file" class="format-ui-button"><br>
|
55
|
+
</p>
|
56
|
+
<p>
|
57
|
+
<input type="submit" >
|
58
|
+
<input class="format-ui-button" type="submit" value="Submit"><br>
|
59
|
+
</p>
|
60
|
+
<p>
|
61
|
+
<input type="button" value="Button" >
|
62
|
+
<input class="format-ui-button" type="button" value="Button"><br>
|
63
|
+
</p>
|
24
64
|
</p>
|
25
65
|
</form>
|
26
66
|
|
data/lib/compass-ui/version.rb
CHANGED
@@ -100,7 +100,7 @@
|
|
100
100
|
text-decoration: none; } }
|
101
101
|
|
102
102
|
// hover
|
103
|
-
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover
|
103
|
+
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover {
|
104
104
|
border-width: $ui-hover-border-width;
|
105
105
|
border-style: $ui-hover-border-style;
|
106
106
|
border-color: $ui-hover-border-color;
|
@@ -0,0 +1,204 @@
|
|
1
|
+
/**
|
2
|
+
* The Kind of Blue Theme
|
3
|
+
* was inspired by the Absolution Theme
|
4
|
+
* by Michael Vanderheeren
|
5
|
+
* Copyright (c) 2010 Michael Vanderheeren
|
6
|
+
*
|
7
|
+
* Please follow the his Github project to stay up to date on that theme:
|
8
|
+
* https://github.com/michaelvanderheeren/Absolution
|
9
|
+
*
|
10
|
+
* Kind of Blue will be maintained within the compass-ui project.
|
11
|
+
*/
|
12
|
+
@import "compass/css3/border-radius";
|
13
|
+
@import "compass/css3/images";
|
14
|
+
@import "compass/css3/opacity";
|
15
|
+
@import "compass/css3/box-shadow";
|
16
|
+
@import "compass/css3/text-shadow";
|
17
|
+
@import "compass/utilities/general/clearfix";
|
18
|
+
|
19
|
+
@import "compass-ui";
|
20
|
+
@import "kindofblue/dialog";
|
21
|
+
@import "kindofblue/accordion";
|
22
|
+
@import "kindofblue/autocomplete";
|
23
|
+
@import "kindofblue/datepicker";
|
24
|
+
@import "kindofblue/slider";
|
25
|
+
@import "kindofblue/tabs";
|
26
|
+
@import "kindofblue/color_extensions";
|
27
|
+
@import "kindofblue/formalize";
|
28
|
+
|
29
|
+
@mixin kindofblue-theme {
|
30
|
+
@include jquery-ui-theme;
|
31
|
+
@include kindofblue-dialog;
|
32
|
+
@include kindofblue-accordion;
|
33
|
+
@include kindofblue-autocomplete;
|
34
|
+
@include kindofblue-datepicker;
|
35
|
+
@include kindofblue-slider;
|
36
|
+
@include kindofblue-tabs;
|
37
|
+
@include kindofblue-color-extensions;
|
38
|
+
@include kindofblue-formalize;
|
39
|
+
}
|
40
|
+
|
41
|
+
// Default Radius
|
42
|
+
$ui-border-radius: 5px;
|
43
|
+
|
44
|
+
// Default Fonts
|
45
|
+
$ui-font-family: "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
|
46
|
+
|
47
|
+
$ui-fixed-font-family: "andale mono", "lucida console", monospace;
|
48
|
+
|
49
|
+
$ui-font-size: 1.0em;
|
50
|
+
|
51
|
+
$ui-widget-font-size: 1em;
|
52
|
+
|
53
|
+
$ui-form-font-size: 1em;
|
54
|
+
|
55
|
+
$ui-header-font-weight: bold;
|
56
|
+
|
57
|
+
// ------------------------------------------
|
58
|
+
// Icon Images
|
59
|
+
// ------------------------------------------
|
60
|
+
$ui-images-url: "kindofblue/";
|
61
|
+
$ui-icons: "ui-icons_222222_256x240.png";
|
62
|
+
$ui-icons-content: $ui-icons;
|
63
|
+
$ui-icons-header: $ui-icons;
|
64
|
+
$ui-icons-default: $ui-icons;
|
65
|
+
$ui-icons-hover: "ui-icons_ffffff_256x240.png";
|
66
|
+
$ui-icons-focus: $ui-icons-hover;
|
67
|
+
$ui-icons-active: $ui-icons-hover;
|
68
|
+
$ui-icons-highlight: $ui-icons;
|
69
|
+
$ui-icons-error: $ui-icons-hover;
|
70
|
+
|
71
|
+
// ------------------------------------------
|
72
|
+
// Color Scheme
|
73
|
+
// ------------------------------------------
|
74
|
+
|
75
|
+
// $kob-blue-light: #5e9ae2;
|
76
|
+
// $kob-blue-medium: #3570b8;
|
77
|
+
// $kob-blue-dark: #2e63a5;
|
78
|
+
$kob-font-color: #333333;
|
79
|
+
$kob-shadow-color: #282425;
|
80
|
+
|
81
|
+
$kob-blue-dark: #0064CD;
|
82
|
+
$kob-blue-medium: lighten($kob-blue-dark, 5%);
|
83
|
+
$kob-blue-light: lighten($kob-blue-medium, 20%);
|
84
|
+
|
85
|
+
$kob-highlight-light: #F9C42E;
|
86
|
+
$kob-highlight-light: lighten($kob-highlight-light, 10%);
|
87
|
+
$kob-highlight-dark: darken($kob-highlight-light, 10%);
|
88
|
+
$kob-highlight-color: $kob-font-color;
|
89
|
+
|
90
|
+
$kob-error-light: adjust-color($kob-highlight-light, $hue: -44);
|
91
|
+
$kob-error-dark: darken($kob-error-light, 30%);
|
92
|
+
$kob-error-color: $ui-white;
|
93
|
+
|
94
|
+
$kob-safe-light: adjust-color($kob-highlight-light, $hue: 45, $lightness: -22%);
|
95
|
+
$kob-safe-dark: darken($kob-safe-light, 10%);
|
96
|
+
$kob-safe-color: darken($kob-safe-dark, 5%);
|
97
|
+
|
98
|
+
$kob-buttonpane-background-color: #dedede;
|
99
|
+
|
100
|
+
// content
|
101
|
+
$ui-content-border-color: #a9a9a9;
|
102
|
+
$ui-content-color: $kob-font-color;
|
103
|
+
$ui-content-link-color: $ui-content-color;
|
104
|
+
$ui-content-background-color: #fdfdfd;
|
105
|
+
$ui-content-background: linear-gradient($ui-content-background-color,#ececec);
|
106
|
+
$ui-content-background-type: image;
|
107
|
+
|
108
|
+
// header
|
109
|
+
$ui-header-border-color: $kob-blue-dark;
|
110
|
+
$ui-header-color: $ui-white;
|
111
|
+
$ui-header-link-color: $ui-header-color;
|
112
|
+
$ui-header-background-color: $kob-blue-light;
|
113
|
+
$ui-header-background: linear-gradient($kob-blue-light, $kob-blue-dark);
|
114
|
+
$ui-header-background-type: image;
|
115
|
+
|
116
|
+
|
117
|
+
// titlebar
|
118
|
+
$ui-titlebar-color: $kob-font-color;
|
119
|
+
$ui-titlebar-background-color: $ui-white;
|
120
|
+
$ui-titlebar-background: none;
|
121
|
+
$ui-titlebar-background-type: default;
|
122
|
+
$ui-titlebar-bottom-border-color: #c1c1c1;
|
123
|
+
$ui-titlebar-bottom-border-width: 1px;
|
124
|
+
// $ui-titlebar-bottom-border-color: $kob-blue-light;
|
125
|
+
|
126
|
+
// state-default
|
127
|
+
$ui-default-border-color: #a9a9a9;
|
128
|
+
$ui-default-color: $kob-font-color;
|
129
|
+
$ui-default-background-color: #fdfdfd;
|
130
|
+
$ui-default-background: linear-gradient($ui-default-background-color,#ececec);
|
131
|
+
$ui-default-link-color: $ui-default-color;
|
132
|
+
|
133
|
+
// state-hover
|
134
|
+
$ui-hover-border-color: $kob-blue-dark;
|
135
|
+
$ui-hover-color: #ffffff;
|
136
|
+
$ui-hover-background-color: $kob-blue-light;
|
137
|
+
$ui-hover-background: linear-gradient($ui-hover-background-color,$kob-blue-medium);
|
138
|
+
$ui-hover-link-color: $ui-hover-color;
|
139
|
+
|
140
|
+
// state-active
|
141
|
+
$ui-active-border-color: $kob-blue-dark;
|
142
|
+
$ui-active-color: #ffffff;
|
143
|
+
$ui-active-background-color: $kob-blue-medium;
|
144
|
+
$ui-active-background: linear-gradient($ui-active-background-color,$kob-blue-light);
|
145
|
+
$ui-active-link-color: $ui-active-color;
|
146
|
+
|
147
|
+
// state-highlight
|
148
|
+
$ui-highlight-border-color: $kob-highlight-dark;
|
149
|
+
$ui-highlight-color: $kob-highlight-color;
|
150
|
+
$ui-highlight-background-color: $kob-highlight-light;
|
151
|
+
$ui-highlight-background: $ui-highlight-background-color;
|
152
|
+
$ui-highlight-background-type: default;
|
153
|
+
$ui-highlight-link-color: $ui-highlight-color;
|
154
|
+
|
155
|
+
// state-error
|
156
|
+
$ui-error-border-color: $kob-error-dark;
|
157
|
+
$ui-error-color: $kob-error-color;
|
158
|
+
$ui-error-background-color: $kob-error-light;
|
159
|
+
$ui-error-background: $ui-error-background-color;
|
160
|
+
$ui-error-background-type: default;
|
161
|
+
$ui-error-link-color: $ui-error-color;
|
162
|
+
|
163
|
+
// state-danger
|
164
|
+
$ui-danger-border-width: 1px;
|
165
|
+
$ui-danger-border-style: solid;
|
166
|
+
$ui-danger-border-color: $kob-error-dark;
|
167
|
+
$ui-danger-color: $kob-error-dark;
|
168
|
+
$ui-danger-font-weight: bold;
|
169
|
+
$ui-danger-hover-color: $ui-white;
|
170
|
+
$ui-danger-background-color: $kob-error-light;
|
171
|
+
$ui-danger-background: linear-gradient($kob-error-light, $kob-error-dark);
|
172
|
+
$ui-danger-background-type: image;
|
173
|
+
|
174
|
+
// state-safe
|
175
|
+
$ui-safe-border-width: 1px;
|
176
|
+
$ui-safe-border-style: solid;
|
177
|
+
$ui-safe-border-color: $kob-safe-dark;
|
178
|
+
$ui-safe-color: $kob-safe-color;
|
179
|
+
$ui-safe-font-weight: bold;
|
180
|
+
$ui-safe-hover-color: $ui-white;
|
181
|
+
$ui-safe-background-color: $kob-safe-light;
|
182
|
+
$ui-safe-background: linear-gradient($kob-safe-light, $kob-safe-dark);
|
183
|
+
$ui-safe-background-type: image;
|
184
|
+
|
185
|
+
// state-primary
|
186
|
+
|
187
|
+
// priority-secondary
|
188
|
+
$ui-priority-secondary-opacity: .7;
|
189
|
+
|
190
|
+
// state-disabled
|
191
|
+
$ui-disabled-opacity: .35;
|
192
|
+
|
193
|
+
// overlay
|
194
|
+
$ui-overlay-opacity: .3;
|
195
|
+
$ui-overlay-background-color: $kob-shadow-color;
|
196
|
+
$ui-overlay-background: linear-gradient($ui-overlay-background-color,adjust-lightness($ui-overlay-background-color, -5));
|
197
|
+
$ui-overlay-background-type: image;
|
198
|
+
|
199
|
+
// shadow
|
200
|
+
$ui-shadow-opacity: .3;
|
201
|
+
$ui-shadow-background-color: $kob-shadow-color;
|
202
|
+
$ui-shadow-background: linear-gradient($ui-shadow-background-color,adjust-lightness($ui-shadow-background-color, -5));
|
203
|
+
$ui-shadow-background-type: image;
|
204
|
+
|