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.
Files changed (33) hide show
  1. data/CHANGELOG.md +7 -0
  2. data/README.md +5 -5
  3. data/demos/images/kindofblue/select_arrow.gif +0 -0
  4. data/demos/images/kindofblue/selector.png +0 -0
  5. data/demos/images/kindofblue/ui-icons_222222_256x240.png +0 -0
  6. data/demos/images/kindofblue/ui-icons_eeeeee_256x240.png +0 -0
  7. data/demos/images/kindofblue/ui-icons_ffffff_256x240.png +0 -0
  8. data/demos/index.html +8 -6
  9. data/demos/js/demo.js +16 -5
  10. data/demos/sass/_demo.scss +33 -21
  11. data/demos/sass/kindofblue.scss +4 -0
  12. data/demos/sections/autocomplete.html +4 -2
  13. data/demos/sections/buttons.html +6 -0
  14. data/demos/sections/form.html +53 -13
  15. data/lib/compass-ui/version.rb +1 -1
  16. data/stylesheets/compass-ui/jquery-ui/_theme.scss +1 -1
  17. data/stylesheets/compass-ui/theme/_kindofblue.scss +204 -0
  18. data/stylesheets/compass-ui/theme/absolution/_progressbar.scss +1 -1
  19. data/stylesheets/compass-ui/theme/absolution/_slider.scss +1 -1
  20. data/stylesheets/compass-ui/theme/kindofblue/_accordion.scss +65 -0
  21. data/stylesheets/compass-ui/theme/kindofblue/_autocomplete.scss +28 -0
  22. data/stylesheets/compass-ui/theme/kindofblue/_color_extensions.scss +53 -0
  23. data/stylesheets/compass-ui/theme/kindofblue/_datepicker.scss +164 -0
  24. data/stylesheets/compass-ui/theme/kindofblue/_dialog.scss +90 -0
  25. data/stylesheets/compass-ui/theme/kindofblue/_formalize.scss +209 -0
  26. data/stylesheets/compass-ui/theme/kindofblue/_slider.scss +42 -0
  27. data/stylesheets/compass-ui/theme/kindofblue/_tabs.scss +68 -0
  28. data/templates/images/kindofblue/select_arrow.gif +0 -0
  29. data/templates/images/kindofblue/selector.png +0 -0
  30. data/templates/images/kindofblue/ui-icons_222222_256x240.png +0 -0
  31. data/templates/images/kindofblue/ui-icons_eeeeee_256x240.png +0 -0
  32. data/templates/images/kindofblue/ui-icons_ffffff_256x240.png +0 -0
  33. 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 (import with `@import "compass-ui/theme/jquery-ui-base"`).
47
+ * jQuery UI - Base Theme (`@import "compass-ui/theme/jquery-ui-base"`): The base theme from which all others are derived.
48
48
 
49
- * Absolution Theme (import with `@import "compass-ui/theme/absolution"`).
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
- 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.
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
 
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
- <strong>Choose a theme to test:</strong>
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
- <p>
40
- <strong>Resources:</strong>
41
+ <div>
42
+ <h3>Resources:</h3>
41
43
  <a href="https://github.com/patrickward/compass-ui">Github Project</a>
42
- </p>
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").button().click(function(e) {
167
- e.preventDefault();
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
- // Switch styles
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
- // #toggle-css {
78
- // font-size: 1.5em;
79
- // padding: 0.9em 0.7em;
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
- h2#showing {
135
- @include border-radius(5px);
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
+
data/demos/sass/kindofblue.scss ADDED
@@ -0,0 +1,4 @@
1
+ @import "base";
2
+ @import "compass-ui/theme/kindofblue";
3
+ @include kindofblue-theme;
4
+
data/demos/sections/autocomplete.html CHANGED
@@ -1,6 +1,8 @@
1
1
  <h2 class="demoHeaders">Autocomplete</h2>
2
2
  <div class="ui-widget">
3
- <label for="countries">Countries: </label>
4
- <input id="countries">
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 &rarr;"></p>
4
3
  <p>
5
- <strong>Input (type: 'text')</strong><br />
6
- <input type="text" />
4
+ <input type="submit" value="Regular Submit &rarr;">
5
+ <input class="format-ui-button" type="submit" value="Formatted Submit &rarr;">
7
6
  </p>
8
7
  <p>
9
- <strong>Input (type: 'email' and 'password')</strong><br />
10
- <input type="email" /><input type="password" />
8
+ <h3>Input (type: 'text')</h3>
9
+ <input type="text" >
11
10
  </p>
12
11
  <p>
13
- <strong>Text Area</strong><br />
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
- <strong>Other Inputs Remain Fine</strong><br />
18
- <input type="radio" /> <br />
19
- <input type="checkbox" /> <br />
20
- <input type="range" /> <br />
21
- <input type="file" /> <br />
22
- <input type="submit" /> <br />
23
- <input type="button" value="Button" /> <br />
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
@@ -1,3 +1,3 @@
1
1
  module CompassUI
2
- VERSION = '0.0.4'
2
+ VERSION = '0.0.5'
3
3
  end
data/stylesheets/compass-ui/jquery-ui/_theme.scss 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, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
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;
data/stylesheets/compass-ui/theme/_kindofblue.scss ADDED
@@ -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
+