From 27a1dadea488426ed60e2447183a6478d0baba6b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 11 Jan 2017 14:12:39 +0100 Subject: [PATCH 1/2] Loader and animation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/icons.scss | 86 +++++++++++++++++---------------------------- 1 file changed, 33 insertions(+), 53 deletions(-) diff --git a/core/css/icons.scss b/core/css/icons.scss index 9afb5630181..a35f3f25c21 100644 --- a/core/css/icons.scss +++ b/core/css/icons.scss @@ -13,80 +13,60 @@ .loading, .loading-small, .icon-loading, .icon-loading-dark, .icon-loading-small, .icon-loading-small-dark { position: relative; + &:after { + z-index: 2; + content: ''; + height: 30px; + width: 30px; + margin: -16px 0 0 -16px; + position: absolute; + top: 50%; + left: 50%; + border-radius: 100%; + -webkit-animation: rotate .8s infinite linear; + animation: rotate .8s infinite linear; + -webkit-transform-origin: center; + -ms-transform-origin: center; + transform-origin: center; + border: 2px solid rgba(150, 150, 150, 0.5); + border-top-color: rgb(100, 100, 100); + } } -.loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after { - z-index: 2; - content: ''; - height: 30px; - width: 30px; - margin: -16px 0 0 -16px; - position: absolute; - top: 50%; - left: 50%; - border-radius: 100%; - -webkit-animation: rotate .8s infinite linear; - animation: rotate .8s infinite linear; - -webkit-transform-origin: center; - -ms-transform-origin: center; - transform-origin: center; -} - -.loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after { - border: 2px solid rgba(150, 150, 150, 0.5); - border-top-color: rgb(100, 100, 100); -} - -.icon-loading-dark:after, .icon-loading-small-dark:after { +.icon-loading-dark:after, +.icon-loading-small-dark:after { border: 2px solid rgba(187, 187, 187, 0.5); border-top-color: #bbb; } -.icon-loading-small:after, .icon-loading-small-dark:after { +.icon-loading-small:after, +.icon-loading-small-dark:after { height: 14px; width: 14px; margin: -8px 0 0 -8px; } /* Css replaced elements don't have ::after nor ::before */ - -img.icon-loading, object.icon-loading, video.icon-loading, button.icon-loading, textarea.icon-loading, input.icon-loading, select.icon-loading { - background-image: url('../img/loading.gif'); -} - -img.icon-loading-dark, object.icon-loading-dark, video.icon-loading-dark, button.icon-loading-dark, textarea.icon-loading-dark, input.icon-loading-dark, select.icon-loading-dark { - background-image: url('../img/loading-dark.gif'); -} - -img.icon-loading-small, object.icon-loading-small, video.icon-loading-small, button.icon-loading-small, textarea.icon-loading-small, input.icon-loading-small, select.icon-loading-small { - background-image: url('../img/loading-small.gif'); -} - -img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-small-dark, button.icon-loading-small-dark, textarea.icon-loading-small-dark, input.icon-loading-small-dark, select.icon-loading-small-dark { - background-image: url('../img/loading-small-dark.gif'); -} - -@-webkit-keyframes rotate { - from { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); +img, object, video, button, textarea, input, select { + .icon-loading { + background-image: url('../img/loading.gif'); } - - to { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); + .icon-loading-dark { + background-image: url('../img/loading-dark.gif'); + } + .icon-loading-small { + background-image: url('../img/loading-small.gif'); + } + .icon-loading-small-dark { + background-image: url('../img/loading-small-dark.gif'); } } - @keyframes rotate { from { - -webkit-transform: rotate(0deg); transform: rotate(0deg); } - to { - -webkit-transform: rotate(360deg); transform: rotate(360deg); } } From 2a2d4390c6e49f034ebfcc6b530be292c7930964 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Wed, 11 Jan 2017 14:16:05 +0100 Subject: [PATCH 2/2] Comments and delete icon MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- core/css/icons.scss | 26 +++++++++++++++++++------- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/core/css/icons.scss b/core/css/icons.scss index a35f3f25c21..b1f9cc6df67 100644 --- a/core/css/icons.scss +++ b/core/css/icons.scss @@ -1,3 +1,11 @@ +/** + * @copyright Copyright (c) 2017, John Molakvoæ (skjnldsv@protonmail.com) + * + * @license GNU AGPL version 3 or any later version + * + */ + +/* GLOBAL ------------------------------------------------------------------- */ [class^='icon-'], [class*=' icon-'] { background-repeat: no-repeat; background-position: center; @@ -5,12 +13,11 @@ min-height: 16px; } -/* general assets */ - .icon-breadcrumb { background-image: url('../img/breadcrumb.svg?v=1'); } +/* LOADING ------------------------------------------------------------------ */ .loading, .loading-small, .icon-loading, .icon-loading-dark, .icon-loading-small, .icon-loading-small-dark { position: relative; &:after { @@ -71,13 +78,11 @@ img, object, video, button, textarea, input, select { } } - .icon-32 { background-size: 32px !important; } -/* action icons */ - +/* ICONS -------------------------------------------------------------------- */ .icon-add { background-image: url('../img/actions/add.svg?v=1'); } @@ -152,6 +157,14 @@ img, object, video, button, textarea, input, select { .icon-delete-white { background-image: url('../img/actions/delete-white.svg?v=1'); + &.no-permission { + &:hover, &:focus { + background-image: url('../img/actions/delete-white.svg?v=1'); + } + } + &:hover, &:focus { + background-image: url('../img/actions/delete-hover.svg?v=1'); + } } .icon-details { @@ -387,8 +400,7 @@ img, object, video, button, textarea, input, select { background-image: url('../img/actions/view-previous.svg?v=1'); } -/* places icons */ - +/* PLACES ------------------------------------------------------------------- */ .icon-calendar-dark { background-image: url('../img/places/calendar-dark.svg?v=1'); }