mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-28 22:43:30 +03:00
Merge pull request #4401 from PaulAdamDavis/sass-cleanup
Update Patterns Sass Formatting
This commit is contained in:
John O'Nolan
commit
99b7c07978
@ -1,3 +1,15 @@
|
||||
// ------------------------------------------------------------
|
||||
// Shame
|
||||
//
|
||||
// A home for Styles that need to die in a fire, but are used
|
||||
// in lots of places.
|
||||
//
|
||||
// * Utilities
|
||||
// * Floating Header
|
||||
// * Scroll Shadows
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Utilities
|
||||
// --------------------------------------------------
|
||||
@ -44,10 +56,8 @@
|
||||
font-size: 1.3rem;
|
||||
text-transform: uppercase;
|
||||
color: $brown;
|
||||
//Transparent gradient to make bg fade out as it goes out the top.
|
||||
background: linear-gradient(to bottom, white 0%, white 25%, rgba(255,255,255,0.9) 100%);
|
||||
background: linear-gradient(to bottom, white 0%, white 25%, rgba(255,255,255,0.9) 100%); //Transparent gradient to make bg fade out as it goes out the top
|
||||
|
||||
// button,
|
||||
.button {
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
@ -76,7 +86,7 @@
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}//.button
|
||||
|
||||
small {
|
||||
font-size: 0.85em;
|
||||
@ -85,11 +95,11 @@
|
||||
a,
|
||||
button {
|
||||
color: $brown;
|
||||
|
||||
&:hover {
|
||||
color: $darkgrey;
|
||||
}
|
||||
}
|
||||
|
||||
} // .floatingheader
|
||||
|
||||
|
||||
@ -115,7 +125,5 @@
|
||||
background-size: 100% 200%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
} // .floatingheader
|
||||
|
||||
}//.scrolling
|
||||
}
|
||||
}
|
||||
@ -1,15 +1,26 @@
|
||||
//
|
||||
// ------------------------------------------------------------
|
||||
// Buttons
|
||||
//
|
||||
// Default button Styles, including sizes & colours
|
||||
//
|
||||
// * Default styles
|
||||
// * Coloured buttons
|
||||
// * Link buttons
|
||||
// * Minor buttons
|
||||
// * Button Sizes
|
||||
// * Block button
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Default styles
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Base styles
|
||||
// --------------------------------------------------
|
||||
|
||||
%button {
|
||||
.btn {
|
||||
display: inline-block;
|
||||
margin-bottom: 0; // For input.btn
|
||||
margin-bottom: 0;
|
||||
padding: 9px 14px;
|
||||
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.428571429;
|
||||
font-weight: 300;
|
||||
@ -17,13 +28,15 @@
|
||||
text-transform: uppercase;
|
||||
text-shadow: none;
|
||||
letter-spacing: 1px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
|
||||
border: 1px solid transparent;
|
||||
white-space: nowrap;
|
||||
|
||||
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
|
||||
|
||||
border: 1px solid transparent;
|
||||
border-radius: $border-radius;
|
||||
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
|
||||
&,
|
||||
&:active,
|
||||
@ -54,13 +67,11 @@
|
||||
opacity: 0.65;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
@extend %button;
|
||||
}
|
||||
}//.btn
|
||||
|
||||
|
||||
// Alternate buttons
|
||||
//
|
||||
// Coloured buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin button-style($color, $background, $border) {
|
||||
@ -78,14 +89,17 @@
|
||||
background-color: darken($background, 10%);
|
||||
border-color: darken($border, 12%);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active,
|
||||
.open > &.dropdown-toggle {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
@ -101,28 +115,31 @@
|
||||
background-color: $color;
|
||||
box-shadow: 0 0 0 1px $color;
|
||||
}
|
||||
}
|
||||
}//@mixin button-style
|
||||
|
||||
.btn-default {
|
||||
font-weight: normal;
|
||||
font-weight: normal; // Increases the font-weight to make text more legible for white BG button
|
||||
@include button-style(#666, #fff, lighten($midgrey, 40%));
|
||||
}
|
||||
|
||||
.btn-alt {
|
||||
@include button-style(#fff, #A1ADB3, darken(#A1ADB3, 5%));
|
||||
}
|
||||
|
||||
.btn-blue {
|
||||
@include button-style(#fff, $blue, darken($blue, 5%));
|
||||
}
|
||||
// Success appears as green
|
||||
|
||||
.btn-green {
|
||||
@include button-style(#fff, $green, darken($green, 5%));
|
||||
}
|
||||
// Danger and error appear as red
|
||||
|
||||
.btn-red {
|
||||
@include button-style(#fff, $red, darken($red, 5%));
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Link buttons
|
||||
// -------------------------
|
||||
|
||||
@ -140,6 +157,7 @@
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
@ -147,22 +165,26 @@
|
||||
color: $blue;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $midgrey;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}//.btn-link
|
||||
|
||||
|
||||
//
|
||||
// Minor buttons
|
||||
// -------------------------
|
||||
|
||||
@ -175,6 +197,7 @@
|
||||
padding: 8px 14px;
|
||||
}
|
||||
|
||||
//
|
||||
// Button Sizes
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -193,6 +216,7 @@
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Block button
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -210,6 +234,7 @@
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"] {
|
||||
|
||||
&.btn-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -1,9 +1,24 @@
|
||||
//
|
||||
// ------------------------------------------------------------
|
||||
// Forms
|
||||
//
|
||||
// All things form, input, textarea, select, radio and checkbox
|
||||
//
|
||||
// * Form Wrapper
|
||||
// * Form Groups
|
||||
// * Input Icons
|
||||
// * Radio & Checkbox wrappers
|
||||
// * Fieldsets & Legends
|
||||
// * Inputs, selects, and textareas
|
||||
// * Checkboxes
|
||||
// * Radio Buttons
|
||||
// * Select Component
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Form Wrapper
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Form Wrapper
|
||||
form {
|
||||
|
||||
label {
|
||||
@ -12,16 +27,19 @@ form {
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
} // form
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Form Groups
|
||||
// --------------------------------------------------
|
||||
|
||||
.form-group {
|
||||
position: relative;
|
||||
margin-bottom: 1.6em;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
|
||||
p {
|
||||
margin: 4px 0 0 0;
|
||||
color: #B3B2A8;
|
||||
@ -36,12 +54,17 @@ form {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
} // .form-group
|
||||
}//.form-group
|
||||
|
||||
|
||||
//
|
||||
// Input Icons
|
||||
// --------------------------------------------------
|
||||
|
||||
// If the from group has an icon...
|
||||
.input-icon[class*='icon-'] {
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
input[type="password"],
|
||||
@ -52,11 +75,13 @@ form {
|
||||
input[type="date"] {
|
||||
padding-left: 3.2rem;
|
||||
}
|
||||
|
||||
.gh-select {
|
||||
select {
|
||||
padding-left: 3.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -65,9 +90,13 @@ form {
|
||||
transform: translateY(-52%);
|
||||
z-index: 100;
|
||||
}
|
||||
} // .thing[class*='icon-']
|
||||
}//.thing[class*='icon-']
|
||||
|
||||
|
||||
//
|
||||
// Radio & Checkbox wrappers
|
||||
// --------------------------------------------------
|
||||
|
||||
// Wrapper for input[type="radio"] and input[type="checkbox"] elements
|
||||
.for-radio,
|
||||
.for-checkbox {
|
||||
@include clearfix;
|
||||
@ -75,11 +104,14 @@ form {
|
||||
label {
|
||||
display: block;
|
||||
padding-bottom: 4px;
|
||||
|
||||
p {
|
||||
font-weight: normal;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
input:not(:checked) + .input-toggle-component {
|
||||
border-color: $midbrown;
|
||||
}
|
||||
@ -111,18 +143,18 @@ form {
|
||||
color: #B3B2A8;
|
||||
white-space: nowrap;
|
||||
}
|
||||
} // .for-radio, .for-checkbox
|
||||
}//.for-radio, .for-checkbox
|
||||
|
||||
//
|
||||
// Fieldsets & Legends
|
||||
// --------------------------------------------------
|
||||
|
||||
// Fieldsets
|
||||
fieldset {
|
||||
border: none;
|
||||
margin: 0 0 3em 0;
|
||||
padding: 0;
|
||||
} // fieldset
|
||||
}
|
||||
|
||||
|
||||
// Legends
|
||||
legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
@ -131,10 +163,13 @@ legend {
|
||||
font-size: 1.2em;
|
||||
line-height: 2.0em;
|
||||
color: $brown;
|
||||
} // legend
|
||||
}
|
||||
|
||||
|
||||
// Input, textarea & select
|
||||
//
|
||||
// Inputs, selects, and textareas
|
||||
// --------------------------------------------------
|
||||
|
||||
.input,
|
||||
input[type="email"],
|
||||
input[type="number"],
|
||||
@ -163,7 +198,6 @@ select {
|
||||
border-color: $brown;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
textarea {
|
||||
@ -177,24 +211,21 @@ textarea {
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Checkboxes
|
||||
// ---
|
||||
// <div class="form-group for-checkbox">
|
||||
// <label for="permalinks">Dated Permalinks</label>
|
||||
// <label class="checkbox" for="thing">
|
||||
// <input id="thing" type="checkbox">
|
||||
// <span class="input-toggle-component"></span>
|
||||
// <p>Include the date in your post URLs</p>
|
||||
// </label>
|
||||
// <p>This is a label</p>
|
||||
// </div>
|
||||
// --------------------------------------------------
|
||||
|
||||
.for-checkbox {
|
||||
|
||||
.input-toggle-component {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
label {
|
||||
|
||||
.input-toggle-component {
|
||||
transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
|
||||
|
||||
&:before {
|
||||
transition: opacity 0.15s ease-in-out;
|
||||
content: '';
|
||||
@ -210,35 +241,34 @@ textarea {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
input:checked + .input-toggle-component {
|
||||
background: $green;
|
||||
border-color: darken($green, 10%);
|
||||
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}//label
|
||||
}//.for-checkbox
|
||||
|
||||
|
||||
//
|
||||
// Radio Buttons
|
||||
// ---
|
||||
// <div class="form-group for-radio">
|
||||
// <label>The Option Title</label>
|
||||
// <label class="radio">
|
||||
// <input name="testing" type="radio" value="no">
|
||||
// <span class="input-toggle-component"></span>
|
||||
// <p>No</p>
|
||||
// </label>
|
||||
// <p>What does this thing mean?</p>
|
||||
// </div>
|
||||
// --------------------------------------------------
|
||||
|
||||
.for-radio {
|
||||
|
||||
.input-toggle-component {
|
||||
border-radius: 100px; // Use px to prevent ovals
|
||||
}
|
||||
|
||||
label {
|
||||
|
||||
.input-toggle-component {
|
||||
transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
|
||||
|
||||
&:before {
|
||||
transition: opacity 0.15s ease-in-out;
|
||||
content: '';
|
||||
@ -252,29 +282,23 @@ textarea {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
input:checked + .input-toggle-component {
|
||||
background: $green;
|
||||
border-color: darken($green, 10%);
|
||||
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}//label
|
||||
}//.for-radio
|
||||
|
||||
|
||||
//
|
||||
// Select Component
|
||||
// ---
|
||||
// <span class="gh-select">
|
||||
// {{view "select"
|
||||
// id="activeTheme"
|
||||
// name="general[activeTheme]"
|
||||
// content=themes
|
||||
// optionValuePath="content.name"
|
||||
// optionLabelPath="content.label"
|
||||
// value=activeTheme
|
||||
// selection=selectedTheme}}
|
||||
// </span>
|
||||
// --------------------------------------------------
|
||||
|
||||
.gh-select {
|
||||
position: relative;
|
||||
display: block;
|
||||
@ -313,21 +337,24 @@ textarea {
|
||||
|
||||
// This hides focus around selected option in FF
|
||||
&:-moz-focusring {
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 #000;
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 #000;
|
||||
}
|
||||
} // select
|
||||
} // .gh-select
|
||||
}//select
|
||||
}//.gh-select
|
||||
|
||||
// Firefox-specific size fixes
|
||||
@-moz-document url-prefix() {
|
||||
|
||||
.gh-select {
|
||||
border-width: 1px;
|
||||
|
||||
select {
|
||||
padding: 7px 10px 7px 8px;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $brown;
|
||||
}
|
||||
}
|
||||
} // @-moz-document
|
||||
}
|
||||
@ -1,5 +1,16 @@
|
||||
//
|
||||
// ------------------------------------------------------------
|
||||
// Globals
|
||||
//
|
||||
// Where most of the element-selector styling goes, which other
|
||||
// elements can inherit from. Sensible defaults.
|
||||
//
|
||||
// * Global Layout
|
||||
// * Text & Type
|
||||
// * Utility Classes
|
||||
// ------------------------------------------------------------
|
||||
|
||||
//
|
||||
// Global Layout
|
||||
// --------------------------------------------------
|
||||
|
||||
*, *:before, *:after {
|
||||
@ -28,14 +39,15 @@ body {
|
||||
overflow-x: hidden; // Never allow horizontal scrollbars
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background: lighten($blue, 20%);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: lighten($blue, 20%);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Text & Type
|
||||
// --------------------------------------------------
|
||||
|
||||
h1, h2, h3,
|
||||
h4, h5, h6 {
|
||||
margin: 0 0 0.3em 0;
|
||||
@ -228,7 +240,7 @@ button {
|
||||
|
||||
|
||||
//
|
||||
// Utilities
|
||||
// Utility Classes
|
||||
// --------------------------------------------------
|
||||
|
||||
.clearfix {
|
||||
@ -276,6 +288,7 @@ button {
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
@ -1,3 +1,14 @@
|
||||
// ------------------------------------------------------------
|
||||
// Labels
|
||||
//
|
||||
// Labels are little bubbles of info.
|
||||
// Imagine an unread email counter.
|
||||
//
|
||||
// * Labels
|
||||
// * Colours
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Labels
|
||||
// --------------------------------------------------
|
||||
@ -14,8 +25,6 @@
|
||||
vertical-align: baseline;
|
||||
border-radius: .25em;
|
||||
|
||||
// [converter] extracted a& to a.label
|
||||
|
||||
// Empty labels collapse automatically (not available in IE8)
|
||||
&:empty {
|
||||
display: none;
|
||||
@ -49,7 +58,10 @@ a.label {
|
||||
}
|
||||
}
|
||||
|
||||
// Colors
|
||||
|
||||
//
|
||||
// Colours
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin label-variant($text-color, $bg-color) {
|
||||
background-color: $bg-color;
|
||||
@ -67,15 +79,19 @@ a.label {
|
||||
.label-default {
|
||||
@include label-variant(#fff, #A1ADB3);
|
||||
}
|
||||
|
||||
.label-alt {
|
||||
@include label-variant(#fff, #666);
|
||||
}
|
||||
|
||||
.label-blue {
|
||||
@include label-variant(#fff, $blue);
|
||||
}
|
||||
|
||||
.label-green {
|
||||
@include label-variant(#fff, $green);
|
||||
}
|
||||
|
||||
.label-red {
|
||||
@include label-variant(#fff, $red);
|
||||
}
|
||||
@ -1,7 +1,16 @@
|
||||
//
|
||||
// ------------------------------------------------------------
|
||||
// Navigation Lists
|
||||
//
|
||||
// Navigation component used in places like the settings menu
|
||||
//
|
||||
// * Wrapper
|
||||
// * Nav Item
|
||||
// ------------------------------------------------------------
|
||||
|
||||
|
||||
//
|
||||
// Wrapper
|
||||
// --------------------------------------------------
|
||||
// Mobile style groups of list of links with chevrons
|
||||
|
||||
.nav-list {
|
||||
padding: 0;
|
||||
@ -14,6 +23,12 @@
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Nav Item
|
||||
// --------------------------------------------------
|
||||
|
||||
.nav-list-item {
|
||||
@include icon($i-chevron, 1.4rem, $midbrown) {
|
||||
position: absolute;
|
||||
@ -21,6 +36,7 @@
|
||||
right: 10px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 8px 40px 8px 12px;
|
||||
@ -64,5 +80,4 @@
|
||||
color: $midgrey;
|
||||
line-height: 1.375;
|
||||
}
|
||||
|
||||
}//.nav-list-item
|
||||
}//.nav-list-item
|
||||
@ -1,6 +1,16 @@
|
||||
// ------------------------------------------------------------
|
||||
// Tables
|
||||
//
|
||||
// Default Styles for HTML tables
|
||||
//
|
||||
// * Base Table
|
||||
// * Default Table
|
||||
// ------------------------------------------------------------
|
||||
|
||||
//
|
||||
// Base Table
|
||||
// --------------------------------------------------
|
||||
// Minimal styling
|
||||
|
||||
table,
|
||||
%table {
|
||||
@ -23,13 +33,14 @@ table,
|
||||
//
|
||||
// Default Table
|
||||
// --------------------------------------------------
|
||||
// Properly styled with colour, spacing, and borders
|
||||
|
||||
.table {
|
||||
|
||||
@extend %table;
|
||||
@extend %table;
|
||||
|
||||
th,
|
||||
td {
|
||||
td {
|
||||
border-top: 1px solid $lightbrown;
|
||||
}
|
||||
|
||||
@ -65,4 +76,4 @@ table,
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}//.table
|
||||
Loading…
Reference in New Issue
Block a user