kyruus-bootstrap-sass 1.0.0.rc1

Sign up to get free protection for your applications and to get access to all the features.
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; }