open-dsi
/
nextcloud-server
mirror of https://github.com/nextcloud/server
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #3026 from nextcloud/icons-scss-optimisation

Browse Source 
Icons scss optimisation
pull/3033/head
Morris Jobke 10 years ago committed by GitHub
parent 96d2f2f124 2a2d4390c6
commit b6c00a3f51
1 changed files with 52 additions and 60 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 112
      core/css/icons.scss

112
core/css/icons.scss
Unescape View File

@ -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,99 +13,76 @@
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 {
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);
}
}
.icon-32 {
background-size: 32px !important;
}
/* action icons */
/* ICONS -------------------------------------------------------------------- */
.icon-add {
background-image: url('../img/actions/add.svg?v=1');
}
@ -172,6 +157,14 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-
.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 {
@ -407,8 +400,7 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-
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');
}

Write Preview
Loading…
Cancel
Save