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,50 @@
1
+ //
2
+ // Kyruus button groups
3
+ // --------------------------------------------------
4
+
5
+
6
+ // Reset fonts for other sizes
7
+ .btn-group > .btn-xlarge {
8
+ font-size: $baseFontSize + 6px;
9
+ }
10
+
11
+ // Reset corners for large buttons
12
+ .btn-group > .btn.xlarge:first-child {
13
+ margin-left: 0;
14
+ -webkit-border-top-left-radius: 7px;
15
+ -moz-border-radius-topleft: 7px;
16
+ border-top-left-radius: 7px;
17
+ -webkit-border-bottom-left-radius: 7px;
18
+ -moz-border-radius-bottomleft: 7px;
19
+ border-bottom-left-radius: 7px;
20
+ }
21
+ .btn-group > .btn.xlarge:last-child,
22
+ .btn-group > .xlarge.dropdown-toggle {
23
+ -webkit-border-top-right-radius: 7px;
24
+ -moz-border-radius-topright: 7px;
25
+ border-top-right-radius: 7px;
26
+ -webkit-border-bottom-right-radius: 7px;
27
+ -moz-border-radius-bottomright: 7px;
28
+ border-bottom-right-radius: 7px;
29
+ }
30
+
31
+ // Split button dropdowns
32
+ // ----------------------
33
+
34
+ // Give the line between buttons some depth
35
+ .btn-group > .btn-xlarge + .dropdown-toggle {
36
+ padding-left: 16px;
37
+ padding-right: 16px;
38
+ *padding-top: 9px;
39
+ *padding-bottom: 9px;
40
+ }
41
+
42
+ // Vertical button groups
43
+ // ----------------------
44
+
45
+ .btn-group-vertical .btn-large:first-child {
46
+ @include border-radius(7px 7px 0 0);
47
+ }
48
+ .btn-group-vertical .btn-large:last-child {
49
+ @include border-radius(0 0 7px 7px);
50
+ }
@@ -0,0 +1,83 @@
1
+ //
2
+ // Buttons
3
+ // --------------------------------------------------
4
+
5
+
6
+ // Base styles
7
+ // --------------------------------------------------
8
+
9
+ // Core
10
+ .btn {
11
+ font-weight: bold;
12
+ font-family: $sansFontFamily;
13
+ }
14
+
15
+
16
+ // Button Sizes
17
+ // --------------------------------------------------
18
+
19
+ // X-Large
20
+ .btn-xl {
21
+ padding: $paddingXL;
22
+ font-size: $fontSizeXL;
23
+ @include border-radius($borderRadiusXL);
24
+ }
25
+
26
+
27
+ // Cross-browser Jank
28
+ // --------------------------------------------------
29
+
30
+ button.btn,
31
+ input[type="submit"].btn {
32
+
33
+ &.btn-xl {
34
+ *padding-top: 9px;
35
+ *padding-bottom: 9px;
36
+ }
37
+ }
38
+
39
+ // Block button
40
+ .btn-block {
41
+ display: block;
42
+ width: 100%;
43
+ padding-left: 0;
44
+ padding-right: 0;
45
+ @include box-sizing(border-box);
46
+ }
47
+
48
+
49
+ // Link buttons
50
+ // --------------------------------------------------
51
+ // Must call again to reset style for Kyruus Bootstrap
52
+
53
+ // Make a button look and behave like a link
54
+ .btn-link,
55
+ .btn-link:active {
56
+ font-weight: normal;
57
+ background-color: transparent;
58
+ background-image: none;
59
+ }
60
+ .btn-link {
61
+ border-color: transparent;
62
+ cursor: pointer;
63
+ color: $linkColor;
64
+ }
65
+ .btn-link:hover {
66
+ color: $linkColorHover;
67
+ background-color: transparent;
68
+ }
69
+
70
+ .btn-list {
71
+ h4 { margin: 0 0 15px; }
72
+ .btn {
73
+ margin-bottom: 10px;
74
+ text-align: left;
75
+ i {
76
+ width: 1.1em;
77
+ display: inline-block;
78
+ margin-right: .3em;
79
+ text-align: center;
80
+ margin-left: 22px;
81
+ }
82
+ }
83
+ }
@@ -0,0 +1,14 @@
1
+ //
2
+ // Kyruus close icons
3
+ // --------------------------------------------------
4
+ // Resets the .close style to play nice with Font Awesome
5
+
6
+ .close {
7
+ font-size: inherit;
8
+ line-height: inherit;
9
+ }
10
+
11
+ .alert .close {
12
+ line-height: inherit;
13
+ padding-top: 2px;
14
+ }
@@ -0,0 +1,14 @@
1
+ //
2
+ // Kyruus dropdown menus
3
+ // --------------------------------------------------
4
+
5
+
6
+ // overwrites dropdown submenus with a Font Awesome icon-caret-right
7
+ .dropdown-submenu > a:after {
8
+ font-family: FontAwesome;
9
+ content: "\f0da";
10
+ width: auto;
11
+ height: auto;
12
+ border: none;
13
+ margin-top: 0;
14
+ }
@@ -0,0 +1,78 @@
1
+ //
2
+ // Kyruus Font Awesome styles
3
+ // --------------------------------------------------
4
+
5
+
6
+ .btn.btn-xlarge {
7
+ [class^="icon-"],
8
+ [class*=" icon-"] {
9
+ vertical-align: -7%;
10
+
11
+ }
12
+ }
13
+
14
+ .icon-fixed-width {
15
+ width: 1.1em;
16
+ display: inline-block;
17
+ }
18
+
19
+ .icon-6x {
20
+ font-size: 6em;
21
+ &.icon-border {
22
+ padding: .1em .2em;
23
+ border-width: 6px;
24
+ @include border-radius(8px);
25
+ }
26
+ }
27
+
28
+ .icon-7x {
29
+ font-size: 7em;
30
+ &.icon-border {
31
+ padding: .1em .2em;
32
+ border-width: 7px;
33
+ @include border-radius(9px);
34
+ }
35
+ }
36
+
37
+ .icon-8x {
38
+ font-size: 8em;
39
+ &.icon-border {
40
+ padding: .1em .2em;
41
+ border-width: 8px;
42
+ @include border-radius(10px);
43
+ }
44
+ }
45
+
46
+ // allows usage of the hide class directly on font awesome icons
47
+ [class^="icon-"],
48
+ [class*=" icon-"] {
49
+ &.hide { display:none; }
50
+ }
51
+
52
+ // fixes font awesome underlining with icons embedded inside anchor tags
53
+ a {
54
+ [class^="icon-"],
55
+ [class*=" icon-"] {
56
+ &, &:before { display: inline; }
57
+ }
58
+ }
59
+
60
+ .btn.btn-xl {
61
+ [class^="icon-"],
62
+ [class*=" icon-"] {
63
+ &.icon-large:before {
64
+ vertical-align: -15%;
65
+ }
66
+ margin-top: 0; // overrides bootstrap default
67
+ &.pull-left, &.pull-right {
68
+ &.icon-2x { margin-top: .05em; }
69
+ }
70
+ &.pull-left.icon-2x { margin-right: .2em; }
71
+ &.pull-right.icon-2x { margin-left: .2em; }
72
+ }
73
+ }
74
+
75
+ .icon-1x {
76
+ font-size: $baseFontSize;
77
+ vertical-align: middle;
78
+ }
@@ -0,0 +1,35 @@
1
+ @font-face {
2
+ font-family: 'museo-slab';
3
+ src: font-url('museo_slab_300-webfont.eot');
4
+ src: font-url('museo_slab_300-webfont.eot?#iefix') format('embedded-opentype'),
5
+ font-url('museo_slab_300-webfont.ttf') format('truetype');
6
+ font-weight: normal;
7
+ font-style: normal;
8
+ }
9
+
10
+ @font-face {
11
+ font-family: 'museo-slab';
12
+ src: font-url('museo_slab_500-webfont.eot');
13
+ src: font-url('museo_slab_500-webfont.eot?#iefix') format('embedded-opentype'),
14
+ font-url('museo_slab_500-webfont.ttf') format('truetype');
15
+ font-weight: bold;
16
+ font-style: normal;
17
+ }
18
+
19
+ @font-face {
20
+ font-family: 'proxima-nova';
21
+ src: font-url('proximanova-webfont.eot');
22
+ src: font-url('proximanova-webfont.eot?#iefix') format('embedded-opentype'),
23
+ font-url('proximanova-webfont.ttf') format('truetype');
24
+ font-weight: normal;
25
+ font-style: normal;
26
+ }
27
+
28
+ @font-face {
29
+ font-family: 'proxima-nova';
30
+ src: font-url('proximanova-bold-webfont.eot');
31
+ src: font-url('proximanova-bold-webfont.eot?#iefix') format('embedded-opentype'),
32
+ font-url('proximanova-bold-webfont.ttf') format('truetype');
33
+ font-weight: bold;
34
+ font-style: normal;
35
+ }
@@ -0,0 +1,27 @@
1
+ //
2
+ // Kyruus Sticky Footers
3
+ // --------------------------------------------------
4
+ // make sure to set .sticky-footer()
5
+
6
+ html, body {
7
+ height: 100%;
8
+ }
9
+ .wrapper {
10
+ min-height: 100%;
11
+ height: auto !important;
12
+ height: 100%;
13
+ }
14
+
15
+ .footer {
16
+ min-width: 990px; // necessary fix for non-responsive layouts
17
+ border-top: 1px solid $grayLighter;
18
+ background-color: #f5f5f5;
19
+
20
+ color: #777;
21
+
22
+ p {
23
+ margin-bottom: 0;
24
+ }
25
+ }
26
+
27
+ @include sticky-footer(); // sets default values for sticky footer
@@ -0,0 +1,26 @@
1
+ //
2
+ // Forms
3
+ // --------------------------------------------------
4
+
5
+ // Compact Horizontal Form
6
+ // --------------------------
7
+
8
+ .form-horizontal.form-horizontal-compact {
9
+ // Increase spacing between groups
10
+ .control-group {
11
+ margin-bottom: $baseLineHeight / 2;
12
+ }
13
+ }
14
+
15
+ // HELP TEXT
16
+ // ---------
17
+
18
+ .help-block,
19
+ .help-inline {
20
+ color: $grayLight; // lighten the text some for contrast
21
+ }
22
+
23
+ .optional {
24
+ color: $grayLight;
25
+ &:after { content: " (Optional)"; }
26
+ }
@@ -0,0 +1,26 @@
1
+ //
2
+ // Jumbotron
3
+ // --------------------------------------------------
4
+
5
+
6
+ // Base styles
7
+ // --------------------------------------------------
8
+
9
+ .jumbotron {
10
+ color:#ffffff;
11
+ text-shadow:0 1px 3px rgba(0,0,0,0.4), 0 0 30px rgba(0,0,0,0.075);
12
+ h1 {
13
+ font-size: 80px;
14
+ letter-spacing: -1px;
15
+ line-height: 1;
16
+ }
17
+ p {
18
+ font-size:24px;
19
+ font-weight: 300;
20
+ line-height: 30px;
21
+ margin-bottom: 30px;
22
+ }
23
+ &.jumbotron-padded {
24
+ padding: 55px 0 45px;
25
+ }
26
+ }
@@ -0,0 +1,38 @@
1
+ //
2
+ // Labels and badges
3
+ // --------------------------------------------------
4
+
5
+
6
+ // Base classes
7
+ .label,
8
+ .badge {
9
+ background-color: mix($grayLight, $grayLighter, 40%);
10
+ }
11
+
12
+ // Set unique padding and border-radii
13
+ .label {
14
+ padding: 3px 4px 2px;
15
+ }
16
+ .badge {
17
+ padding: 3px 9px 2px;
18
+ }
19
+
20
+ // Colors
21
+ // Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
22
+ @each $item in label, badge {
23
+ // Important (red)
24
+ .#{$item}-important { background-color: $red; }
25
+ .#{$item}-important[href] { background-color: darken($red, 10%); }
26
+ // Warnings (orange)
27
+ .#{$item}-warning { background-color: $yellow; color: $grayDark; text-shadow: 0 -1px 0 $yellowLighter; }
28
+ .#{$item}-warning[href] { background-color: darken($yellow, 10%); }
29
+ // Success (green)
30
+ .#{$item}-success { background-color: mix($green, $greenLight, 70%); }
31
+ .#{$item}-success[href] { background-color: darken($green, 10%); }
32
+ // Info (turquoise)
33
+ .#{$item}-info { background-color: mix($blue, $blueLight, 20%); }
34
+ .#{$item}-info[href] { background-color: darken($blue, 10%); }
35
+ // Inverse (black)
36
+ .#{$item}-inverse { background-color: $grayDark; }
37
+ .#{$item}-inverse[href] { background-color: darken($grayDark, 10%); }
38
+ }
@@ -0,0 +1,83 @@
1
+ .padding-none { padding: 0 !important; }
2
+ .padding { padding: 10px !important; }
3
+ .padding-small { padding: 5px !important; }
4
+ .padding-large { padding: 22px !important; }
5
+
6
+ .padding-top-none { padding-top: 0 !important; }
7
+ .padding-top { padding-top: 10px !important; }
8
+ .padding-top-small { padding-top: 5px !important; }
9
+ .padding-top-large { padding-top: 22px !important; }
10
+
11
+ .padding-right-none { padding-right: 0 !important; }
12
+ .padding-right { padding-right: 10px !important; }
13
+ .padding-right-small { padding-right: 5px !important; }
14
+ .padding-right-large { padding-right: 22px !important; }
15
+
16
+ .padding-bottom-none { padding-bottom: 0 !important; }
17
+ .padding-bottom { padding-bottom: 10px !important; }
18
+ .padding-bottom-small { padding-bottom: 5px !important; }
19
+ .padding-bottom-large { padding-bottom: 22px !important; }
20
+
21
+ .padding-left-none { padding-left: 0 !important; }
22
+ .padding-left { padding-left: 10px !important; }
23
+ .padding-left-small { padding-left: 5px !important; }
24
+ .padding-left-large { padding-left: 22px !important; }
25
+
26
+ .margin-none { margin: 0 !important; }
27
+ .margin { margin: 10px !important; }
28
+ .margin-small { margin: 5px !important; }
29
+ .margin-large { margin: 22px !important; }
30
+
31
+ .margin-top-none { margin-top: 0 !important; }
32
+ .margin-top { margin-top: 10px !important; }
33
+ .margin-top-large { margin-top: 22px !important; }
34
+ .margin-top-small { margin-top: 5px !important; }
35
+
36
+ .margin-right-none { margin-right: 0 !important; }
37
+ .margin-right { margin-right: 10px !important; }
38
+ .margin-right-large { margin-right: 22px !important; }
39
+ .margin-right-small { margin-right: 5px !important; }
40
+
41
+ .margin-bottom-none { margin-bottom: 0 !important; }
42
+ .margin-bottom { margin-bottom: 10px !important; }
43
+ .margin-bottom-large { margin-bottom: 22px !important; }
44
+ .margin-bottom-small { margin-bottom: 5px !important; }
45
+
46
+ .margin-left-none { margin-left: 0 !important; }
47
+ .margin-left { margin-left: 10px !important; }
48
+ .margin-left-large { margin-left: 22px !important; }
49
+ .margin-left-small { margin-left: 5px !important; }
50
+
51
+ .border-left-none { border-left: none !important; }
52
+ .border-right-none { border-right: none !important; }
53
+ .border-bottom-none { border-bottom: none !important; }
54
+ .border-top-none { border-top: none !important; }
55
+
56
+ .display-block { display: block; } // use to swap an anchor tag to span a whole row to make click target larger
57
+ .no-underline:hover { text-decoration: none; }
58
+ .clickable { cursor: pointer; }
59
+ .strong { font-weight: bold; }
60
+ .em { font-style: italic; }
61
+ .small { font-size: 85%; } // Ex: 14px base font * 85% = about 12px
62
+ .no-link { color: $grayDark; }
63
+ .text-sans-serif { font-family: $sansFontFamily; }
64
+ .text-ellipsis { @include text-overflow(); } // truncates text to a single line with an ellipsis at the end
65
+ .text-default {
66
+ font-family: $sansFontFamily;
67
+ font-size: $baseFontSize;
68
+ line-height: $baseLineHeight;
69
+ font-weight: normal;
70
+ }
71
+ .hilite {
72
+ color: $linkColor;
73
+ &:hover {
74
+ color: $linkColorHover;
75
+ text-decoration: underline;
76
+ }
77
+ [class^="icon-"], [class*=" icon-"] {
78
+ &:before {
79
+ display: inline;
80
+ }
81
+ }
82
+ }
83
+ .strike { text-decoration: line-through; }