mirror of
https://github.com/TryGhost/Ghost-Admin.git
synced 2023-12-14 02:33:04 +01:00
First pass - strip mixins
This commit is contained in:
John O'Nolan
Hannah Wolfe
parent
e28fcb3eb6
commit
0b73612cf6
24 changed files with 144 additions and 1008 deletions
|
|
@ -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();
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
// --------------------------------------------------
|
||||
|
||||
@import "modules/variables";
|
||||
@import "modules/mixins";
|
||||
@import "modules/icons";
|
||||
@import "modules/animations";
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)}));
|
||||
}
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
bottom: 0;
|
||||
z-index: 500;
|
||||
width: 350px;
|
||||
border: #e1e1e1 1px solid;
|
||||
border-left: #e1e1e1 1px solid;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -104,7 +104,6 @@ form {
|
|||
|
||||
.for-radio,
|
||||
.for-checkbox {
|
||||
@include clearfix;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
table,
|
||||
%table {
|
||||
@include baseline;
|
||||
margin: 1.6em 0;;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
background-color: transparent;
|
||||
|
|
|
|||
|
|
@ -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,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>
|
||||
|
|
|
|||
|
|
@ -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}}" />
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue