mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-28 14:03:48 +03:00
3b6b5a085d
New standard - ALL .scss files are now indented 4 spaces, no tabs. I want to keep this *consistent* because it has been getting incredibly messy. This applies to all native Ghost sass - 3rd party files (normalize, typeplate, bourbon, breakpoint, etc) are not included. /cc @matthojo @erisds
195 lines
5.4 KiB
SCSS
195 lines
5.4 KiB
SCSS
/*
|
|
* These are Sass variables used to make our CSS more dynamic by re-using
|
|
* common property values throughout our styles. Don't overdo it.
|
|
*
|
|
* Table of Contents:
|
|
*
|
|
* Compass Shit
|
|
* Compass Plugins
|
|
* Colors
|
|
* Gradients
|
|
* Typography
|
|
* Global Styles
|
|
*
|
|
*/
|
|
|
|
|
|
/* =============================================================================
|
|
Bourbon Imports
|
|
============================================================================= */
|
|
|
|
// Bourbon - http://bourbon.io/
|
|
@import "bourbon/_bourbon";
|
|
$rounded: 2px;
|
|
$shadow: rgba(0,0,0,0.05) 0 1px 5px;
|
|
$default-transition-duration: 0.3s;
|
|
|
|
|
|
/* =============================================================================
|
|
Plugins
|
|
============================================================================= */
|
|
|
|
// Breakpoint - http://breakpoint-sass.com/
|
|
@import "breakpoint";
|
|
$breakpoint-default-feature: max-width;
|
|
|
|
// Max widths
|
|
$netbook: 1000px;
|
|
$tablet: 800px;
|
|
$mobile: 400px;
|
|
|
|
// Min widths
|
|
$biggerthan-widescreen: min-width 1500px, min-width 1500px;
|
|
$biggerthan-netbook: min-width 1000px, min-width 1000px;
|
|
$biggerthan-tablet: min-width 800px, min-width 800px;
|
|
$biggerthan-mobile: min-width 400px, min-width 400px;
|
|
|
|
// Heights
|
|
$letterbox: max-height 600px, max-height 600px;
|
|
|
|
// Pixel Densities
|
|
$retina: 2 device-pixel-ratio;
|
|
|
|
|
|
/* =============================================================================
|
|
Colors
|
|
============================================================================= */
|
|
|
|
$darkgrey: #242628;
|
|
$grey: #35393b;
|
|
$midgrey: #7d878a;
|
|
$lightgrey: #e2edf2;
|
|
|
|
$brown: #aaa9a2;
|
|
$midbrown: #c0bfb6;
|
|
$lightbrown: #edece4;
|
|
|
|
$blue: #5BA4E5;
|
|
$red: #e25440;
|
|
$orange: #F2A925;
|
|
$green: #9FBB58;
|
|
|
|
|
|
/* =============================================================================
|
|
Gradients
|
|
============================================================================= */
|
|
|
|
/*
|
|
* Auto Gradients
|
|
*
|
|
* If the gradient mixin is called with 1 value: gradient(#444) - then a second
|
|
* color which is 10% lighter than the entered value will be auto-generated. If
|
|
* the gradient mixin is called with 2 values: gradient(#444,#666) - then those
|
|
* two values will be used instead, as normal.
|
|
*/
|
|
|
|
@mixin gradient($color1: #aaa, $color2: none) {
|
|
|
|
@if $color2 == 'none' {
|
|
background-color: lighten($color1, 10%);
|
|
background-image: -webkit-linear-gradient(bottom, $color1, lighten($color1, 10%));
|
|
background-image: -moz-linear-gradient(bottom, $color1, lighten($color1, 10%));
|
|
background-image: -ms-linear-gradient(bottom, $color1, lighten($color1, 10%));
|
|
background-image: linear-gradient(bottom, $color1, lighten($color1, 10%));
|
|
} @else {
|
|
background-color: $color2;
|
|
background-image: -webkit-linear-gradient(bottom, $color1, $color2);
|
|
background-image: -moz-linear-gradient(bottom, $color1, $color2);
|
|
background-image: -ms-linear-gradient(bottom, $color1, $color2);
|
|
background-image: linear-gradient(to top, $color1, $color2);
|
|
}
|
|
|
|
}
|
|
|
|
// The same as the above, but with the colours reversed.
|
|
|
|
@mixin inversegradient($color1: #aaa, $color2: none) {
|
|
|
|
@if $color2 == 'none' {
|
|
background-color: $color1;
|
|
background-image: -webkit-linear-gradient(bottom, lighten($color1, 10%), $color1);
|
|
background-image: -moz-linear-gradient(bottom, lighten($color1, 10%), $color1);
|
|
background-image: -ms-linear-gradient(bottom, lighten($color1, 10%), $color1);
|
|
background-image: linear-gradient(bottom, lighten($color1, 10%), $color1);
|
|
} @else {
|
|
background-color: $color1;
|
|
background-image: -webkit-linear-gradient(bottom, $color2, $color1);
|
|
background-image: -moz-linear-gradient(bottom, $color2, $color1);
|
|
background-image: -ms-linear-gradient(bottom, $color2, $color1);
|
|
background-image: linear-gradient(to top, $color2, $color1);
|
|
}
|
|
|
|
}
|
|
|
|
|
|
/* =============================================================================
|
|
Typography
|
|
============================================================================= */
|
|
|
|
@mixin baseline {
|
|
margin: 1.6em 0;
|
|
}
|
|
|
|
//Does this really need to be a mixin?
|
|
@mixin hidden {
|
|
text-indent: -9999px;
|
|
visibility: hidden;
|
|
display: none;
|
|
}
|
|
|
|
|
|
/* =============================================================================
|
|
Global Elements
|
|
============================================================================= */
|
|
|
|
%box, .box {
|
|
padding: 15px;
|
|
margin-bottom: 15px;
|
|
background: #fff;
|
|
position: relative;
|
|
box-shadow: $shadow;
|
|
|
|
header {
|
|
height:14px;
|
|
border-bottom: 1px solid $lightbrown;
|
|
padding-bottom: 15px;
|
|
margin-bottom: 15px;
|
|
text-transform: uppercase;
|
|
font-size:0.85em;
|
|
color: $brown;
|
|
}
|
|
|
|
footer {
|
|
height:14px;
|
|
border-top: 1px solid $lightbrown;
|
|
padding-top: 10px;
|
|
margin-top:15px;
|
|
text-transform: uppercase;
|
|
font-size:0.85em;
|
|
color: $brown;
|
|
}
|
|
|
|
header a,
|
|
footer a {
|
|
color:$brown;
|
|
|
|
&:hover {
|
|
color:$darkgrey;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* =============================================================================
|
|
Animations
|
|
============================================================================= */
|
|
|
|
@include keyframes(fade-out) {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|