kyruus-bootstrap-sass 1.0.0.rc1

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 (48) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +19 -0
  3. data/Gemfile +4 -0
  4. data/LICENSE.txt +22 -0
  5. data/README.md +29 -0
  6. data/Rakefile +1 -0
  7. data/kyruus-bootstrap-sass.gemspec +27 -0
  8. data/lib/kyruus/bootstrap/sass.rb +10 -0
  9. data/lib/kyruus/bootstrap/sass/engine.rb +11 -0
  10. data/lib/kyruus/bootstrap/sass/version.rb +7 -0
  11. data/vendor/assets/fonts/museo_slab_300-webfont.eot +0 -0
  12. data/vendor/assets/fonts/museo_slab_300-webfont.ttf +0 -0
  13. data/vendor/assets/fonts/museo_slab_500-webfont.eot +0 -0
  14. data/vendor/assets/fonts/museo_slab_500-webfont.ttf +0 -0
  15. data/vendor/assets/fonts/proximanova-bold-webfont.eot +0 -0
  16. data/vendor/assets/fonts/proximanova-bold-webfont.ttf +0 -0
  17. data/vendor/assets/fonts/proximanova-webfont.eot +0 -0
  18. data/vendor/assets/fonts/proximanova-webfont.ttf +0 -0
  19. data/vendor/assets/images/kyruus-bootstrap/kyruus-logo-white-large.gif +0 -0
  20. data/vendor/assets/images/kyruus-bootstrap/kyruus-logo-white.gif +0 -0
  21. data/vendor/assets/images/kyruus-bootstrap/kyruus-logo-white.svg +81 -0
  22. data/vendor/assets/images/kyruus-bootstrap/kyruus-waves-light.svg +9 -0
  23. data/vendor/assets/images/kyruus-bootstrap/kyruus-waves.svg +9 -0
  24. data/vendor/assets/images/kyruus-bootstrap/passport-logo-white-large.gif +0 -0
  25. data/vendor/assets/images/kyruus-bootstrap/passport-logo-white.gif +0 -0
  26. data/vendor/assets/images/kyruus-bootstrap/passport-logo-white.svg +121 -0
  27. data/vendor/assets/stylesheets/kyruus-bootstrap.scss +26 -0
  28. data/vendor/assets/stylesheets/kyruus-bootstrap/_alerts.scss +62 -0
  29. data/vendor/assets/stylesheets/kyruus-bootstrap/_button-groups.scss +50 -0
  30. data/vendor/assets/stylesheets/kyruus-bootstrap/_buttons.scss +83 -0
  31. data/vendor/assets/stylesheets/kyruus-bootstrap/_close.scss +14 -0
  32. data/vendor/assets/stylesheets/kyruus-bootstrap/_dropdowns.scss +14 -0
  33. data/vendor/assets/stylesheets/kyruus-bootstrap/_font-awesome.scss +78 -0
  34. data/vendor/assets/stylesheets/kyruus-bootstrap/_fonts.scss +35 -0
  35. data/vendor/assets/stylesheets/kyruus-bootstrap/_footer.scss +27 -0
  36. data/vendor/assets/stylesheets/kyruus-bootstrap/_forms.scss +26 -0
  37. data/vendor/assets/stylesheets/kyruus-bootstrap/_jumbotron.scss +26 -0
  38. data/vendor/assets/stylesheets/kyruus-bootstrap/_labels-badges.scss +38 -0
  39. data/vendor/assets/stylesheets/kyruus-bootstrap/_lazy.scss +83 -0
  40. data/vendor/assets/stylesheets/kyruus-bootstrap/_mixins.scss +32 -0
  41. data/vendor/assets/stylesheets/kyruus-bootstrap/_modals.scss +14 -0
  42. data/vendor/assets/stylesheets/kyruus-bootstrap/_navbar.scss +233 -0
  43. data/vendor/assets/stylesheets/kyruus-bootstrap/_progress-bars.scss +78 -0
  44. data/vendor/assets/stylesheets/kyruus-bootstrap/_tables.scss +38 -0
  45. data/vendor/assets/stylesheets/kyruus-bootstrap/_type.scss +106 -0
  46. data/vendor/assets/stylesheets/kyruus-bootstrap/_variables.scss +149 -0
  47. data/vendor/assets/stylesheets/kyruus-bootstrap/_wells.scss +27 -0
  48. metadata +160 -0
@@ -0,0 +1,32 @@
1
+ @mixin dataTables_icon($unicode, $color, $hilite) {
2
+ &:after {
3
+ font-family: FontAwesome;
4
+ font-weight: normal;
5
+ font-style: normal;
6
+ display: inline-block;
7
+ text-decoration: inherit;
8
+
9
+ position: absolute;
10
+ right: -11px;
11
+ content: $unicode;
12
+ color: $color;
13
+ }
14
+ &:hover:after {
15
+ color: $hilite;
16
+ }
17
+ }
18
+
19
+ @mixin sticky-footer ($footer-height: ($baseLineHeight * 4), $footer-padding-top: 70px, $footer-padding-bottom: 70px, $footer-margin-top: 70px) {
20
+ .wrapper {
21
+ margin: 0 auto (-($footer-height + $footer-padding-bottom + $footer-padding-top + $footer-margin-top + 1));
22
+ }
23
+ .push {
24
+ height: ($footer-height + $footer-padding-bottom + $footer-padding-top + $footer-margin-top + 1);
25
+ }
26
+
27
+ .footer {
28
+ margin-top: $footer-margin-top;
29
+ height: $footer-height;
30
+ padding: $footer-padding-top 0 $footer-padding-bottom;
31
+ }
32
+ }
@@ -0,0 +1,14 @@
1
+ //
2
+ // Kyruus Modals
3
+ // --------------------------------------------------
4
+
5
+
6
+ // Background
7
+ .modal-backdrop,
8
+ .modal-backdrop.fade.in{
9
+ background-color: mix($blueDarker, $black, 50%);
10
+ }
11
+
12
+ .modal-header .close {
13
+ margin: 0;
14
+ }
@@ -0,0 +1,233 @@
1
+ //
2
+ // Navbars
3
+ // --------------------------------------------------
4
+
5
+
6
+ // Kyruus navbar
7
+ // -------------------------
8
+
9
+ .jumbotron, .navbar {
10
+ .container, .container-fluid {
11
+ position: relative; // fixes z-index problem when layering waves
12
+ z-index: 2; // fixes z-index problem when layering waves
13
+ }
14
+ }
15
+
16
+ .navbar-kyruus {
17
+ position: relative;
18
+ color: $navbarKyruusText;
19
+ margin-bottom: 30px;
20
+
21
+ &:after {
22
+ content:'';
23
+ display:block;
24
+ position:absolute;
25
+ top:0;
26
+ right:0;
27
+ bottom:0;
28
+ left:0;
29
+ background: image-url('kyruus-bootstrap/kyruus-waves-light.svg');
30
+ }
31
+
32
+
33
+ .nav {
34
+ // margin-top: 2px;
35
+ }
36
+
37
+ &.navbar-padded {
38
+ .brand {
39
+ margin-top: 50px;
40
+ &.brand-large {
41
+ margin-bottom: 0;
42
+ margin-top: 37px;
43
+ }
44
+ }
45
+ .nav {
46
+ margin-top: 52px;
47
+ }
48
+ }
49
+
50
+ .nav-pills.pull-right {
51
+ margin-right: -20px;
52
+ }
53
+
54
+ .navbar-inner {
55
+ @include gradient-vertical($navbarKyruusBackgroundHighlight, $navbarKyruusBackground);
56
+ border-color: $navbarKyruusBorder;
57
+ }
58
+
59
+ &.navbar-kyruus-large .navbar-inner {
60
+ @include gradient-vertical($navbarKyruusBackgroundHighlight, $navbarKyruusBackgroundLarge);
61
+ }
62
+
63
+
64
+ &.navbar .nav > .active > a, &.navbar .nav > .active > a:hover, &.navbar .nav > .active > a:focus {
65
+ font-weight: normal;
66
+ @include box-shadow(none);
67
+ }
68
+
69
+ .brand {
70
+ padding: 7px 20px 8px;
71
+ width: 75px;
72
+ height: 25px;
73
+ background: image-url('kyruus-bootstrap/kyruus-logo-white.gif') no-repeat center center;
74
+ background: rgba(0,0,0,0) image-url('kyruus-bootstrap/kyruus-logo-white.svg') no-repeat center center;
75
+ }
76
+ .brand-large {
77
+ width: 110px;
78
+ height: 38px;
79
+ margin-bottom: 5px;
80
+ background: image-url('kyruus-bootstrap/kyruus-logo-white-large.gif') no-repeat center center;
81
+ background: rgba(0,0,0,0) image-url('kyruus-bootstrap/kyruus-logo-white.svg') no-repeat center center;
82
+ background-size: 110px 38px;
83
+ }
84
+
85
+ .brand-passport {
86
+ &.brand {
87
+ width: 131px;
88
+ height: 25px;
89
+ background: image-url('kyruus-bootstrap/passport-logo-white.gif') no-repeat center center;
90
+ background: rgba(0,0,0,0) image-url('kyruus-bootstrap/passport-logo-white.svg') no-repeat center center;
91
+ }
92
+ &.brand-large {
93
+ width: 199px;
94
+ height: 38px;
95
+ margin-bottom: 5px;
96
+ background: image-url('kyruus-bootstrap/passport-logo-white-large.gif') no-repeat center center;
97
+ background: rgba(0,0,0,0) image-url('kyruus-bootstrap/passport-logo-white.svg') no-repeat center center;
98
+ background-size: 199px 38px;
99
+ }
100
+ }
101
+
102
+ .brand,
103
+ .nav > li > a {
104
+ color: $navbarKyruusLinkColor;
105
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
106
+ &:hover {
107
+ color: $navbarKyruusLinkColorHover;
108
+ }
109
+ }
110
+
111
+ .nav > li > a {
112
+ // margin-top: 5px;
113
+ }
114
+
115
+
116
+
117
+ .nav > li > a:focus,
118
+ .nav > li > a:hover {
119
+ color: $navbarKyruusLinkColorHover;
120
+ background-color: $navbarKyruusLinkBackgroundHover;
121
+ background-color: rgba(0,51,102,.25);
122
+ *background-color: $navbarKyruusLinkBackgroundHover;
123
+ }
124
+
125
+ .nav .active > a,
126
+ .nav .active > a:hover,
127
+ .nav .active > a:focus {
128
+ color: $navbarKyruusLinkColorActive;
129
+ background-color: $navbarKyruusLinkBackgroundActive;
130
+ background-color: rgba(0,51,102,.15);
131
+ *background-color: $navbarKyruusLinkBackgroundActive;
132
+ }
133
+
134
+ .nav-large {
135
+ $nav-large-size: 20px;
136
+ margin-top: 7px;
137
+ font-size: 20px;
138
+ .divider-vertical {
139
+ margin: 4px 9px;
140
+ height: $nav-large-size * 1.5;
141
+ }
142
+ }
143
+
144
+ // Inline text links
145
+ .navbar-link {
146
+ color: $navbarKyruusLinkColor;
147
+ &:hover {
148
+ color: $navbarKyruusLinkColorHover;
149
+ }
150
+ }
151
+
152
+ // Dividers in navbar
153
+ .divider-vertical {
154
+ margin: 9px;
155
+ padding-right: 2px;
156
+ height: $baseLineHeight;
157
+ border-left-color: mix($blueLight, $blue, 50%);
158
+ border-right-color: mix($blueLight, $blue, 50%);
159
+ }
160
+
161
+ .dropdown-toggle > i.icon-caret-down { display: inline; }
162
+
163
+ // Dropdowns
164
+ .nav li.dropdown.open > .dropdown-toggle,
165
+ .nav li.dropdown.active > .dropdown-toggle,
166
+ .nav li.dropdown.open.active > .dropdown-toggle {
167
+ background-color: $navbarKyruusLinkBackgroundActive;
168
+ background-color: rgba(0,51,102,.15);
169
+ *background-color: $navbarKyruusLinkBackgroundActive;
170
+ color: $navbarKyruusLinkColorActive;
171
+ }
172
+ .nav li.dropdown > .dropdown-toggle .caret {
173
+ border-top-color: $navbarKyruusLinkColor;
174
+ border-bottom-color: $navbarKyruusLinkColor;
175
+ }
176
+ .nav li.dropdown.open > .dropdown-toggle .caret,
177
+ .nav li.dropdown.active > .dropdown-toggle .caret,
178
+ .nav li.dropdown.open.active > .dropdown-toggle .caret {
179
+ border-top-color: $navbarKyruusLinkColorActive;
180
+ border-bottom-color: $navbarKyruusLinkColorActive;
181
+ }
182
+
183
+ // Navbar search
184
+ .navbar-search {
185
+ .search-query {
186
+ color: $white;
187
+ background-color: $navbarKyruusSearchBackground;
188
+ border-color: $navbarKyruusSearchBorder;
189
+ // @include box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
190
+ @include transition(none);
191
+ @include placeholder($navbarKyruusSearchPlaceholderColor);
192
+
193
+ // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
194
+ &:focus,
195
+ &.focused {
196
+ padding: 5px 15px;
197
+ color: $grayDark;
198
+ text-shadow: 0 1px 0 $white;
199
+ background-color: $navbarKyruusSearchBackgroundFocus;
200
+ border: 0;
201
+ @include box-shadow(0 0 3px rgba(0,0,0,.15));
202
+ outline: 0;
203
+ }
204
+ }
205
+ }
206
+
207
+ // Navbar collapse button
208
+ .btn-navbar {
209
+ @include buttonBackground(darken($navbarKyruusBackgroundHighlight, 5%), darken($navbarKyruusBackground, 5%));
210
+ }
211
+
212
+ }
213
+
214
+ .navbar-static-top {
215
+ min-width: 990px; // necessary fix for non-responsive layouts
216
+ @include border-radius(0);
217
+ &.navbar-kyruus .navbar-inner {
218
+ // .box-shadow(0 0 4px $blueDarker); // make a nice shadow underneath navbar
219
+ }
220
+ }
221
+
222
+ .navbar-kyruus {
223
+ .badge {
224
+ padding: 2px 7px;
225
+ vertical-align: text-top;
226
+ margin-top: -2px;
227
+ margin-bottom: -2px;
228
+ }
229
+
230
+ .badge-important {
231
+ background: darken($errorText, 2%);
232
+ }
233
+ }
@@ -0,0 +1,78 @@
1
+ //
2
+ // Kyruus Progress bars
3
+ // --------------------------------------------------
4
+
5
+ .progress {
6
+ position: relative;
7
+ }
8
+
9
+ .progress-small {
10
+ height: $baseLineHeight / 2;
11
+ margin-bottom: 0;
12
+ @include border-radius($baseBorderRadius / 2);
13
+ }
14
+
15
+ // Bar of progress
16
+ .progress .bar {
17
+ @include gradient-vertical($blue, mix($blue, $blueDark, 50%));
18
+ }
19
+
20
+ // Striped bars
21
+ .progress-striped .bar {
22
+ @include gradient-striped($blue);
23
+ }
24
+
25
+
26
+ // COLORS
27
+ // ------
28
+
29
+ // Danger (red)
30
+ .progress-danger .bar, .progress .bar-danger {
31
+ @include gradient-vertical($red, mix($red, $redDark, 30%));
32
+ }
33
+ .progress-danger.progress-striped .bar, .progress-striped .bar-danger {
34
+ @include gradient-striped($red);
35
+ }
36
+
37
+ // Success (green)
38
+ .progress-success .bar, .progress .bar-success {
39
+ @include gradient-vertical($green, mix($green, $greenDark, 50%));
40
+ }
41
+ .progress-success.progress-striped .bar, .progress-striped .bar-success {
42
+ @include gradient-striped($green);
43
+ }
44
+
45
+ // Info (teal)
46
+ .progress-info .bar, .progress .bar-info {
47
+ @include gradient-vertical(mix($blueLight, $blue, 70%), mix($blueLight, $blue, 40%));
48
+ }
49
+ .progress-info.progress-striped .bar, .progress-striped .bar-info {
50
+ @include gradient-striped(mix($blueLight, $blue, 80%));
51
+ }
52
+
53
+ // Warning (orange)
54
+ .progress-warning .bar, .progress .bar-warning {
55
+ @include gradient-vertical($yellow, mix($yellow, $yellowDark, 50%));
56
+ }
57
+ .progress-warning.progress-striped .bar, .progress-striped .bar-warning {
58
+ @include gradient-striped(mix($yellow, mix($yellow, $yellowDark, 50%), 50%));
59
+ }
60
+
61
+ .progress .bar-overlay {
62
+ position: absolute;
63
+ text-align: center;
64
+ width: 100%;
65
+ top: 0;
66
+ left:0;
67
+ color: $white;
68
+ text-shadow: 0 -1px 0 rgba(0,0,0,.5);
69
+ }
70
+
71
+ .progress-key {
72
+ width: ($baseFontSize * 2/3);
73
+ height: ($baseFontSize * 2/3);
74
+ display: inline-block;
75
+ @include ie7-inline-block();
76
+ margin: 0;
77
+ @include border-radius(2px);
78
+ }
@@ -0,0 +1,38 @@
1
+ .table-bordered-outer {
2
+ border: 1px solid $tableBorder;
3
+ border-collapse: separate; // Done so we can round those corners!
4
+ *border-collapse: collapse; // IE7 can't round corners anyway
5
+ @include border-radius($baseBorderRadius);
6
+ }
7
+
8
+ .table tbody tr > td {
9
+ &.success {
10
+ background-color: darken($successBackground, 5%);
11
+ }
12
+ &.error {
13
+ background-color: darken($errorBackground, 5%);
14
+ }
15
+ &.warning {
16
+ background-color: darken($warningBackground, 5%);
17
+ }
18
+ &.info {
19
+ background-color: darken($infoBackground, 5%);
20
+ }
21
+ }
22
+
23
+
24
+ // Hover states for .table-hover
25
+ .table-hover tbody tr:hover > td {
26
+ &.success {
27
+ background-color: darken($successBackground, 10%);
28
+ }
29
+ &.error {
30
+ background-color: darken($errorBackground, 10%);
31
+ }
32
+ &.warning {
33
+ background-color: darken($warningBackground, 10%);
34
+ }
35
+ &.info {
36
+ background-color: darken($infoBackground, 10%);
37
+ }
38
+ }
@@ -0,0 +1,106 @@
1
+ //
2
+ // Typography
3
+ // --------------------------------------------------
4
+
5
+
6
+ // Body text
7
+ // -------------------------
8
+
9
+ .lead {
10
+ margin-bottom: $baseLineHeight / 2;
11
+ font-size: $baseFontSize + 4;
12
+ font-weight: bold;
13
+ line-height: $baseLineHeight + 6;
14
+ }
15
+
16
+ .lead-large, .copy-large .lead {
17
+ margin-bottom: $baseLineHeight * 1.5;
18
+ font-size: $baseFontSize + 10;
19
+ font-weight: bold;
20
+ line-height: $baseLineHeight + 15;
21
+
22
+ small {
23
+ font-size: 70%;
24
+ }
25
+ }
26
+
27
+ .copy-large {
28
+ &, & li {
29
+ font-size: $baseFontSize + 4;
30
+ line-height: $baseLineHeight + 4;
31
+ }
32
+ li {
33
+ margin: $baseLineHeight/4 0;
34
+ }
35
+ }
36
+
37
+
38
+ h1,
39
+ h2,
40
+ h3 { line-height: $baseLineHeight * 2; }
41
+
42
+ h1 { font-size: $baseFontSize * 2.5; } // ~35px
43
+ h2 { font-size: $baseFontSize * 2; } // ~28px
44
+ h3 { font-size: $baseFontSize * 1.5; } // ~21px
45
+ h4 { font-size: $baseFontSize * 1.285; } // ~18px
46
+ h5 { font-size: $baseFontSize; }
47
+ h6 { font-size: $baseFontSize * 0.85; } // ~12px
48
+
49
+ h1 small { font-size: $baseFontSize * 1.75; } // ~24px
50
+ h2 small { font-size: $baseFontSize * 1.25; } // ~18px
51
+ h3 small { font-size: $baseFontSize; }
52
+ h4 small { font-size: $baseFontSize; }
53
+
54
+
55
+ // MISC
56
+ // ----
57
+
58
+ // Horizontal rules
59
+ hr.hr-small {
60
+ margin: $baseLineHeight/2 0;
61
+ }
62
+
63
+
64
+ // Floats
65
+ img.pull-right {
66
+ margin: 20px;
67
+ margin-right: 0;
68
+ }
69
+
70
+ img.pull-left {
71
+ margin: 20px;
72
+ margin-left: 0;
73
+ }
74
+
75
+ .nowrap {
76
+ white-space: nowrap;
77
+ }
78
+
79
+ .text-indent-negative {
80
+ text-indent: -22px;
81
+ margin-left: 22px;
82
+ }
83
+
84
+ // Horizontal layout (like forms)
85
+ .dl-horizontal {
86
+ dt {
87
+ font-weight: normal;
88
+ }
89
+ &.dl-compact {
90
+ dt {
91
+ width: $horizontalComponentOffset - 80;
92
+ }
93
+ dd {
94
+ margin-left: $horizontalComponentOffset - 60;
95
+ word-wrap : break-word;
96
+ }
97
+ }
98
+ &.dl-padded {
99
+ dt, dd {
100
+ padding-bottom: 14px;
101
+ }
102
+ }
103
+ dt.strong { font-weight: bold; }
104
+ }
105
+
106
+ td.number { text-align: right; }