tqt/Ghost-Admin
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost-Admin.git synced 2023-12-14 02:33:04 +01:00
Code Issues Releases Wiki Activity

First pass - strip mixins

Browse source
This commit is contained in:
John O'Nolan 2015-05-13 10:23:29 +01:00 committed by Hannah Wolfe
parent e28fcb3eb6
commit 0b73612cf6
24 changed files with 144 additions and 1008 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/assets/lib/uploader.js
View file

@ -70,7 +70,7 @@ UploadUi = function ($dropzone, settings) {
$dropzone.find('.js-url').remove();
$progress.find('.js-upload-progress-bar').removeClass('fail');
$dropzone.trigger('uploadstart', [$dropzone.attr('id')]);
$dropzone.find('span.media, div.description, a.image-url, a.image-webcam')
$dropzone.find('span.media, div.description, a.icon-link, a.image-webcam')
.animate({opacity: 0}, 250, function () {
$dropzone.find('div.description').hide().css({opacity: 100});
if (settings.progressbar) {
@ -130,8 +130,8 @@ UploadUi = function ($dropzone, settings) {
if (!$dropzone.find('button.js-fail')[0]) {
$dropzone.append('<button class="js-fail btn btn-green" style="display: none">Try Again</button>');
}
if (!$dropzone.find('a.image-url')[0]) {
$dropzone.append('<a class="image-url" title="Add image from URL"><span class="hidden">URL</span></a>');
if (!$dropzone.find('a.icon-link')[0]) {
$dropzone.append('<a class="icon-link" title="Add image from URL"><span class="hidden">URL</span></a>');
}
// if (!$dropzone.find('a.image-webcam')[0]) {
// $dropzone.append('<a class="image-webcam" title="Add image from webcam"><span class="hidden">Webcam</span></a>');
@ -139,7 +139,7 @@ UploadUi = function ($dropzone, settings) {
},
removeExtras: function () {
$dropzone.find('span.media, div.js-upload-progress, a.image-url, a.image-upload, a.image-webcam, div.js-fail, button.js-fail, a.js-cancel').remove();
$dropzone.find('span.media, div.js-upload-progress, a.icon-link, a.image-upload, a.image-webcam, div.js-fail, button.js-fail, a.js-cancel').remove();
},
initWithDropzone: function () {
@ -156,7 +156,7 @@ UploadUi = function ($dropzone, settings) {
self.initUrl();
return;
}
$dropzone.find('a.image-url').on('click', function () {
$dropzone.find('a.icon-link').on('click', function () {
self.initUrl();
});
},

1
app/styles/app.scss
View file

@ -3,7 +3,6 @@
// --------------------------------------------------
@import "modules/variables";
@import "modules/mixins";
@import "modules/icons";
@import "modules/animations";

67
app/styles/components/dropdowns.scss
View file

@ -186,87 +186,32 @@
}//&:after
}
%dropdown-triangle-top {
&:before {
@include triangle($dropdown_triangle, #fff, up);
top: -$dropdown_triangle;
}
&:after {
@include triangle($dropdown_triangle + 2, darken($lightgrey, 15%), up);
top: -($dropdown_triangle + 2);
}
}
%dropdown-triangle-bottom {
&:before {
@include triangle($dropdown_triangle, #fff, down);
bottom: -$dropdown_triangle;
}
&:after {
@include triangle($dropdown_triangle + 2, darken($lightgrey, 15%), down);
bottom: -($dropdown_triangle + 2);
}
}
%dropdown-triangle-center {
&:before {
left: 50%;
margin-left: -($dropdown_triangle / 2);
margin-left: -(8px / 2);
}
&:after {
left: 50%;
margin-left: -($dropdown_triangle / 2 + 2);
margin-left: -(8px / 2 + 2);
}
}
%dropdown-triangle-left {
&:before {
left: ($dropdown_triangle / 2 + 2);
left: (8px / 2 + 2);
}
&:after {
left: ($dropdown_triangle / 2);
left: (8px / 2);
}
}
%dropdown-triangle-right {
&:before {
left: auto;
right: ($dropdown_triangle / 2 + 2);
right: (8px / 2 + 2);
}
&:after {
left: auto;
right: ($dropdown_triangle / 2);
right: (8px / 2);
}
}
//
// Dropdown triangles classes
// --------------------------------------------------
.dropdown-triangle-top {
@extend %dropdown-triangle;
@extend %dropdown-triangle-top;
@extend %dropdown-triangle-center;
}
.dropdown-triangle-top-left {
@extend %dropdown-triangle;
@extend %dropdown-triangle-top;
@extend %dropdown-triangle-left;
}
.dropdown-triangle-top-right {
@extend %dropdown-triangle;
@extend %dropdown-triangle-top;
@extend %dropdown-triangle-right;
}
.dropdown-triangle-bottom {
@extend %dropdown-triangle;
@extend %dropdown-triangle-bottom;
@extend %dropdown-triangle-center;
}
.dropdown-triangle-bottom-left {
@extend %dropdown-triangle;
@extend %dropdown-triangle-bottom;
@extend %dropdown-triangle-left;
}
.dropdown-triangle-bottom-right {
@extend %dropdown-triangle;
@extend %dropdown-triangle-bottom;
@extend %dropdown-triangle-right;
}

10
app/styles/components/modals.scss
View file

@ -104,14 +104,6 @@
padding: 0;
margin: 0;
border: none;
@include icon($i-close, 1.4rem, $midgrey) {
transition: color 0.3s linear;
};
&:hover:before {
color: $grey;
}
}
}//.modal-content
@ -236,4 +228,4 @@
.modal-background.fade-out {
// animation-delay: 0.06s;
animation-duration: 0.15s;
}
}

218
app/styles/components/notifications.scss
View file

@ -7,221 +7,3 @@
// * Base Notification
// * Individual Notifications
// ------------------------------------------------------------
//
// Wrappers
// --------------------------------------------------
.notifications.top {
// Remove margins from top notifications so there's no space underneath
.notification-success,
.notification-error,
.notification-warn,
.notification-info {
margin: 0;
}
// Transition position of top notifications when the a settings menu or navigation is open
transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier);
@media (max-width: 900px) {
transition: transform 0.4s cubic-bezier($settings-menu-bezier);
}
body.global-nav-expanded & {
transform: translate3d(260px, 0px, 0px);
}
body.settings-menu-expanded & {
@media (max-width: 350px) {
transform: translate3d(-100%, 0px, 0px);
}
@media (min-width: 351px) {
transform: translate3d(-350px, 0px, 0px);
&:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 1000;
width: 1px;
background: #EDECE4;
}
}
}
}
// Top notifications, usually the update notification
@media (max-width: 900px) {
.notifications.top {
position: relative;
z-index: 20;
}
.viewport[data-notification-count='1'] {
top: 43px;
.settings-view-header,
.settings-subview-header,
.post-preview-header {
top: 43px;
}
}
}
@media (min-width: 901px) {
.notifications.top {
position: absolute;
top: 60px;
left: 0;
right: 0;
z-index: 20;
}
.viewport[data-notification-count='1'] {
.page-content {
top: 103px;
}
}
}
// Bottom notifications, which is 99% of them
.notifications.bottom {
@media (max-width: 400px) {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
}
@media (min-width: 401px) {
position: absolute;
bottom: 0;
left: 0;
z-index: 800;
width: 300px;
}
}
//
// Base Notification
// --------------------------------------------------
%notification {
@include icon($i-notification) {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 44px;
padding: 14px 15px;
text-align: center;
color: rgba(255,255,255,0.8);
background: rgba(0,0,0,0.1);
};
width: 100%;
min-height: 40px;
max-height: 253px;
margin: 0 0 15px 0;
color: rgba(255,255,255,0.9);
background: $blue;
position: relative;
box-shadow: $box-shadow;
transform: translateZ(0);
@media (max-width: 400px) {
margin-bottom: 1px;
}
.notification-message {
display: block;
padding: 10px 43px 10px 57px;
max-height: 253px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.close {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 34px;
color: rgba(255,255,255,0.6);
@include icon-after($i-close) {
padding: 10px;
position: absolute;
top: 4px;
right: 1px;
}
&:hover {
color: #fff;
}
} // .close
a {
color: inherit;
text-decoration: underline;
}
}//%notification
//
// Individual Notifications
// --------------------------------------------------
.notification-success {
@extend %notification;
@include icon($i-success);
background: $green;
&.notification-passive {
animation: fade-out 1s linear;
animation-delay: 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
&.notification-passive:hover {
animation: fade-in-snap 0.2s linear;
}
}
.notification-error {
@extend %notification;
@include icon($i-error);
background: $red;
}
.notification-warn {
@extend %notification;
@include icon($i-info);
background: $orange;
}
.notification-info {
@extend %notification;
@include icon($i-info);
background: $blue;
}
// Hide extra space taken up by update notification
.update-available main {
bottom: 56px;
}
.notification-upgrade {
color: $red;
a {
color: $red;
text-decoration: underline;
}
}

46
app/styles/components/pagination.scss
View file

@ -91,38 +91,56 @@
// Sizing
// --------------------------------------------------
@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
// Large
.pagination-lg {
> li {
> a,
> span {
padding: $padding-vertical $padding-horizontal;
font-size: $font-size;
padding: 10px 16px;
font-size: 18px;
}
&:first-child {
> a,
> span {
border-top-left-radius: $border-radius;
border-bottom-left-radius: $border-radius;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
}
&:last-child {
> a,
> span {
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
}
}
}
// Large
.pagination-lg {
@include pagination-size(10px, 16px, 18px, 6px);
}
// Small
.pagination-sm {
@include pagination-size(5px, 10px, 12px, 3px);
}
> li {
> a,
> span {
padding: 5px 10px;
font-size: 12px;
}
&:first-child {
> a,
> span {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
}
&:last-child {
> a,
> span {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
}
}
}

254
app/styles/components/popovers.scss
View file

@ -4,8 +4,6 @@
// Styles for the popover component
//
// * Popovers
// * Triangles placeholder styles
// * Triangles classes
// * Open/close
// * Positioning
// ------------------------------------------------------------
@ -45,176 +43,6 @@
}
}
//
// Triangles placeholder styles
// --------------------------------------------------
%popover-triangle {
&:before {
content: '';
position: absolute;
display: block;
} // :before
}
%popover-triangle-vertical-top {
&:before {
@include triangle($popover_triangle, $darkgrey, up, shallow);
top: -(floor($popover_triangle * $popover_triangle_shallow_multiplier));
}
}
%popover-triangle-vertical-bottom {
&:before {
@include triangle($popover_triangle, $darkgrey, down, shallow);
bottom: -(floor($popover_triangle * $popover_triangle_shallow_multiplier));
}
}
%popover-triangle-horizontal-left {
&:before {
@include triangle($popover_triangle, $darkgrey, left, shallow);
left: -(floor($popover_triangle * $popover_triangle_shallow_multiplier));
}
}
%popover-triangle-horizontal-right {
&:before {
@include triangle($popover_triangle, $darkgrey, right, shallow);
right: -(floor($popover_triangle * $popover_triangle_shallow_multiplier));
}
}
%popover-triangle-vertical-center {
&:before {
left: 50%;
margin-left: -($popover_triangle / 2);
}
}
%popover-triangle-vertical-left {
&:before {
left: $popover_triangle;
}
}
%popover-triangle-vertical-right {
&:before {
left: auto;
right: $popover_triangle;
}
}
%popover-triangle-horizontal-center {
&:before {
top: 50%;
margin-top: -$popover_triangle;
}
}
%popover-triangle-horizontal-top {
&:before {
top: $popover_triangle;
}
}
%popover-triangle-horizontal-bottom {
&:before {
top: auto;
bottom: $popover_triangle;
}
}
//
// Triangles classes
// --------------------------------------------------
.popover-triangle-top {
@extend %popover-triangle;
@extend %popover-triangle-vertical-top;
@extend %popover-triangle-vertical-center;
transform-origin: top center;
}
.popover-triangle-top-left {
@extend %popover-triangle;
@extend %popover-triangle-vertical-top;
@extend %popover-triangle-vertical-left;
transform-origin: top left;
}
.popover-triangle-top-right {
@extend %popover-triangle;
@extend %popover-triangle-vertical-top;
@extend %popover-triangle-vertical-right;
transform-origin: top right;
}
.popover-triangle-bottom {
@extend %popover-triangle;
@extend %popover-triangle-vertical-bottom;
@extend %popover-triangle-vertical-center;
transform-origin: bottom center;
}
.popover-triangle-bottom-left {
@extend %popover-triangle;
@extend %popover-triangle-vertical-bottom;
@extend %popover-triangle-vertical-left;
transform-origin: bottom left;
}
.popover-triangle-bottom-right {
@extend %popover-triangle;
@extend %popover-triangle-vertical-bottom;
@extend %popover-triangle-vertical-right;
transform-origin: bottom right;
}
.popover-triangle-left {
@extend %popover-triangle;
@extend %popover-triangle-horizontal-left;
@extend %popover-triangle-horizontal-center;
transform-origin: left center;
}
.popover-triangle-left-top {
@extend %popover-triangle;
@extend %popover-triangle-horizontal-left;
@extend %popover-triangle-horizontal-top;
transform-origin: left top;
}
.popover-triangle-left-bottom {
@extend %popover-triangle;
@extend %popover-triangle-horizontal-left;
@extend %popover-triangle-horizontal-bottom;
transform-origin: left bottom;
}
.popover-triangle-right {
@extend %popover-triangle;
@extend %popover-triangle-horizontal-right;
@extend %popover-triangle-horizontal-center;
transform-origin: right center;
}
.popover-triangle-right-top {
@extend %popover-triangle;
@extend %popover-triangle-horizontal-right;
@extend %popover-triangle-horizontal-top;
transform-origin: right top;
}
.popover-triangle-right-bottom {
@extend %popover-triangle;
@extend %popover-triangle-horizontal-right;
@extend %popover-triangle-horizontal-bottom;
transform-origin: right bottom;
}
//
// Open/close
// --------------------------------------------------
@ -236,85 +64,3 @@
}
}
}//.popover
//
// Positioning
// --------------------------------------------------
// Position relative to the position of the triangle
// So... `popover-triangle-left-top` opens on the right
// of the button because the triangle is on the top left,
// pointing to the top right of the button
//
// |------| |-----------------|
// |Button| < Popover content |
// |------| | Lorem ipsum dol |
// |-----------------|
.popover-item.popover-triangle-bottom {
bottom: calc(100% + 16px);
left: 50%;
transform: translateX(-50%);
}
.popover-item.popover-triangle-bottom-left {
bottom: calc(100% + 16px);
left: 0;
}
.popover-item.popover-triangle-bottom-right {
bottom: calc(100% + 16px);
right: 0;
}
.popover-item.popover-triangle-top {
top: calc(100% + 16px);
left: 50%;
transform: translateX(-50%);
}
.popover-item.popover-triangle-top-left {
top: calc(100% + 16px);
left: 0;
}
.popover-item.popover-triangle-top-right {
top: calc(100% + 16px);
right: 0;
}
.popover-item.popover-triangle-left {
left: calc(100% + 16px);
top: 50%;
transform: translateY(-50%);
}
.popover-item.popover-triangle-left-top {
left: calc(100% + 16px);
top: 50%;
transform: translateY(-($popover_triangle * 2));
}
.popover-item.popover-triangle-left-bottom {
left: calc(100% + 16px);
top: 50%;
transform: translateY(calc(-100% + #{($popover_triangle * 2)}));
}
.popover-item.popover-triangle-right {
right: calc(100% + 16px);
top: 50%;
transform: translateY(-50%);
}
.popover-item.popover-triangle-right-top {
right: calc(100% + 16px);
top: 50%;
transform: translateY(-($popover_triangle * 2));
}
.popover-item.popover-triangle-right-bottom {
right: calc(100% + 16px);
top: 50%;
transform: translateY(calc(-100% + #{($popover_triangle * 2)}));
}

2
app/styles/components/settings-menu.scss
View file

@ -20,7 +20,7 @@
bottom: 0;
z-index: 500;
width: 350px;
border: #e1e1e1 1px solid;
border-left: #e1e1e1 1px solid;
background: #fff;
overflow: hidden;

182
app/styles/components/splitbuttons.scss
View file

@ -68,190 +68,8 @@
.options {
text-align: center;
color: #fff;
@include icon($i-chevron-down, 9px) {
top: 0;
display: inline-block;
position: relative;
}
}
&.up .options:before {
transform: rotate(-360deg);
transition: transform 0.6s ease, top 0.6s ease;
}
&.up:hover .options:before,
&.up.open .options:before {
top: -1px;
transform: rotate(540deg);
transition: transform 0.3s ease, top 0.3s ease;
}
}
}//.splitbtn
//
// Base Placeholder Styles
// --------------------------------------------------
%splitbtn {
display: inline-block;
position: relative;
font-size: 0; // hack to stop space after button
white-space: nowrap;
button {
font-size: 11px; // hack to restore font size
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
// This is the additional dropdown arrow, to the right of the button.
.options {
display: inline-block;
position:relative;
width: 35px;
height: 35px;
margin-left: -1px;
vertical-align: top;
text-align: center;
color: #fff;
background: #e5e5e5;
border-radius: 0 2px 2px 0;
border-left: 0;
box-shadow:
rgba(0,0,0,0.02) 0 1px 0 inset,
rgba(0,0,0,0.02) -1px 0 0 inset,
rgba(0,0,0,0.02) 0 -1px 0 inset;
transition: background-color 0.3s linear;
@include icon($i-chevron-down, 9px) {
position: absolute;
top: 50%;
right: 50%;
margin-top: -3px;
margin-right: -5px;
transition: margin-top 0.3s ease;
transition-property: transform;
transition-duration: 0.3;
transition-timing-function: ease;
};
// Keep the arrow spun when the associated menu is open
&.active:before {
transform: rotate(360deg);
}
&.up.active:before {
margin-top:-4px;
transform: rotate(540deg);
}
// Spin the arrow on hover and while menu is open
&:hover,
&:focus {
will-change: box-shadow, background;
box-shadow: none;
background: #f8f8f8;
@include icon($i-chevron-down) {
will-change: transform;
transform: rotate(360deg);
};
}
// If it has a class of "up" spin it an extra 180degrees to point up
&.up:hover,
&.up:focus {
@include icon($i-chevron-down) {
margin-top:-4px;
transform: rotate(540deg);
transition-property: transform;
transition-duration: 0.6;
transition-timing-function: ease;
};
}
}//.options
}//%splitbtn
//
// Variation Classes
// --------------------------------------------------
// The default splitbutton
.splitbutton {
@extend %splitbtn;
.options {
color:#777;
&:hover,
&:focus {
box-shadow:
rgba(0,0,0,0.07) 0 1px 0 inset,
rgba(0,0,0,0.07) -1px 0 0 inset,
rgba(0,0,0,0.07) 0 -1px 0 inset;
}
}
}
// For save/next/continue/confirm actions
.splitbutton-save {
@extend %splitbtn;
.options {
background: darken($blue, 5%);
&:hover,
&.active,
&:focus {
background: darken($blue, 10%);
}
}
}
// For actions which add something
.splitbutton-add {
@extend %splitbtn;
.options {
background: darken($green, 6%);
&:hover,
&:focus {
background: darken($green, 8%);
}
}
}
// For actions which delete something
.splitbutton-delete {
@extend %splitbtn;
.options {
background: darken($red, 6%);
&:hover,
&:focus {
background: darken($red, 10%);
}
}
}
// Alternative style with more visual attention,
// but no extra semantic meaning
.splitbutton-alt {
@extend %splitbtn;
.options {
background: lighten($darkgrey, 4%);
&:hover,
&:focus {
background: $darkgrey;
}
}
}

27
app/styles/components/uploader.scss
View file

@ -13,7 +13,7 @@
// --------------------------------------------------
.image-uploader {
@include baseline;
margin: 1.6em 0;;
position: relative;
overflow:hidden;
padding: 55px 60px;
@ -37,15 +37,6 @@
margin-top: 10px;
}
.media {
@include icon($i-image, 60px, darken(#e1e1e1, 3%)) {
display: inline-block;
vertical-align: initial;
transition: transform 1s ease;
}
}
.image-url,
.image-upload {
line-height: 12px;
padding: 10px;
@ -62,18 +53,6 @@
}
}
.image-webcam {
@include icon($i-camera, 12px);
}
.image-url {
@include icon($i-link, 12px);
}
.image-upload {
@include icon($i-image, 12px);
}
.btn-green {
display: inline-block;
position:relative;
@ -161,7 +140,7 @@
// TODO: Find a better name for this.
.pre-image-uploader {
@include baseline;
margin: 1.6em 0;;
position: relative;
overflow: hidden;
height: auto;
@ -212,4 +191,4 @@
background: $red;
}
}
}//.pre-image-uploader
}//.pre-image-uploader

2
app/styles/layouts/about.scss
View file

@ -78,7 +78,6 @@
.about-environment {
dl {
@include clearfix;
color: $midgrey;
margin: 2px 0 0 0;
line-height: 1.6;
@ -194,7 +193,6 @@
left: 50%;
transform: translateX(-50%);
transition: opacity 0.15s ease-in-out;
@include triangle(8px, $darkgrey, "down");
}
&:hover {

19
app/styles/layouts/content.scss
View file

@ -82,9 +82,22 @@
}
.avatar {
@include circular-image(18px) {
float: left; // Used instead of `display: block;` to remove the stupid space under the image.
margin-right: 14px;
float: left; // Used instead of `display: block;` to remove the stupid space under the image.
margin-right: 14px;
width: 18px;
height: 18px;
border-radius: 18px;
background-size: cover;
background-position: center center;
position: relative;
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
}

25
app/styles/layouts/users.scss
View file

@ -44,7 +44,6 @@
@media (max-width: 550px) {
display: block;
padding: 15px 0;
@include clearfix;
}
@media (min-width: 551px) {
@ -97,9 +96,23 @@ a.user-list-item {
}
.user-list-item-figure {
@include circular-image(35px) {
display: block;
display: block;
width: 35px;
height: 35px;
border-radius: 35px;
background-size: cover;
background-position: center center;
position: relative;
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
}
.user-list-item-icon,
@ -209,10 +222,6 @@ a.user-list-item {
.invite-new-user {
.modal-body {
@include clearfix;
}
.form-group {
margin-bottom: 0;
@ -243,4 +252,4 @@ a.user-list-item {
.btn-green {
width: 100%;
}
}//.invite-new-user
}//.invite-new-user

128
app/styles/modules/mixins.scss
View file

@ -1,128 +0,0 @@
// ------------------------------------------------------------
// Mixins
//
// Mixins defined here are very general and used in mul
//
// * baseline()
// * clearfix()
// * tab-focus()
// * triangle()
// * set-triangle-color()
// * circular-image()
// ------------------------------------------------------------
//
// Baseline margin
// --------------------------------------------------
@mixin baseline {
margin: 1.6em 0;
}
//
// Fix for clearing float-based overflows
// --------------------------------------------------
@mixin clearfix {
&:after {
content: "";
display: table;
clear: both;
}
}
//
// WebKit-style focus
// From Bootstrap
// --------------------------------------------------
@mixin tab-focus() {
// Default
outline: thin dotted;
// WebKit
outline: 0px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
//
// Simple SCSS mixin to create CSS triangles
// Example: @include css-triangle (10px, #fff, "up");
// --------------------------------------------------
@mixin triangle($size: 20px, $color: #000, $direction: "down", $type: "normal") {
$verticalSize: $size;
width: 0;
height: 0;
@if $type == "shallow" {
$verticalSize: floor($size * $popover_triangle_shallow_multiplier);
}
@if $direction == "down" {
border-left: $size solid #{set-triangle-color($direction, "left", $color)};
border-right: $size solid #{set-triangle-color($direction, "right", $color)};
border-top: $verticalSize solid #{set-triangle-color($direction, "top", $color)};
}
@if $direction == "up" {
border-left: $size solid #{set-triangle-color($direction, "left", $color)};
border-right: $size solid #{set-triangle-color($direction, "right", $color)};
border-bottom: $verticalSize solid #{set-triangle-color($direction, "bottom", $color)};
}
@if $direction == "left" {
border-right: $verticalSize solid #{set-triangle-color($direction, "right", $color)};
border-top: $size solid #{set-triangle-color($direction, "top", $color)};
border-bottom: $size solid #{set-triangle-color($direction, "bottom", $color)};
}
@if $direction == "right" {
border-left: $verticalSize solid #{set-triangle-color($direction, "left", $color)};
border-bottom: $size solid #{set-triangle-color($direction, "bottom", $color)};
border-top: $size solid #{set-triangle-color($direction, "top", $color)};
}
}
//
// Utility function to return the relevant colour depending on what type of arrow it is
// --------------------------------------------------
@function set-triangle-color($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";
}
}
//
// Reusable styles for creating a circular image which is cropped properly, with the image inside it
// Example: @circular-image(35px);
// --------------------------------------------------
@mixin circular-image($widthandheight: 20px) {
@content;
width: $widthandheight;
height: $widthandheight;
border-radius: $widthandheight;
background-size: cover;
background-position: center center;
position: relative;
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
}

2
app/styles/modules/variables.scss
View file

@ -40,6 +40,4 @@ $font-family-mono: Consolas, "Liberation Mono", Menlo, Courier, monospace;
// Dropdown & Popover triangles
// --------------------------------------------------
$dropdown_triangle: 8px;
$popover_triangle: 14px;
$popover_triangle_shallow_multiplier: 0.8; // Adjusts the height of the triangle relative to its width, so it's 0.8x the height of the width

75
app/styles/patterns/buttons.scss
View file

@ -42,7 +42,9 @@
&:active,
&.active {
&:focus {
@include tab-focus();
outline: thin dotted;
outline: 0px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
}
@ -70,75 +72,6 @@
}//.btn
//
// Coloured buttons
// --------------------------------------------------
@mixin button-style($color, $background, $border) {
color: $color;
background-color: $background;
border-color: $border;
transition: background 0.2s ease, border-color 0.2s ease;
&:hover,
&:focus,
&:active,
&.active,
.open > &.dropdown-toggle {
color: $color;
background-color: darken($background, 10%);
border-color: darken($border, 12%);
}
&:active,
&.active,
.open > &.dropdown-toggle {
background-image: none;
}
&.disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&:active,
&.active {
background-color: $background;
border-color: $border;
}
}
.badge {
color: $background;
background-color: $color;
box-shadow: 0 0 0 1px $color;
}
}//@mixin button-style
.btn-default {
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%));
}
.btn-green {
@include button-style(#fff, $green, darken($green, 5%));
}
.btn-red {
@include button-style(#fff, $red, darken($red, 5%));
}
//
// Link buttons
// -------------------------
@ -238,4 +171,4 @@ input[type="button"] {
&.btn-block {
width: 100%;
}
}
}

1
app/styles/patterns/forms.scss
View file

@ -104,7 +104,6 @@ form {
.for-radio,
.for-checkbox {
@include clearfix;
label {
display: block;

13
app/styles/patterns/global.scss
View file

@ -126,7 +126,7 @@ hr {
}
dl {
@include baseline;
margin: 1.6em 0;;
dt {
float: left;
@ -147,7 +147,7 @@ dl {
}
blockquote {
@include baseline;
margin: 1.6em 0;;
padding: 0 1.6em 0 1.6em;
border-left: #e1e1e1 0.6em solid;
@ -190,7 +190,7 @@ code, tt {
}
pre {
@include baseline;
margin: 1.6em 0;;
background: lighten(#e1e1e1, 2%);
width: 100%;
padding: 10px;
@ -243,8 +243,11 @@ img {
// Utility Classes
// --------------------------------------------------
.clearfix {
@include clearfix;
.clearfix,
.clearfix:after {
content: "";
display: table;
clear: both;
}
.wrapper {

60
app/styles/patterns/labels.scss
View file

@ -63,35 +63,67 @@ a.label {
// Colours
// --------------------------------------------------
@mixin label-variant($text-color, $bg-color) {
background-color: $bg-color;
color: $text-color;
.label-default {
background-color: #A1ADB3;
color: #fff;
&[href] {
color: $text-color;
color: #fff;
&:hover,
&:focus {
background-color: darken($bg-color, 10%);
background-color: darken(#A1ADB3, 10%);
}
}
}
.label-default {
@include label-variant(#fff, #A1ADB3);
}
.label-alt {
@include label-variant(#fff, #666);
background-color: #666;
color: #fff;
&[href] {
color: #fff;
&:hover,
&:focus {
background-color: darken(#666, 10%);
}
}
}
.label-blue {
@include label-variant(#fff, $blue);
background-color: $blue;
color: #fff;
&[href] {
color: #fff;
&:hover,
&:focus {
background-color: darken($blue, 10%);
}
}
}
.label-green {
@include label-variant(#fff, $green);
background-color: $green;
color: #fff;
&[href] {
color: #fff;
&:hover,
&:focus {
background-color: darken($green, 10%);
}
}
}
.label-red {
@include label-variant(#fff, $red);
}
background-color: $red;
color: #fff;
&[href] {
color: #fff;
&:hover,
&:focus {
background-color: darken($red, 10%);
}
}
}

2
app/styles/patterns/tables.scss
View file

@ -14,7 +14,7 @@
table,
%table {
@include baseline;
margin: 1.6em 0;;
width: 100%;
max-width: 100%;
background-color: transparent;

2
app/templates/components/gh-modal-dialog.hbs
View file

@ -2,7 +2,7 @@
<article class="{{klass}} js-modal">
<section class="modal-content" {{action "noBubble" bubbles=false preventDefault=false}}>
{{#if title}}<header class="modal-header"><h1>{{title}}</h1></header>{{/if}}
{{#if showClose}}<a class="close" href="" title="Close" {{action "closeModal"}}><span class="hidden">Close</span></a>{{/if}}
{{#if showClose}}<a class="close icon-x" href="" title="Close" {{action "closeModal"}}><span class="hidden">Close</span></a>{{/if}}
<section class="modal-body">
{{yield}}
</section>

2
app/templates/components/gh-notification.hbs
View file

@ -2,5 +2,5 @@
<span class="notification-message">
{{message.message}}
</span>
<button class="close" {{action "closeNotification"}}><span class="hidden">Close</span></button>
<button class="close icon-x" {{action "closeNotification"}}><span class="hidden">Close</span></button>
</section>

2
app/templates/components/gh-uploader.hbs
View file

@ -1,4 +1,4 @@
<span class="media">
<span class="icon-photos">
<span class="hidden">Image Upload</span>
</span>
<img class="js-upload-target" src="{{imageSource}}" />

2
app/templates/modals/invite-new-user.hbs
View file

@ -4,7 +4,7 @@
<fieldset>
<div class="form-group">
<label for="new-user-email">Email Address</label>
{{input action="confirmAccept" class="email" id="new-user-email" type="email" placeholder="Email Address" name="email" autofocus="autofocus"
{{input action="confirmAccept" class="gh-input email" id="new-user-email" type="email" placeholder="Email Address" name="email" autofocus="autofocus"
autocapitalize="off" autocorrect="off" value=email}}
</div>