compass-ui 0.0.4 → 0.0.5

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.
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
+