Dockery/Jump
1
0
Fork 0
mirror of https://github.com/daledavies/jump.git synced 2026-02-25 07:40:46 +01:00
Code Issues Packages Projects Releases Activity

Issue #67: Remove animated SVG background image from icons

Browse Source
This commit is contained in:
Dale Davies
2023-03-13 16:34:49 +00:00
parent 604171c8bd
commit f3e108ceca
2 changed files with 88 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
jumpapp/assets/css/src/_sites.scss
View File

@@ -6,89 +6,89 @@ $unknown-color: #ccc;
@mixin sites-alternate {
width: 100%;
margin-top: 20px;
width: 100%;
margin-top: 20px;
li {
float: left;
width: 50%;
text-align: left;
padding: 0 15px;
margin-bottom: 10px;
li {
float: left;
width: 50%;
text-align: left;
padding: 0 15px;
margin-bottom: 10px;
a {
background-color: rgba(255,255,255,0.8);
box-shadow: 0 1px 5px rgba(0,0,0,.3);
padding: 8px;
width: 100%;
transition: background-color .1s, box-shadow .1s;
position: relative;
overflow: hidden;
&:hover {
background-color: #fff;
box-shadow: 0 1px 5px rgba(0,0,0,.6);
}
}
}
.icon {
width: 35px;
height: 35px !important;
display: inline-block;
padding: 0;
border: none;
border-radius: 6px;
overflow: hidden;
box-shadow: none;
vertical-align: middle;
margin: 0 8px 0 0;
}
.name {
width: auto;
display: inline-block;
vertical-align: middle;
text-shadow: none;
color: #202124;
position: absolute;
top: 50%;
height: 14px;
line-height: 14px;
margin-top: -7px;
}
}
@mixin status-sites-alternate {
li {
a {
padding-left: 11px;
a {
background-color: rgba(255,255,255,0.8);
box-shadow: 0 1px 5px rgba(0,0,0,.3);
padding: 8px;
width: 100%;
transition: background-color .1s, box-shadow .1s;
position: relative;
overflow: hidden;
&::before {
content: '';
display: inline-block;
height: 100%;
width: 4px;
position: absolute;
left: 0;
top: 0;
background-color: $unknown-color;
}
}
&.online a::before {
background-color: $online-color;
}
&.offline a::before {
background-color: $offline-color;
}
&.error a::before {
background-color: $error-color;
&:hover {
background-color: #fff;
box-shadow: 0 1px 5px rgba(0,0,0,.6);
}
}
}
.icon {
width: 35px;
height: 35px !important;
display: inline-block;
padding: 0;
border: none;
border-radius: 6px;
overflow: hidden;
box-shadow: none;
vertical-align: middle;
margin: 0 8px 0 0;
}
.name {
width: auto;
display: inline-block;
vertical-align: middle;
text-shadow: none;
color: #202124;
position: absolute;
top: 50%;
height: 14px;
line-height: 14px;
margin-top: -7px;
}
}
@mixin status-sites-alternate {
li {
a {
padding-left: 11px;
position: relative;
&::before {
content: '';
display: inline-block;
height: 100%;
width: 4px;
position: absolute;
left: 0;
top: 0;
background-color: $unknown-color;
}
}
&.online a::before {
background-color: $online-color;
}
&.offline a::before {
background-color: $offline-color;
}
&.error a::before {
background-color: $error-color;
}
}
}
.sites {
padding: 0;
margin: 0;
@@ -129,10 +129,10 @@ $unknown-color: #ccc;
box-shadow: 0 1px 5px rgba(0,0,0,.3);
padding: 15px;
margin-bottom: 8px;
background-image: url(../images/loading.svg);
background-image: url(../images/loading-static.svg);
background-repeat: no-repeat;
background-position: 50%;
background-size: 20px;
background-size: 25px;
img {
width: 100%;
@@ -192,7 +192,6 @@ $unknown-color: #ccc;
}
@media (max-width: 500px) {
.sites {
@include sites-alternate();
@@ -221,5 +220,4 @@ $unknown-color: #ccc;
}
}
}
}

11
jumpapp/assets/images/loading-static.svg Normal file
View File

@@ -0,0 +1,11 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier"> <circle cx="4" cy="12" r="1" stroke="#aaa" stroke-width="2"/> <circle cx="12" cy="12" r="1" stroke="#aaa" stroke-width="2"/> <circle cx="20" cy="12" r="1" stroke="#aaa" stroke-width="2"/> </g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 643 B