From 3bf189ec671bc1bfeb07129000392a310b59173b Mon Sep 17 00:00:00 2001 From: John O'Nolan Date: Wed, 13 May 2015 10:23:29 +0100 Subject: [PATCH] First pass - strip mixins --- core/client/app/assets/lib/uploader.js | 10 +- core/client/app/styles/app.scss | 1 - .../app/styles/components/dropdowns.scss | 67 +---- core/client/app/styles/components/modals.scss | 10 +- .../app/styles/components/notifications.scss | 218 --------------- .../app/styles/components/pagination.scss | 46 +++- .../app/styles/components/popovers.scss | 254 ------------------ .../app/styles/components/settings-menu.scss | 2 +- .../app/styles/components/splitbuttons.scss | 182 ------------- .../app/styles/components/uploader.scss | 27 +- core/client/app/styles/layouts/about.scss | 2 - core/client/app/styles/layouts/content.scss | 19 +- core/client/app/styles/layouts/users.scss | 25 +- core/client/app/styles/modules/mixins.scss | 128 --------- core/client/app/styles/modules/variables.scss | 2 - core/client/app/styles/patterns/buttons.scss | 75 +----- core/client/app/styles/patterns/forms.scss | 1 - core/client/app/styles/patterns/global.scss | 13 +- core/client/app/styles/patterns/labels.scss | 60 ++++- core/client/app/styles/patterns/tables.scss | 2 +- .../templates/components/gh-modal-dialog.hbs | 2 +- .../templates/components/gh-notification.hbs | 2 +- .../app/templates/components/gh-uploader.hbs | 2 +- .../app/templates/modals/invite-new-user.hbs | 2 +- core/test/functional/client/editor_test.js | 8 +- 25 files changed, 148 insertions(+), 1012 deletions(-) delete mode 100644 core/client/app/styles/modules/mixins.scss diff --git a/core/client/app/assets/lib/uploader.js b/core/client/app/assets/lib/uploader.js index 5809494da5..141281531a 100644 --- a/core/client/app/assets/lib/uploader.js +++ b/core/client/app/assets/lib/uploader.js @@ -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(''); } - if (!$dropzone.find('a.image-url')[0]) { - $dropzone.append(''); + if (!$dropzone.find('a.icon-link')[0]) { + $dropzone.append(''); } // if (!$dropzone.find('a.image-webcam')[0]) { // $dropzone.append(''); @@ -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(); }); }, diff --git a/core/client/app/styles/app.scss b/core/client/app/styles/app.scss index 5bfdcacfab..bd4f35932b 100644 --- a/core/client/app/styles/app.scss +++ b/core/client/app/styles/app.scss @@ -3,7 +3,6 @@ // -------------------------------------------------- @import "modules/variables"; -@import "modules/mixins"; @import "modules/icons"; @import "modules/animations"; diff --git a/core/client/app/styles/components/dropdowns.scss b/core/client/app/styles/components/dropdowns.scss index 9ce20c1755..8b7e6426c9 100644 --- a/core/client/app/styles/components/dropdowns.scss +++ b/core/client/app/styles/components/dropdowns.scss @@ -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; -} diff --git a/core/client/app/styles/components/modals.scss b/core/client/app/styles/components/modals.scss index 3f69b3c0a1..ef9f59447a 100644 --- a/core/client/app/styles/components/modals.scss +++ b/core/client/app/styles/components/modals.scss @@ -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; -} \ No newline at end of file +} diff --git a/core/client/app/styles/components/notifications.scss b/core/client/app/styles/components/notifications.scss index c281513225..0eab77de83 100644 --- a/core/client/app/styles/components/notifications.scss +++ b/core/client/app/styles/components/notifications.scss @@ -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; - } -} \ No newline at end of file diff --git a/core/client/app/styles/components/pagination.scss b/core/client/app/styles/components/pagination.scss index 589f3af242..717056107d 100644 --- a/core/client/app/styles/components/pagination.scss +++ b/core/client/app/styles/components/pagination.scss @@ -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); -} \ No newline at end of file + > 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; + } + } + } +} diff --git a/core/client/app/styles/components/popovers.scss b/core/client/app/styles/components/popovers.scss index e18e6336e6..f80b6e59bb 100644 --- a/core/client/app/styles/components/popovers.scss +++ b/core/client/app/styles/components/popovers.scss @@ -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)})); -} \ No newline at end of file diff --git a/core/client/app/styles/components/settings-menu.scss b/core/client/app/styles/components/settings-menu.scss index 285451fa80..45d578dbb4 100644 --- a/core/client/app/styles/components/settings-menu.scss +++ b/core/client/app/styles/components/settings-menu.scss @@ -20,7 +20,7 @@ bottom: 0; z-index: 500; width: 350px; - border: #e1e1e1 1px solid; + border-left: #e1e1e1 1px solid; background: #fff; overflow: hidden; diff --git a/core/client/app/styles/components/splitbuttons.scss b/core/client/app/styles/components/splitbuttons.scss index 3dad39a5e9..a3a64fc603 100644 --- a/core/client/app/styles/components/splitbuttons.scss +++ b/core/client/app/styles/components/splitbuttons.scss @@ -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; - } - } -} \ No newline at end of file diff --git a/core/client/app/styles/components/uploader.scss b/core/client/app/styles/components/uploader.scss index f58fee6405..689a8627cb 100644 --- a/core/client/app/styles/components/uploader.scss +++ b/core/client/app/styles/components/uploader.scss @@ -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 \ No newline at end of file +}//.pre-image-uploader diff --git a/core/client/app/styles/layouts/about.scss b/core/client/app/styles/layouts/about.scss index 441bcaea06..ea4a7fa0e4 100644 --- a/core/client/app/styles/layouts/about.scss +++ b/core/client/app/styles/layouts/about.scss @@ -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 { diff --git a/core/client/app/styles/layouts/content.scss b/core/client/app/styles/layouts/content.scss index 37173d771c..3ed908b221 100644 --- a/core/client/app/styles/layouts/content.scss +++ b/core/client/app/styles/layouts/content.scss @@ -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; } } diff --git a/core/client/app/styles/layouts/users.scss b/core/client/app/styles/layouts/users.scss index 9394056ae3..ef2e79c8ee 100644 --- a/core/client/app/styles/layouts/users.scss +++ b/core/client/app/styles/layouts/users.scss @@ -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 \ No newline at end of file +}//.invite-new-user diff --git a/core/client/app/styles/modules/mixins.scss b/core/client/app/styles/modules/mixins.scss deleted file mode 100644 index 428675cf4b..0000000000 --- a/core/client/app/styles/modules/mixins.scss +++ /dev/null @@ -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; - } -} \ No newline at end of file diff --git a/core/client/app/styles/modules/variables.scss b/core/client/app/styles/modules/variables.scss index bf2dbcdae6..c737927da3 100644 --- a/core/client/app/styles/modules/variables.scss +++ b/core/client/app/styles/modules/variables.scss @@ -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 diff --git a/core/client/app/styles/patterns/buttons.scss b/core/client/app/styles/patterns/buttons.scss index ba1b0b9795..1f5713feda 100644 --- a/core/client/app/styles/patterns/buttons.scss +++ b/core/client/app/styles/patterns/buttons.scss @@ -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%; } -} \ No newline at end of file +} diff --git a/core/client/app/styles/patterns/forms.scss b/core/client/app/styles/patterns/forms.scss index ab30ad6991..d3e0fc0ed6 100644 --- a/core/client/app/styles/patterns/forms.scss +++ b/core/client/app/styles/patterns/forms.scss @@ -104,7 +104,6 @@ form { .for-radio, .for-checkbox { - @include clearfix; label { display: block; diff --git a/core/client/app/styles/patterns/global.scss b/core/client/app/styles/patterns/global.scss index f20ad4f7e9..74eba3f970 100644 --- a/core/client/app/styles/patterns/global.scss +++ b/core/client/app/styles/patterns/global.scss @@ -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 { diff --git a/core/client/app/styles/patterns/labels.scss b/core/client/app/styles/patterns/labels.scss index 898d1d39f3..5156a49a2b 100644 --- a/core/client/app/styles/patterns/labels.scss +++ b/core/client/app/styles/patterns/labels.scss @@ -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); -} \ No newline at end of file + background-color: $red; + color: #fff; + + &[href] { + color: #fff; + &:hover, + &:focus { + background-color: darken($red, 10%); + } + } +} diff --git a/core/client/app/styles/patterns/tables.scss b/core/client/app/styles/patterns/tables.scss index be525a621a..fdf6867ed2 100644 --- a/core/client/app/styles/patterns/tables.scss +++ b/core/client/app/styles/patterns/tables.scss @@ -14,7 +14,7 @@ table, %table { - @include baseline; + margin: 1.6em 0;; width: 100%; max-width: 100%; background-color: transparent; diff --git a/core/client/app/templates/components/gh-modal-dialog.hbs b/core/client/app/templates/components/gh-modal-dialog.hbs index b1322a7744..30526e4e81 100644 --- a/core/client/app/templates/components/gh-modal-dialog.hbs +++ b/core/client/app/templates/components/gh-modal-dialog.hbs @@ -2,7 +2,7 @@
{{#if title}}

{{title}}

{{/if}} - {{#if showClose}}{{/if}} + {{#if showClose}}{{/if}}
{{yield}}
diff --git a/core/client/app/templates/components/gh-notification.hbs b/core/client/app/templates/components/gh-notification.hbs index 9c2b960f15..55e12823e8 100644 --- a/core/client/app/templates/components/gh-notification.hbs +++ b/core/client/app/templates/components/gh-notification.hbs @@ -2,5 +2,5 @@ {{message.message}} - +
diff --git a/core/client/app/templates/components/gh-uploader.hbs b/core/client/app/templates/components/gh-uploader.hbs index 6cee284cad..b4ff58a91e 100644 --- a/core/client/app/templates/components/gh-uploader.hbs +++ b/core/client/app/templates/components/gh-uploader.hbs @@ -1,4 +1,4 @@ - + diff --git a/core/client/app/templates/modals/invite-new-user.hbs b/core/client/app/templates/modals/invite-new-user.hbs index 7328f89e32..ef8ca51f4f 100644 --- a/core/client/app/templates/modals/invite-new-user.hbs +++ b/core/client/app/templates/modals/invite-new-user.hbs @@ -4,7 +4,7 @@
- {{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}}
diff --git a/core/test/functional/client/editor_test.js b/core/test/functional/client/editor_test.js index d9ac281134..4d7f1b8816 100644 --- a/core/test/functional/client/editor_test.js +++ b/core/test/functional/client/editor_test.js @@ -172,7 +172,7 @@ CasperTest.begin('Image Uploads', 24, function suite(test) { '' + '
Something went wrong :(
' + '' + - 'URL' + + 'URL' + '\n', 'HTML is correct'); test.assertSelectorHasText( @@ -185,13 +185,13 @@ CasperTest.begin('Image Uploads', 24, function suite(test) { function assertEmptyImageUploaderDisplaysCorrectly() { test.assertExists('.entry-preview .js-upload-target', 'Upload target exists'); test.assertExists('.entry-preview .js-fileupload', 'File upload target exists'); - test.assertExists('.entry-preview .image-url', 'Image URL button exists'); + test.assertExists('.entry-preview .icon-link', 'Image URL button exists'); } casper.waitForSelector('.entry-preview .js-drop-zone.image-uploader', assertEmptyImageUploaderDisplaysCorrectly); // Test image URL upload modal - casper.thenClick('.entry-preview .image-uploader a.image-url'); + casper.thenClick('.entry-preview .image-uploader a.icon-link'); casper.waitForSelector('.image-uploader-url', function onSuccess() { test.assertExists('.image-uploader-url .url.js-upload-url', 'Image URL uploader exists'); @@ -234,7 +234,7 @@ CasperTest.begin('Image Uploads', 24, function suite(test) { }); casper.waitForSelector('.entry-preview .js-drop-zone.image-uploader', function onSuccess() { - casper.thenClick('.entry-preview .image-uploader a.image-url'); + casper.thenClick('.entry-preview .image-uploader a.icon-link'); }); casper.waitForSelector('.image-uploader-url', function onSuccess() {