mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-03-11 02:12:21 -05:00
Swap out Ruby Sass for Node Sass
- Uses Node Bourbon https://www.npmjs.org/package/node-bourbon - Produces source maps - Removed all ruby dependencie History: - Remove bourbon from package and cleanup grunt tasks - Un-bourbon keyframe animations - Un-bourbon transitions - Un-bourbon box-sizing - Un-bourbon font-feature-settings - Import bourbon clearfix mixin - Un-bourbon linear gradients - Un-bourbon input types - Un-bourbon positions - Un-bourbon transforms - Un-bourbon notification animations - Un-bourbon uploader box-sizing - Un-bourbon border-radius - Un-bourbon splitbutton transitions - Add triangle mixin - Un-bourbon default container positioning - Un-bourbon flexbox properties - Fix triangle mixin - It now has the same output as the Bourbon mixin - Add autoprefixer - Correct global default font size - Remove unwanted prefixes - Because, y'know, autoprefixer - Output from node sass migration - Includes all the files we usually have, plus source maps
This commit is contained in:
Paul Adam Davis
Hannah Wolfe
parent
1c37ad9a3a
commit
7782c48383
28 changed files with 784 additions and 1059 deletions
5
Gemfile
5
Gemfile
|
|
@ -1,5 +0,0 @@
|
|||
source 'https://rubygems.org'
|
||||
|
||||
gem 'bourbon', "~> 4.0.1"
|
||||
gem "sass", "~> 3.3.1"
|
||||
|
||||
15
Gemfile.lock
15
Gemfile.lock
|
|
@ -1,15 +0,0 @@
|
|||
GEM
|
||||
remote: https://rubygems.org/
|
||||
specs:
|
||||
bourbon (4.0.1)
|
||||
sass (~> 3.3)
|
||||
thor
|
||||
sass (3.3.1)
|
||||
thor (0.19.1)
|
||||
|
||||
PLATFORMS
|
||||
ruby
|
||||
|
||||
DEPENDENCIES
|
||||
bourbon (~> 4.0.1)
|
||||
sass (~> 3.3.1)
|
||||
|
|
@ -12,14 +12,14 @@
|
|||
overflow-x: auto;
|
||||
overflow-y: scroll;
|
||||
z-index: 1040;
|
||||
@include transition(all 0.15s linear 0s);
|
||||
@include transform(translateZ(0));
|
||||
transition: all 0.15s linear 0s;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.fade {
|
||||
opacity: 0;
|
||||
@include transition(opacity 0.2s linear 0s);
|
||||
@include transform(translateZ(0));
|
||||
transition: opacity 0.2s linear 0s;
|
||||
transform: translateZ(0);
|
||||
|
||||
&.in {
|
||||
opacity: 1;
|
||||
|
|
@ -97,7 +97,7 @@
|
|||
z-index: 9999;
|
||||
|
||||
@include icon($i-close, 1.4rem, $midgrey) {
|
||||
@include transition(color 0.3s linear);
|
||||
transition: color 0.3s linear;
|
||||
};
|
||||
&:hover:before {
|
||||
color: $grey;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,11 @@
|
|||
// The main wrapper, sets position and bg colour.
|
||||
.global-nav {
|
||||
height: 60px;
|
||||
@include position(fixed, 0px 0px auto 0px);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: auto;
|
||||
left: 0;
|
||||
z-index: 800;
|
||||
background: $darkgrey;
|
||||
|
||||
|
|
@ -42,13 +46,13 @@
|
|||
text-transform: uppercase;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
@include transition(color 0.5s, background 0.5s);
|
||||
transition: color 0.5s, background 0.5s;
|
||||
}
|
||||
.nav-item.active .nav-label,
|
||||
.nav-item:hover .nav-label {
|
||||
color: #fff;
|
||||
background: darken($darkgrey, 9%);
|
||||
@include transition(color 0.1s, background 0.1s);
|
||||
transition: color 0.1s, background 0.1s;
|
||||
}
|
||||
|
||||
// Ghost branding
|
||||
|
|
@ -59,7 +63,7 @@
|
|||
color: lighten($grey, 20%);
|
||||
font-size: 1.2rem;
|
||||
line-height: 1em;
|
||||
@include transition(color 0.5s);
|
||||
transition: color 0.5s;
|
||||
|
||||
span {
|
||||
display: none;
|
||||
|
|
@ -68,7 +72,7 @@
|
|||
.ghost-logo:hover,
|
||||
.ghost-logo:focus {
|
||||
color: $lightgrey;
|
||||
@include transition(color 0.1s);
|
||||
transition: color 0.1s;
|
||||
|
||||
.nav-label {
|
||||
background: transparent;
|
||||
|
|
@ -115,7 +119,7 @@
|
|||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@include transition(background 0.5s);
|
||||
transition: background 0.5s;
|
||||
|
||||
small {
|
||||
display: none; // hide until mobile
|
||||
|
|
@ -130,7 +134,7 @@
|
|||
&:hover .name {
|
||||
color: rgba(255,255,255,0.9);
|
||||
background: darken($darkgrey, 7%);
|
||||
@include transition(background 0.1s);
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
i:before {
|
||||
|
|
@ -170,15 +174,15 @@
|
|||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
@include transform(translate3d(-60px, 0px, 0px)); // Not off the screen, to give a parallax effect
|
||||
@include transition(transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1));
|
||||
transform: translate3d(-60px, 0px, 0px); // Not off the screen, to give a parallax effect
|
||||
transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
|
||||
|
||||
.thing, .thing2 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.global-nav-expanded {
|
||||
@include transform(translate3d(0, 0px, 0px));
|
||||
transform: translate3d(0, 0px, 0px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -223,12 +227,16 @@
|
|||
|
||||
// Drop it to the bottom of the menu
|
||||
.user-menu {
|
||||
@include position(absolute, auto 0px 0px 0px);
|
||||
position: absolute;
|
||||
top: auto;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: auto;
|
||||
padding: 15px;
|
||||
border-bottom: none;
|
||||
border-top: $darkgrey 1px solid;
|
||||
@include transition(color 0.5s, background 0.5s);
|
||||
transition: color 0.5s, background 0.5s;
|
||||
|
||||
.nav-label {
|
||||
padding: 0;
|
||||
|
|
@ -261,11 +269,11 @@
|
|||
&:hover {
|
||||
color: rgba(255,255,255,0.9);
|
||||
background: $darkgrey;
|
||||
@include transition(color 0.1s, background 0.1s);
|
||||
transition: color 0.1s, background 0.1s;
|
||||
|
||||
.name {
|
||||
background: transparent;
|
||||
@include transition(none);
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
|
||||
// TODO: What is this? Docs plz.
|
||||
.js-bb-notification {
|
||||
@include transform(translateZ(0));
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
//
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
background: $blue;
|
||||
position: relative;
|
||||
box-shadow: $shadow;
|
||||
@include transform(translateZ(0));
|
||||
transform: translateZ(0);
|
||||
|
||||
@media (max-width: 400px) {
|
||||
margin-bottom: 1px;
|
||||
|
|
@ -99,14 +99,14 @@
|
|||
background: $green;
|
||||
|
||||
&.notification-passive {
|
||||
@include animation(fade-out 1s linear);
|
||||
@include animation-delay(3s);
|
||||
@include animation-iteration-count(1);
|
||||
@include animation-fill-mode(forwards);
|
||||
animation: fade-out 1s linear;
|
||||
animation-delay: 3s;
|
||||
animation-iteration-count: 1;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
&.notification-passive:hover {
|
||||
@include animation(fade-in-snap 0.2s linear);
|
||||
animation: fade-in-snap 0.2s linear;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -87,13 +87,15 @@
|
|||
&:first-child {
|
||||
> a,
|
||||
> span {
|
||||
@include border-left-radius($border-radius);
|
||||
border-top-left-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
> a,
|
||||
> span {
|
||||
@include border-right-radius($border-radius);
|
||||
border-top-right-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,14 +6,14 @@
|
|||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
|
||||
.btn {
|
||||
position: relative;
|
||||
float: left;
|
||||
|
||||
|
||||
// Prevent double border between buttons
|
||||
+ .btn { margin-left: -1px; }
|
||||
|
||||
|
||||
// Make sure the hovered element is always on
|
||||
// top so overlap from .btn + btn. invisible
|
||||
&:hover,
|
||||
|
|
@ -23,12 +23,13 @@
|
|||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Flatten out the right side
|
||||
.btn:first-child {
|
||||
margin-left: 0;
|
||||
&:not(:last-child):not(.dropdown-toggle) {
|
||||
@include border-right-radius(0);
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -36,7 +37,8 @@
|
|||
.dropdown-toggle {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
@include border-left-radius(0);
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
|
||||
&.btn-sm {
|
||||
padding-left: 10px;
|
||||
|
|
@ -46,7 +48,7 @@
|
|||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// This is the additional dropdown arrow, to the right of the button.
|
||||
.options {
|
||||
|
|
@ -55,46 +57,46 @@
|
|||
|
||||
@include icon($i-chevron-down, 9px) {
|
||||
margin-top: -3px;
|
||||
@include transition(margin-top 0.3s ease);
|
||||
transition: margin-top 0.3s ease;
|
||||
/* Transition of transform properties are split out due to a
|
||||
defect in the vendor prefixing of transform transitions.
|
||||
See: http://github.com/thoughtbot/bourbon/pull/86 */
|
||||
@include transition-property(transform);
|
||||
@include transition-duration(0.3);
|
||||
@include transition-timing-function(ease);
|
||||
transition-property: transform;
|
||||
transition-duration: 0.3;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Keep the arrow spun when the associated menu is open
|
||||
&.active .options:before {
|
||||
@include transform(rotate(-360deg));
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
|
||||
&.up.active .options:before {
|
||||
margin-top:-4px;
|
||||
@include transform(rotate(540deg));
|
||||
transform: rotate(540deg);
|
||||
}
|
||||
|
||||
// Spin the arrow on hover and while menu is open
|
||||
&:hover .options:before,
|
||||
&:focus .options:before {
|
||||
will-change: transform;
|
||||
@include transform(rotate(-360deg));
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
|
||||
// If it has a class of "up" spin it an extra 180degress to point up
|
||||
&.up:hover .options:before,
|
||||
&.up:focus .options:before {
|
||||
margin-top:-4px;
|
||||
@include transform(rotate(540deg));
|
||||
@include transition-property(transform);
|
||||
@include transition-duration(0.6);
|
||||
@include transition-timing-function(ease);
|
||||
transform: rotate(540deg);
|
||||
transition-property: transform;
|
||||
transition-duration: 0.6;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
%splitbtn {
|
||||
|
|
@ -105,7 +107,8 @@
|
|||
|
||||
button {
|
||||
font-size: 11px; // hack to restore font size
|
||||
@include border-right-radius(0);
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
// This is the additional dropdown arrow, to the right of the button.
|
||||
|
|
@ -132,25 +135,25 @@
|
|||
right: 50%;
|
||||
margin-top: -3px;
|
||||
margin-right: -5px;
|
||||
@include transition(margin-top 0.3s ease);
|
||||
transition: margin-top 0.3s ease;
|
||||
/* Transition of transform properties are split out due to a
|
||||
defect in the vendor prefixing of transform transitions.
|
||||
See: http://github.com/thoughtbot/bourbon/pull/86 */
|
||||
@include transition-property(transform);
|
||||
@include transition-duration(0.3);
|
||||
@include transition-timing-function(ease);
|
||||
transition-property: transform;
|
||||
transition-duration: 0.3;
|
||||
transition-timing-function: ease;
|
||||
};
|
||||
|
||||
@include transition(background-color 0.3s linear);
|
||||
transition: background-color 0.3s linear;
|
||||
|
||||
// Keep the arrow spun when the associated menu is open
|
||||
&.active:before {
|
||||
@include transform(rotate(360deg));
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
&.up.active:before {
|
||||
margin-top:-4px;
|
||||
@include transform(rotate(540deg));
|
||||
transform: rotate(540deg);
|
||||
}
|
||||
|
||||
// Spin the arrow on hover and while menu is open
|
||||
|
|
@ -161,7 +164,7 @@
|
|||
background: #f8f8f8;
|
||||
@include icon($i-chevron-down) {
|
||||
will-change: transform;
|
||||
@include transform(rotate(360deg));
|
||||
transform: rotate(360deg);
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -170,10 +173,10 @@
|
|||
&.up:focus {
|
||||
@include icon($i-chevron-down) {
|
||||
margin-top:-4px;
|
||||
@include transform(rotate(540deg));
|
||||
@include transition-property(transform);
|
||||
@include transition-duration(0.6);
|
||||
@include transition-timing-function(ease);
|
||||
transform: rotate(540deg);
|
||||
transition-property: transform;
|
||||
transition-duration: 0.6;
|
||||
transition-timing-function: ease;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -236,7 +239,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Alternative style with more visual attention,
|
||||
// Alternative style with more visual attention,
|
||||
// but no extra semantic meaning
|
||||
.splitbutton-alt {
|
||||
@extend %splitbtn;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
// --------------------------------------------------
|
||||
|
||||
.image-uploader {
|
||||
@include box-sizing(border-box);
|
||||
@include baseline;
|
||||
position: relative;
|
||||
overflow:hidden;
|
||||
|
|
@ -30,7 +29,7 @@
|
|||
@include icon($i-image, 60px, darken($lightbrown, 3%)) {
|
||||
display: inline-block;
|
||||
vertical-align: initial;
|
||||
@include transition(transform 1s ease);
|
||||
transition: transform 1s ease;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -80,8 +79,8 @@
|
|||
right: 0;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
@include transform-origin(right);
|
||||
@include transform( scale(14));
|
||||
transform-origin: right;
|
||||
transform: scale(14);
|
||||
font-size: 23px;
|
||||
direction: ltr;
|
||||
cursor: pointer;
|
||||
|
|
@ -93,7 +92,6 @@
|
|||
|
||||
&.url{
|
||||
font: -webkit-small-control;
|
||||
box-sizing: border-box;
|
||||
width: 276px;
|
||||
vertical-align: middle;
|
||||
padding: 9px 7px;
|
||||
|
|
@ -103,8 +101,7 @@
|
|||
background: #fff;
|
||||
border: #e3e1d5 1px solid;
|
||||
border-radius: 4px;
|
||||
-webkit-transition: all 0.15s ease-in-out;
|
||||
-moz-transition: all 0.15s ease-in-out;
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -113,7 +110,7 @@
|
|||
margin: -19px 0 44px 0;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
@include linear-gradient(to bottom, #f5f5f5, #f9f9f9);
|
||||
background: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
|
||||
border-radius: 12px;
|
||||
box-shadow: (rgba(0,0,0,0.1) 0 1px 2px inset);
|
||||
}
|
||||
|
|
@ -151,7 +148,6 @@
|
|||
// TODO: Find a better name for this.
|
||||
|
||||
.pre-image-uploader {
|
||||
@include box-sizing(border-box);
|
||||
@include baseline;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
// Fade in
|
||||
// --------------------------------------------------
|
||||
|
||||
@include keyframes(fade-in) {
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
@ -11,10 +11,10 @@
|
|||
}
|
||||
}
|
||||
.fade-in {
|
||||
@include animation(fade-in 0.2s);
|
||||
animation: fade-in 0.2s;
|
||||
}
|
||||
|
||||
@include keyframes(fade-in-snap) {
|
||||
@keyframes fade-in-snap {
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
// Fade out
|
||||
// --------------------------------------------------
|
||||
|
||||
@include keyframes(fade-out) {
|
||||
@keyframes fade-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -34,5 +34,5 @@
|
|||
}
|
||||
}
|
||||
.fade-out {
|
||||
@include animation(fade-out 0.5s);
|
||||
animation: fade-out 0.5s;
|
||||
}
|
||||
|
|
@ -6,6 +6,14 @@
|
|||
margin: 1.6em 0;
|
||||
}
|
||||
|
||||
@mixin clearfix {
|
||||
&:after {
|
||||
content:"";
|
||||
display:table;
|
||||
clear:both;
|
||||
}
|
||||
}
|
||||
|
||||
// User select
|
||||
// For selecting text on the page
|
||||
|
||||
|
|
@ -92,3 +100,50 @@
|
|||
margin-right: ($gutter / -2);
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
//==== Simple SCSS mixin to create CSS triangles
|
||||
//==== Example: @include css-triangle (10px, #fff, "up");
|
||||
@mixin triangle ($size: 20px, $color: #000, $direction: "down") {
|
||||
$size: $size / 2;
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
@if $direction == "down" {
|
||||
border-left: $size solid #{setTriangleColor($direction, "left", $color)};
|
||||
border-right: $size solid #{setTriangleColor($direction, "right", $color)};
|
||||
border-top: $size solid #{setTriangleColor($direction, "top", $color)};
|
||||
}
|
||||
|
||||
@if $direction == "up" {
|
||||
border-left: $size solid #{setTriangleColor($direction, "left", $color)};
|
||||
border-right: $size solid #{setTriangleColor($direction, "right", $color)};
|
||||
border-bottom: $size solid #{setTriangleColor($direction, "bottom", $color)};
|
||||
}
|
||||
|
||||
@if $direction == "left" {
|
||||
border-right: $size solid #{setTriangleColor($direction, "right", $color)};
|
||||
border-top: $size solid #{setTriangleColor($direction, "top", $color)};
|
||||
border-bottom: $size solid #{setTriangleColor($direction, "bottom", $color)};
|
||||
}
|
||||
|
||||
@if $direction == "right" {
|
||||
border-left: $size solid #{setTriangleColor($direction, "left", $color)};
|
||||
border-bottom: $size solid #{setTriangleColor($direction, "bottom", $color)};
|
||||
border-top: $size solid #{setTriangleColor($direction, "top", $color)};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//Utility function to return the relevant colour depending on what type of arrow it is
|
||||
@function setTriangleColor($direction, $side, $color) {
|
||||
|
||||
@if $direction == "left" and $side == "right"
|
||||
or $direction == "right" and $side == "left"
|
||||
or $direction == "down" and $side == "top"
|
||||
or $direction == "up" and $side == "bottom" {
|
||||
@return $color
|
||||
} @else {
|
||||
@return "transparent";
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -88,11 +88,11 @@
|
|||
clear: both;
|
||||
padding: 8px 0 8px 8px;
|
||||
width: 216px;
|
||||
@include transition(background ease 0.25s);
|
||||
transition: background ease 0.25s;
|
||||
|
||||
@media (max-width: 630px) {
|
||||
width: 264px;
|
||||
@include transition(none);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
@ -187,7 +187,7 @@
|
|||
width: 280px;
|
||||
padding: 8px 10px;
|
||||
@media (min-width: 631px) {
|
||||
@include transition(background ease 0.25s);
|
||||
transition: background ease 0.25s;
|
||||
}
|
||||
|
||||
@media (max-width: 630px) {
|
||||
|
|
@ -263,7 +263,7 @@
|
|||
.email {
|
||||
padding: 8px 10px;
|
||||
border-radius: 2px;
|
||||
@include transition(background ease 0.25s);
|
||||
transition: background ease 0.25s;
|
||||
|
||||
&:focus {
|
||||
border: none;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,11 @@
|
|||
// --------------------------------------------------
|
||||
|
||||
#container {
|
||||
@include position(absolute, 0px 0px 0px 0px);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -13,16 +17,20 @@
|
|||
|
||||
// The <main> content wrapper
|
||||
.viewport {
|
||||
@include position(absolute, 0px 0px 0px 0px);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
z-index: 500; // Above the .global-nav when collapsed
|
||||
|
||||
@media (max-width: 900px) {
|
||||
@include transition(transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1));
|
||||
transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
|
||||
}
|
||||
|
||||
&.global-nav-expanded {
|
||||
@include transform(translate3d(260px, 0px, 0px));
|
||||
transform: translate3d(260px, 0px, 0px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -89,7 +97,11 @@
|
|||
// like the header is position:fixed.
|
||||
|
||||
.page-content {
|
||||
@include position(absolute, 60px 0px 0px 0px);
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: #fff;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
|
|
|||
|
|
@ -394,18 +394,18 @@ body.zen {
|
|||
opacity: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
@include transition(all 0.5s ease-out);
|
||||
transition: all 0.5s ease-out;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
top: 0;
|
||||
@include transition(all 0.5s ease-out);
|
||||
transition: all 0.5s ease-out;
|
||||
}
|
||||
|
||||
.entry-markdown,
|
||||
.entry-preview {
|
||||
bottom: 0;
|
||||
@include transition(all 0.5s ease-out);
|
||||
transition: all 0.5s ease-out;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -426,7 +426,7 @@ body.zen {
|
|||
right: 0;
|
||||
z-index: 900;
|
||||
box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
|
||||
@include transform(translateZ(0));
|
||||
transform: translateZ(0);
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
font-weight: normal;
|
||||
|
|
@ -502,7 +502,7 @@ body.zen {
|
|||
right: 220px;
|
||||
width: 20px;
|
||||
height: 26px;
|
||||
@include linear-gradient(left, rgba(26, 28, 29, 0.00), rgba(26, 28, 29, 1.00));
|
||||
background: linear-gradient(left, rgba(26, 28, 29, 0.00), rgba(26, 28, 29, 1.00));
|
||||
z-index: 9999;
|
||||
pointer-events: none;
|
||||
|
||||
|
|
@ -525,7 +525,7 @@ body.zen {
|
|||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
white-space: nowrap;
|
||||
@include transition(width 0.2s linear);
|
||||
transition: width 0.2s linear;
|
||||
|
||||
@media (max-width: 400px) {
|
||||
display: block;
|
||||
|
|
@ -539,7 +539,7 @@ body.zen {
|
|||
float: left;
|
||||
@include icon($i-tag);
|
||||
padding: 1px 8px 0 8px;
|
||||
@include transition;
|
||||
transition: all 0.15s ease-out 0s;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
|
@ -581,7 +581,7 @@ body.zen {
|
|||
margin-left: 4px;
|
||||
vertical-align: 10%;
|
||||
text-shadow: rgba(255,255,255,0.15) 0 1px 0;
|
||||
@include transition;
|
||||
transition: all 0.15s ease-out 0s;
|
||||
}
|
||||
display: inline;
|
||||
margin-right: 2px;
|
||||
|
|
@ -680,7 +680,7 @@ body.zen {
|
|||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
color: $midgrey;
|
||||
@include transition;
|
||||
transition: all 0.15s ease-out 0s;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
|
||||
|
|
|
|||
|
|
@ -47,8 +47,6 @@
|
|||
&:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
color: $midbrown;
|
||||
font-size: 2rem;
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@
|
|||
z-index: 300;
|
||||
border-top: #edece4 1px solid;
|
||||
box-shadow: #fff 1px 0 0, #edece4 0 1px 0;
|
||||
@include transition;
|
||||
transition: all 0.15s ease-out 0s;
|
||||
|
||||
a {
|
||||
color: $darkgrey;
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
border: none;
|
||||
color: #fff;
|
||||
background: lighten($darkgrey, 10%);
|
||||
@include transition(background 0.25s ease);
|
||||
transition: background 0.25s ease;
|
||||
|
||||
&:focus {
|
||||
border:none;
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
height: 110px;
|
||||
@include linear-gradient( rgba(0,0,0,0), rgba(0,0,0,0.18) );
|
||||
background: linear-gradient( rgba(0,0,0,0), rgba(0,0,0,0.18) );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -40,10 +40,7 @@
|
|||
color: rgba(255,255,255,0.8);
|
||||
z-index: 2;
|
||||
border-radius: $rounded;
|
||||
@include transition(
|
||||
color 0.3s ease,
|
||||
background 0.3s ease
|
||||
);
|
||||
transition: color 0.3s ease, background 0.3s ease;
|
||||
@media (max-width: 1000px) {
|
||||
right: 15px;
|
||||
}
|
||||
|
|
@ -158,7 +155,11 @@
|
|||
}
|
||||
|
||||
.edit-user-image {
|
||||
@include position(absolute, 3px 3px 3px 3px);
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
bottom: 3px;
|
||||
left: 3px;
|
||||
border-radius: 100%;
|
||||
width: calc(100% - 6px);
|
||||
background: rgba(0,0,0,0.5);
|
||||
|
|
@ -167,7 +168,7 @@
|
|||
line-height: 120px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
@include transition(opacity 0.3s ease);
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.user-details-bottom {
|
||||
|
|
|
|||
|
|
@ -26,9 +26,9 @@
|
|||
}
|
||||
|
||||
@media (min-width: 501px) {
|
||||
@include display(flex);
|
||||
@include justify-content(start);
|
||||
@include align-items(center);
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
|
|
@ -89,8 +89,8 @@ a.object-list-item {
|
|||
|
||||
.object-list-item-body {
|
||||
|
||||
@include flex(1);
|
||||
@include align-items(stretch);
|
||||
flex: 1;
|
||||
align-items: stretch;
|
||||
|
||||
padding-left: 15px;
|
||||
line-height: 1;
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
text-transform: uppercase;
|
||||
color: $brown;
|
||||
//Transparent gradient to make bg fade out as it goes out the top.
|
||||
@include linear-gradient(top, white 0%, white 25%, rgba(255,255,255,0.9) 100%, $fallback: transparent);
|
||||
background: linear-gradient(top, white 0%, white 25%, rgba(255,255,255,0.9) 100%);
|
||||
|
||||
// button,
|
||||
.button {
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@
|
|||
color: $color;
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
@include transition(background 0.2s ease, border-color 0.2s ease);
|
||||
transition: background 0.2s ease, border-color 0.2s ease;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
|
|
|
|||
|
|
@ -48,7 +48,20 @@ form {
|
|||
.input-icon[class*='icon-'] {
|
||||
position: relative;
|
||||
display: block;
|
||||
#{$all-text-inputs} {
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
input[type="password"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="text"],
|
||||
input[type="url"],
|
||||
input[type="color"],
|
||||
input[type="date"],
|
||||
input[type="datetime"],
|
||||
input[type="datetime-local"],
|
||||
input[type="month"],
|
||||
input[type="time"],
|
||||
input[type="week"] {
|
||||
padding-left: 3.2rem;
|
||||
}
|
||||
.gh-select {
|
||||
|
|
@ -61,8 +74,6 @@ form {
|
|||
top: 50%;
|
||||
left: 1.1rem;
|
||||
font-size: 1.3rem;
|
||||
-webkit-transform: translateY(-52%);
|
||||
-ms-transform: translateY(-52%);
|
||||
transform: translateY(-52%);
|
||||
z-index: 100;
|
||||
}
|
||||
|
|
@ -88,7 +99,11 @@ form {
|
|||
}
|
||||
|
||||
input {
|
||||
@include position(absolute, 0 0 0 -9999px);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: -9999px;
|
||||
}
|
||||
|
||||
.input-toggle-component {
|
||||
|
|
@ -132,7 +147,20 @@ legend {
|
|||
|
||||
|
||||
// Input, textarea & select
|
||||
#{$all-text-inputs},
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
input[type="password"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="text"],
|
||||
input[type="url"],
|
||||
input[type="color"],
|
||||
input[type="date"],
|
||||
input[type="datetime"],
|
||||
input[type="datetime-local"],
|
||||
input[type="month"],
|
||||
input[type="time"],
|
||||
input[type="week"],
|
||||
textarea,
|
||||
.gh-select,
|
||||
select {
|
||||
|
|
@ -146,7 +174,7 @@ select {
|
|||
font-weight: normal;
|
||||
color: $darkgrey;
|
||||
|
||||
@include transition(border-color 0.15s linear);
|
||||
transition: border-color 0.15s linear;
|
||||
|
||||
&:focus {
|
||||
border-color: $brown;
|
||||
|
|
@ -188,9 +216,9 @@ input[type="number"] {
|
|||
}
|
||||
label {
|
||||
.input-toggle-component {
|
||||
@include transition(background 0.15s ease-in-out, border-color 0.15s ease-in-out);
|
||||
transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
|
||||
&:before {
|
||||
@include transition(opacity 0.15s ease-in-out);
|
||||
transition: opacity 0.15s ease-in-out;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
|
|
@ -200,7 +228,7 @@ input[type="number"] {
|
|||
border: 2px solid #fff;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
@include transform(rotate(-45deg));
|
||||
transform: rotate(-45deg);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -232,9 +260,9 @@ input[type="number"] {
|
|||
}
|
||||
label {
|
||||
.input-toggle-component {
|
||||
@include transition(background 0.15s ease-in-out, border-color 0.15s ease-in-out);
|
||||
transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
|
||||
&:before {
|
||||
@include transition(opacity 0.15s ease-in-out);
|
||||
transition: opacity 0.15s ease-in-out;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
|
|
@ -279,7 +307,9 @@ input[type="number"] {
|
|||
border-width: 0;
|
||||
|
||||
@include icon-after($i-chevron-down, 0.85em, $midbrown) {
|
||||
@include position(absolute, 50% 0.8em null null);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0.8em;
|
||||
margin-top: -0.5em;
|
||||
pointer-events: none;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// --------------------------------------------------
|
||||
|
||||
*, *:before, *:after {
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
|
|
@ -15,7 +15,7 @@ body {
|
|||
width: 100%;
|
||||
color: lighten($darkgrey, 10%);
|
||||
font-size: 1.4rem;
|
||||
@include font-feature-settings("kern" 1);
|
||||
font-feature-settings: "kern" 1;
|
||||
overflow-x: hidden; // Never allow horizontal scrollbars
|
||||
}
|
||||
|
||||
|
|
@ -37,7 +37,7 @@ h4, h5, h6 {
|
|||
line-height: 1.15em;
|
||||
color: $darkgrey;
|
||||
text-rendering: optimizeLegibility;
|
||||
@include font-feature-settings("dlig" 1, "liga" 1, "lnum" 1, "kern" 1);
|
||||
font-feature-settings: "dlig" 1, "liga" 1, "lnum" 1, "kern" 1;
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
@ -68,10 +68,6 @@ h6 {
|
|||
}
|
||||
|
||||
p, ul, ol, dl {
|
||||
-webkit-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
|
||||
-moz-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
|
||||
-ms-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
|
||||
-o-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
|
||||
font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
|
||||
margin: 0 0 1.7em 0;
|
||||
}
|
||||
|
|
@ -94,11 +90,11 @@ mark {
|
|||
a {
|
||||
color: $blue;
|
||||
text-decoration: none;
|
||||
@include transition(background 0.3s, color 0.3s);
|
||||
transition: background 0.3s, color 0.3s;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
@include transition(background 0.1s, color 0.1s);
|
||||
transition: background 0.1s, color 0.1s;
|
||||
}
|
||||
|
||||
&.highlight {
|
||||
|
|
|
|||
|
|
@ -30,8 +30,6 @@
|
|||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
// Helpers: Sass Utilities
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "_bourbon"; // via Bower
|
||||
@import "helpers/variables";
|
||||
@import "helpers/mixins";
|
||||
@import "helpers/icons";
|
||||
|
|
@ -13,7 +12,7 @@
|
|||
// Libraries: Code by Other Homies
|
||||
// --------------------------------------------------
|
||||
|
||||
@import "normalize"; // via Bower
|
||||
@import "../bower_components/normalize-scss/_normalize"; // via Bower
|
||||
@import "lib/nprogress";
|
||||
@import "lib/codemirror";
|
||||
|
||||
|
|
|
|||
1416
core/client/docs/dist/css/ghost-ui.css
vendored
1416
core/client/docs/dist/css/ghost-ui.css
vendored
File diff suppressed because it is too large
Load diff
7
core/client/docs/dist/css/ghost-ui.css.map
vendored
Normal file
7
core/client/docs/dist/css/ghost-ui.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
23
core/client/docs/dist/css/ghost-ui.min.css
vendored
23
core/client/docs/dist/css/ghost-ui.min.css
vendored
File diff suppressed because one or more lines are too long
7
core/client/docs/dist/css/ghost-ui.min.css.map
vendored
Normal file
7
core/client/docs/dist/css/ghost-ui.min.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Add table
Reference in a new issue