Commit 755e4a470015ad83337943d62a32ede2921eda53
1 parent
eb1004f7
Exists in
master
and in
4 other branches
Removed css declarations out of main.scss, so main is only a collector
Fonts, variables and mixins are now all in their own stylesheets
Showing
4 changed files
with
106 additions
and
94 deletions
Show diff stats
| @@ -0,0 +1,7 @@ | @@ -0,0 +1,7 @@ | ||
| 1 | +@font-face{ | ||
| 2 | + font-family: Korolev; | ||
| 3 | + src: font-url('korolev-medium-compressed.otf'); | ||
| 4 | +} | ||
| 5 | + | ||
| 6 | +/** Typo **/ | ||
| 7 | +$monospace: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono', 'lucida console', monospace; | ||
| 0 | \ No newline at end of file | 8 | \ No newline at end of file |
app/assets/stylesheets/main.scss
| @@ -5,101 +5,26 @@ $baseLineHeight: 18px !default; | @@ -5,101 +5,26 @@ $baseLineHeight: 18px !default; | ||
| 5 | // BOOTSTRAP | 5 | // BOOTSTRAP |
| 6 | // ------------------ | 6 | // ------------------ |
| 7 | @import "bootstrap"; | 7 | @import "bootstrap"; |
| 8 | +@import "bootstrap-responsive"; | ||
| 9 | +@import "font-awesome"; | ||
| 8 | 10 | ||
| 9 | -// BOOTSTRAP RESPONSIVE | ||
| 10 | -// ------------------ | ||
| 11 | -@import "bootstrap/responsive-utilities"; | ||
| 12 | -@import "bootstrap/responsive-1200px-min"; | ||
| 13 | - | ||
| 14 | -// FONT AWESOME | ||
| 15 | -@import 'font-awesome'; | ||
| 16 | - | ||
| 17 | -/** GitLab colors **/ | ||
| 18 | -$link_color: #3A89A3; | ||
| 19 | -$blue_link: #2FA0BB; | ||
| 20 | -$style_color: #474D57; | ||
| 21 | -$hover: #D9EDF7; | ||
| 22 | -$hover_border: #ADF; | ||
| 23 | - | ||
| 24 | -/** GitLab Fonts **/ | ||
| 25 | -@font-face { font-family: Korolev; src: font-url('korolev-medium-compressed.otf'); } | ||
| 26 | -$monospace: 'Menlo', 'Liberation Mono', 'Consolas', 'Courier New', 'andale mono', 'lucida console', monospace; | ||
| 27 | - | ||
| 28 | -/** MIXINS **/ | ||
| 29 | -@mixin shade { | ||
| 30 | - -moz-box-shadow: 0 0 3px #ddd; | ||
| 31 | - -webkit-box-shadow: 0 0 3px #ddd; | ||
| 32 | - box-shadow: 0 0 3px #ddd; | ||
| 33 | -} | ||
| 34 | - | ||
| 35 | -@mixin solid_shade { | ||
| 36 | - -moz-box-shadow: 0 0 0 3px #f1f1f1; | ||
| 37 | - -webkit-box-shadow: 0 0 0 3px #f1f1f1; | ||
| 38 | - box-shadow: 0 0 0 3px #f1f1f1; | ||
| 39 | -} | ||
| 40 | - | ||
| 41 | -@mixin border-radius($radius) { | ||
| 42 | - -moz-border-radius: $radius; | ||
| 43 | - -webkit-border-radius: $radius; | ||
| 44 | - border-radius: $radius; | ||
| 45 | -} | ||
| 46 | - | ||
| 47 | -@mixin round-borders-bottom($radius) { | ||
| 48 | - border-top: 1px solid #eaeaea; | ||
| 49 | - -moz-border-radius-bottomright: $radius; | ||
| 50 | - -moz-border-radius-bottomleft: $radius; | ||
| 51 | - border-bottom-right-radius: $radius; | ||
| 52 | - border-bottom-left-radius: $radius; | ||
| 53 | - -webkit-border-bottom-left-radius: $radius; | ||
| 54 | - -webkit-border-bottom-right-radius: $radius; | ||
| 55 | -} | ||
| 56 | - | ||
| 57 | -@mixin round-borders-top($radius) { | ||
| 58 | - border-top: 1px solid #eaeaea; | ||
| 59 | - -moz-border-radius-topright: $radius; | ||
| 60 | - -moz-border-radius-topleft: $radius; | ||
| 61 | - border-top-right-radius: $radius; | ||
| 62 | - border-top-left-radius: $radius; | ||
| 63 | - -webkit-border-top-left-radius: $radius; | ||
| 64 | - -webkit-border-top-right-radius: $radius; | ||
| 65 | -} | ||
| 66 | - | ||
| 67 | -@mixin round-borders-all($radius) { | ||
| 68 | - border: 1px solid #eaeaea; | ||
| 69 | - -moz-border-radius: $radius; | ||
| 70 | - -webkit-border-radius: $radius; | ||
| 71 | - border-radius: $radius; | ||
| 72 | -} | ||
| 73 | - | ||
| 74 | -@mixin bg-gradient($from, $to) { | ||
| 75 | - background-image: -webkit-gradient(linear, 0 0, 0 100%, from($from), to($to)); | ||
| 76 | - background-image: -webkit-linear-gradient($from, $to); | ||
| 77 | - background-image: -moz-linear-gradient($from, $to); | ||
| 78 | - background-image: -o-linear-gradient($from, $to); | ||
| 79 | -} | ||
| 80 | - | ||
| 81 | -@mixin bg-light-gray-gradient { | ||
| 82 | - background:#f1f1f1; | ||
| 83 | - background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #f5f5f5), to(#e1e1e1)); | ||
| 84 | - background-image: -webkit-linear-gradient(#f5f5f5 6.6%, #e1e1e1); | ||
| 85 | - background-image: -moz-linear-gradient(#f5f5f5 6.6%, #e1e1e1); | ||
| 86 | - background-image: -o-linear-gradient(#f5f5f5 6.6%, #e1e1e1); | ||
| 87 | -} | ||
| 88 | - | ||
| 89 | -@mixin bg-gray-gradient { | ||
| 90 | - background:#eee; | ||
| 91 | - background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf)); | ||
| 92 | - background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf); | ||
| 93 | - background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf); | ||
| 94 | - background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf); | ||
| 95 | -} | ||
| 96 | - | ||
| 97 | -@mixin bg-dark-gray-gradient { | ||
| 98 | - background:#eee; | ||
| 99 | - background-image: -webkit-linear-gradient(#e9e9e9, #d7d7d7); | ||
| 100 | - background-image: -moz-linear-gradient(#e9e9e9, #d7d7d7); | ||
| 101 | - background-image: -o-linear-gradient(#e9e9e9, #d7d7d7); | ||
| 102 | -} | 11 | +/** |
| 12 | + * Variables | ||
| 13 | + * Contains colors | ||
| 14 | + */ | ||
| 15 | +@import "variables.scss"; | ||
| 16 | + | ||
| 17 | +/** | ||
| 18 | + * Custom fonts | ||
| 19 | + * Contains @font-face font Korolev and default $monotype | ||
| 20 | + */ | ||
| 21 | +@import "fonts.scss"; | ||
| 22 | + | ||
| 23 | +/** | ||
| 24 | + * General mixins. | ||
| 25 | + * Contains rounded borders, gradients and shades | ||
| 26 | + */ | ||
| 27 | +@import "mixins.scss"; | ||
| 103 | 28 | ||
| 104 | /** | 29 | /** |
| 105 | * Header of application. | 30 | * Header of application. |
| @@ -0,0 +1,74 @@ | @@ -0,0 +1,74 @@ | ||
| 1 | +@mixin shade { | ||
| 2 | + -moz-box-shadow: 0 0 3px #ddd; | ||
| 3 | + -webkit-box-shadow: 0 0 3px #ddd; | ||
| 4 | + box-shadow: 0 0 3px #ddd; | ||
| 5 | +} | ||
| 6 | + | ||
| 7 | +@mixin solid_shade { | ||
| 8 | + -moz-box-shadow: 0 0 0 3px #f1f1f1; | ||
| 9 | + -webkit-box-shadow: 0 0 0 3px #f1f1f1; | ||
| 10 | + box-shadow: 0 0 0 3px #f1f1f1; | ||
| 11 | +} | ||
| 12 | + | ||
| 13 | +@mixin border-radius($radius) { | ||
| 14 | + -moz-border-radius: $radius; | ||
| 15 | + -webkit-border-radius: $radius; | ||
| 16 | + border-radius: $radius; | ||
| 17 | +} | ||
| 18 | + | ||
| 19 | +@mixin round-borders-bottom($radius) { | ||
| 20 | + border-top: 1px solid #eaeaea; | ||
| 21 | + -webkit-border-bottom-left-radius: $radius; | ||
| 22 | + -webkit-border-bottom-right-radius: $radius; | ||
| 23 | + -moz-border-radius-bottomright: $radius; | ||
| 24 | + -moz-border-radius-bottomleft: $radius; | ||
| 25 | + border-bottom-right-radius: $radius; | ||
| 26 | + border-bottom-left-radius: $radius; | ||
| 27 | +} | ||
| 28 | + | ||
| 29 | +@mixin round-borders-top($radius) { | ||
| 30 | + border-top: 1px solid #eaeaea; | ||
| 31 | + -moz-border-radius-topright: $radius; | ||
| 32 | + -moz-border-radius-topleft: $radius; | ||
| 33 | + border-top-right-radius: $radius; | ||
| 34 | + border-top-left-radius: $radius; | ||
| 35 | + -webkit-border-top-left-radius: $radius; | ||
| 36 | + -webkit-border-top-right-radius: $radius; | ||
| 37 | +} | ||
| 38 | + | ||
| 39 | +@mixin round-borders-all($radius) { | ||
| 40 | + border: 1px solid #eaeaea; | ||
| 41 | + -moz-border-radius: $radius; | ||
| 42 | + -webkit-border-radius: $radius; | ||
| 43 | + border-radius: $radius; | ||
| 44 | +} | ||
| 45 | + | ||
| 46 | +@mixin bg-gradient($from, $to) { | ||
| 47 | + background-image: -webkit-gradient(linear, 0 0, 0 100%, from($from), to($to)); | ||
| 48 | + background-image: -webkit-linear-gradient($from, $to); | ||
| 49 | + background-image: -moz-linear-gradient($from, $to); | ||
| 50 | + background-image: -o-linear-gradient($from, $to); | ||
| 51 | +} | ||
| 52 | + | ||
| 53 | +@mixin bg-light-gray-gradient { | ||
| 54 | + background:#f1f1f1; | ||
| 55 | + background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #f5f5f5), to(#e1e1e1)); | ||
| 56 | + background-image: -webkit-linear-gradient(#f5f5f5 6.6%, #e1e1e1); | ||
| 57 | + background-image: -moz-linear-gradient(#f5f5f5 6.6%, #e1e1e1); | ||
| 58 | + background-image: -o-linear-gradient(#f5f5f5 6.6%, #e1e1e1); | ||
| 59 | +} | ||
| 60 | + | ||
| 61 | +@mixin bg-gray-gradient { | ||
| 62 | + background:#eee; | ||
| 63 | + background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf)); | ||
| 64 | + background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf); | ||
| 65 | + background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf); | ||
| 66 | + background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf); | ||
| 67 | +} | ||
| 68 | + | ||
| 69 | +@mixin bg-dark-gray-gradient { | ||
| 70 | + background:#eee; | ||
| 71 | + background-image: -webkit-linear-gradient(#e9e9e9, #d7d7d7); | ||
| 72 | + background-image: -moz-linear-gradient(#e9e9e9, #d7d7d7); | ||
| 73 | + background-image: -o-linear-gradient(#e9e9e9, #d7d7d7); | ||
| 74 | +} |