mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-24 23:48:13 -05:00
Remove all %placeholder extends
* Allows us to use node-sass and drop the dependency on Ruby * See TryGhost/Ghost/issues/1346 * See TryGhost/Ghost/issues/2078
This commit is contained in:
John O'Nolan
parent
cf0a3cde8c
commit
df464f5ab7
4 changed files with 45 additions and 62 deletions
|
|
@ -26,7 +26,7 @@
|
|||
|
||||
// The main post title
|
||||
.entry-title {
|
||||
@extend %box;
|
||||
@extend .box;
|
||||
height: 53px;
|
||||
padding: 2px 15px;
|
||||
margin-bottom: 5px;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
General
|
||||
============================================================================= */
|
||||
|
||||
%label {
|
||||
.label {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0.5em;
|
||||
|
|
@ -39,9 +39,8 @@
|
|||
|
||||
form {
|
||||
|
||||
label,
|
||||
.label {
|
||||
@extend %label;
|
||||
label {
|
||||
@extend .label;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -202,7 +201,7 @@ input[type=checkbox]:checked + .checkbox:after { opacity: 1; }
|
|||
*/
|
||||
|
||||
// This base style is used on all buttons
|
||||
%button {
|
||||
.btn {
|
||||
@include box-sizing(border-box);
|
||||
min-height: 35px;
|
||||
width: auto;
|
||||
|
|
@ -248,7 +247,7 @@ input[type=checkbox]:checked + .checkbox:after { opacity: 1; }
|
|||
.button,
|
||||
button,
|
||||
input[type="button"] {
|
||||
@extend %button;
|
||||
@extend .btn;
|
||||
color:#777;
|
||||
font-weight: normal;
|
||||
background: #eee;
|
||||
|
|
@ -262,7 +261,7 @@ input[type="button"] {
|
|||
.button-save,
|
||||
button[type="submit"],
|
||||
input[type="submit"] {
|
||||
@extend %button;
|
||||
@extend .btn;
|
||||
background: $blue;
|
||||
box-shadow: none;
|
||||
&:hover {background: darken($blue, 10%);}
|
||||
|
|
@ -270,7 +269,7 @@ input[type="submit"] {
|
|||
|
||||
// Button for actions which add stuff
|
||||
.button-add {
|
||||
@extend %button;
|
||||
@extend .btn;
|
||||
background: $green;
|
||||
&:hover {background: darken($green, 8%);}
|
||||
}
|
||||
|
|
@ -279,7 +278,7 @@ input[type="submit"] {
|
|||
.button-delete,
|
||||
button[type="reset"],
|
||||
input[type="reset"] {
|
||||
@extend %button;
|
||||
@extend .btn;
|
||||
background: $red;
|
||||
box-shadow: none;
|
||||
&:hover {background: darken($red, 10%);}
|
||||
|
|
@ -287,14 +286,14 @@ input[type="reset"] {
|
|||
|
||||
// Alternative button with more visual attention, but no extra semantic meaning
|
||||
.button-alt {
|
||||
@extend %button;
|
||||
@extend .btn;
|
||||
background: lighten($darkgrey, 10%);
|
||||
&:hover {background: $darkgrey;}
|
||||
}
|
||||
|
||||
// This applies normal link styles to de-emphasise a button
|
||||
.button-link {
|
||||
@extend %button;
|
||||
@extend .btn;
|
||||
color: $blue;
|
||||
background: transparent;
|
||||
border: none;
|
||||
|
|
@ -306,7 +305,7 @@ input[type="reset"] {
|
|||
|
||||
// Back button for pane animations
|
||||
.button-back {
|
||||
@extend %button;
|
||||
@extend .btn;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
|
|
@ -363,7 +362,7 @@ input[type="reset"] {
|
|||
*/
|
||||
|
||||
// These are the base styles applied to all splitbuttons
|
||||
%splitbutton {
|
||||
.splitbtn {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
font-size: 0; // hack to stop space after button
|
||||
|
|
@ -440,7 +439,7 @@ input[type="reset"] {
|
|||
|
||||
// The default splitbutton
|
||||
.splitbutton {
|
||||
@extend %splitbutton;
|
||||
@extend .splitbtn;
|
||||
.options {
|
||||
color:#777;
|
||||
&:hover {
|
||||
|
|
@ -454,7 +453,7 @@ input[type="reset"] {
|
|||
|
||||
// For save/next/continue/confirm actions
|
||||
.splitbutton-save {
|
||||
@extend %splitbutton;
|
||||
@extend .splitbtn;
|
||||
.options {
|
||||
background: darken($blue, 5%);
|
||||
&:hover, &.active {background: darken($blue, 10%);}
|
||||
|
|
@ -463,7 +462,7 @@ input[type="reset"] {
|
|||
|
||||
// For actions which add something
|
||||
.splitbutton-add {
|
||||
@extend %splitbutton;
|
||||
@extend .splitbtn;
|
||||
.options {
|
||||
background: darken($green, 6%);
|
||||
&:hover {background: darken($green, 8%);}
|
||||
|
|
@ -472,7 +471,7 @@ input[type="reset"] {
|
|||
|
||||
// For actions which delete something
|
||||
.splitbutton-delete {
|
||||
@extend %splitbutton;
|
||||
@extend .splitbtn;
|
||||
.options {
|
||||
background: darken($red, 6%);
|
||||
&:hover {background: darken($red, 10%);}
|
||||
|
|
@ -481,7 +480,7 @@ input[type="reset"] {
|
|||
|
||||
// Alternative style with more visual attention, but no extra semantic meaning
|
||||
.splitbutton-alt {
|
||||
@extend %splitbutton;
|
||||
@extend .splitbtn;
|
||||
.options {
|
||||
background: lighten($darkgrey, 4%);
|
||||
&:hover {background: $darkgrey;}
|
||||
|
|
|
|||
|
|
@ -707,7 +707,8 @@ nav {
|
|||
|
||||
|
||||
// This is the base menu extend used for styles on interaction menus
|
||||
%menu {
|
||||
// Default: Pop menu, chiclet bottom center.
|
||||
.menu {
|
||||
display: inline-block;
|
||||
position:absolute;
|
||||
z-index: 960;
|
||||
|
|
@ -768,7 +769,8 @@ nav {
|
|||
}
|
||||
|
||||
// This extend moves the chiclet to the top, for menus which drop down.
|
||||
%menu-drop {
|
||||
.menu-drop {
|
||||
@extend .menu;
|
||||
&:before {
|
||||
top: -10px;
|
||||
bottom: auto;
|
||||
|
|
@ -777,7 +779,8 @@ nav {
|
|||
}
|
||||
|
||||
// Chiclet to the left, for menus appearing close to left edge of the screen.
|
||||
%menu-left {
|
||||
.menu-left {
|
||||
@extend .menu;
|
||||
&:before {
|
||||
left:10px;
|
||||
margin-left:0;
|
||||
|
|
@ -785,7 +788,8 @@ nav {
|
|||
}
|
||||
|
||||
// Chiclet to the right, for menus appearing close to right edge of the screen.
|
||||
%menu-right {
|
||||
.menu-right {
|
||||
@extend .menu;
|
||||
&:before {
|
||||
left: auto;
|
||||
right:10px;
|
||||
|
|
@ -793,41 +797,18 @@ nav {
|
|||
}
|
||||
}
|
||||
|
||||
// Pop menu, chiclet bottom center.
|
||||
.menu {
|
||||
@extend %menu;
|
||||
}
|
||||
|
||||
// Pop left, chiclet bottom left.
|
||||
.menu-left {
|
||||
@extend %menu;
|
||||
@extend %menu-left;
|
||||
}
|
||||
|
||||
// Pop right, chiclet bottom right.
|
||||
.menu-right {
|
||||
@extend %menu;
|
||||
@extend %menu-right;
|
||||
}
|
||||
|
||||
// Drop menu, chiclet top center.
|
||||
.menu-drop {
|
||||
@extend %menu;
|
||||
@extend %menu-drop;
|
||||
}
|
||||
|
||||
// Drop left, chiclet top left.
|
||||
.menu-drop-left {
|
||||
@extend %menu;
|
||||
@extend %menu-drop;
|
||||
@extend %menu-left;
|
||||
@extend .menu;
|
||||
@extend .menu-drop;
|
||||
@extend .menu-left;
|
||||
}
|
||||
|
||||
// Drop right, chiclet top right.
|
||||
.menu-drop-right {
|
||||
@extend %menu;
|
||||
@extend %menu-drop;
|
||||
@extend %menu-right;
|
||||
@extend .menu;
|
||||
@extend .menu-drop;
|
||||
@extend .menu-right;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
|
|
@ -870,7 +851,7 @@ nav {
|
|||
text-align: right;
|
||||
}
|
||||
|
||||
%label {
|
||||
.label {
|
||||
position: static;
|
||||
width: auto;
|
||||
font-weight: normal;
|
||||
|
|
@ -950,7 +931,7 @@ nav {
|
|||
@include transform(translateZ(0));
|
||||
}
|
||||
|
||||
%notification, .notification {
|
||||
.notification {
|
||||
@include icon($i-notification) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -997,7 +978,7 @@ nav {
|
|||
}
|
||||
|
||||
.notification-success {
|
||||
@extend %notification;
|
||||
@extend .notification;
|
||||
@include icon($i-success);
|
||||
background: $green;
|
||||
|
||||
|
|
@ -1010,20 +991,20 @@ nav {
|
|||
}
|
||||
|
||||
.notification-error {
|
||||
@extend %notification;
|
||||
@extend .notification;
|
||||
@include icon($i-error);
|
||||
background: $red;
|
||||
}
|
||||
|
||||
|
||||
.notification-warn {
|
||||
@extend %notification;
|
||||
@extend .notification;
|
||||
@include icon($i-info);
|
||||
background: $orange;
|
||||
}
|
||||
|
||||
.notification-info {
|
||||
@extend %notification;
|
||||
@extend .notification;
|
||||
@include icon($i-info);
|
||||
background: $blue;
|
||||
}
|
||||
|
|
@ -1074,7 +1055,7 @@ nav {
|
|||
z-index: 1030;
|
||||
}
|
||||
|
||||
%modal, .modal {
|
||||
.modal {
|
||||
@include box-sizing(border-box);
|
||||
left: 50%;
|
||||
right: auto;
|
||||
|
|
@ -1109,11 +1090,14 @@ nav {
|
|||
}
|
||||
|
||||
.modal-info {
|
||||
@extend %modal;
|
||||
@extend .modal;
|
||||
// TODO: This is stupid and should not exist
|
||||
// remove all references to it in Ghost core
|
||||
// then delete it entirely.
|
||||
}
|
||||
|
||||
.modal-action {
|
||||
@extend %modal;
|
||||
@extend .modal;
|
||||
padding: 60px 0 30px;
|
||||
|
||||
@include breakpoint($tablet) {
|
||||
|
|
|
|||
|
|
@ -146,7 +146,7 @@ $green: #9FBB58;
|
|||
Global Elements
|
||||
============================================================================= */
|
||||
|
||||
%box, .box {
|
||||
.box {
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
background: #fff;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue