Permalink
Browse files

fix(ZNTA-2143) moved LogoLoader css to component folder, beautify code

  • Loading branch information...
kgough
kgough committed Sep 18, 2017
1 parent 91313d1 commit e5f3410799bf0d1c03e15e995704a052a1c2778a
@@ -0,0 +1,132 @@
:root {
--LogoLoader-transition-ease: cubic-bezier(.175, .885, .320, 1.275);
}
/* Logo loader */
.logoLoader {
position: relative;
display: inline-block;
width: calc(1.5rem * 1.625);
height: calc(1.5rem * 1.625);
color: #fff;
border-radius: @border-radius-loader;
}
.logoLoader-inverted {
color: #20718A;
}
.logoLoader-logo {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: all 0.25s var(--LogoLoader-transition-ease);
fill: currentColor;
}
.logoLoader-svg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: visible;
}
.logoLoader path {
transform-origin: 50% 50% 0;
}
.logoLoader:hover .logoLoader-z {
animation: pop 0.3s var(--LogoLoader-transition-ease);
animation-iteration-count: 2;
animation-direction: alternate;
}
.logoLoader-z {
transform: scale(1, 1);
transition: all 0.25s var(--LogoLoader-transition-ease);
}
.logoLoader .logoLoader-logo {
transform-origin: 50% 50% 0;
/*transform: scale(.8, .8);*/
}
.logoLoader .logoLoader-circle, .logoLoader .logoLoader-circlePulse {
transform: scale(1, 1);
}
.logoLoader.is-loading .logoLoader-z {
animation: pulseBegin 1s infinite linear;
}
.logoLoader.is-loading .logoLoader-circle {
animation: pulseBegin 1s infinite linear;
animation-delay: 0.1s;
}
.logoLoader.is-loading .logoLoader-circlePulse {
animation: pulse 1s infinite linear;
animation-delay: 0.1s;
}
@keyframes pulseBegin {
0% {
transform: scale(1);
}
20% {
transform: scale(.6);
}
40% {
transform: scale(1.2);
}
60% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
@keyframes bouncedelay {
0%, 100%, 90% {
transform: scale(0, 0);
opacity: 0.1;
}
40% {
transform: scale(0.05, 0.05);
opacity: 1;
}
}
@keyframes pulse {
0% {
transform: scale(.6);
opacity: 0;
}
20% {
transform: scale(.6);
}
40% {
transform: scale(1.2);
opacity: 0.5;
}
60% {
transform: scale(1.6);
opacity: 0.7;
}
100% {
transform: scale(2);
opacity: 0.0;
}
}
@keyframes pop {
to {
transform: rotate(15deg) scale(1.1, 1.1);
}
}
@@ -119,7 +119,6 @@ textarea {
}
@media (max-width: 29.375rem) {
ul#expList {
margin-bottom: -5px;
}
@@ -132,26 +131,21 @@ textarea {
transform: rotate(0deg);
transform-origin: 50% 50% 0px;
}
.accordion, .accordion * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.accordion {
overflow: hidden;
}
.sidebar .dropdown.btn-group {
vertical-align: bottom;
padding-bottom: 0.5em;
}
.hide-desktop {
transition: all linear 0.15s;
}
.hide-desktop.down {
fill: rgb(84, 102, 122);
height: 30px;
@@ -161,101 +155,79 @@ textarea {
transform: rotate(0deg);
transform-origin: 50% 50% 0px;
}
.hide-desktop.up {
transform: rotate(-180deg);
transform-origin: 50% 50% 0px;
}
.iconProject {
color: #54667a;
height: 30px;
width: 30px;
margin-bottom: 2px;
}
.accordion-section-title.active, .accordion-section-title:hover {
text-decoration: none;
}
.accordion-section:last-child .accordion-section-title {
border-bottom: none;
}
.accordion-section-content {
display: none;
padding-top: 10px;
}
.accordion-section-content.open {
display: block !important;
padding-top: 10px;
}
.sidebar {
width: 100%;
}
#sidebarVersion {
margin-top: 0.5em !important;
}
p.sidebarVersion-settings {
margin-bottom: 0;
}
#sidebarVersion .drop {
margin-left: 10px;
}
.sidebar ul:not(.dropdown-menu) {
display: inline-flex;
}
.sidebar ul li.active {
display: inline-block;
margin-left: 0px !important;
}
.sidebar ul li {
padding-right: 10px;
line-height: 2em;
}
}
@media (min-width: 48rem) {
svg.hide-desktop {
display: none;
visibility: hidden;
}
display: none;
visibility: hidden;
}
.sidebar {
float: left;
height: 100vh;
}
.sidebar ul li.active {
margin-left: -15px;
margin-right: -15px;
}
li.active .iconSidebar svg {
margin-left: 15px;
}
.sidebar ul {
margin-left: -10px;
}
ul.v-links {
margin-top: 0.75rem;
}
ul.v-links li.active a {
padding-left: 45px;
margin-left: -15px;
}
}
@@ -78,9 +78,7 @@ table.tmxTable .badge {
vertical-align: sub;
}
.tmxExport p.allWarnings .btn-link:focus,
.tmxExport p.allWarnings .btn-link:hover,
.tmxExport p.allWarnings .btn-link:active {
.tmxExport p.allWarnings .btn-link:focus, .tmxExport p.allWarnings .btn-link:hover, .tmxExport p.allWarnings .btn-link:active {
text-decoration: none;
opacity: 1 !important;
}
@@ -2,50 +2,50 @@
.triCheckbox {
-webkit-appearance: none;
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
padding: 6px !important;
border-radius: 3px;
display: inline-block;
position: relative;
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
padding: 6px !important;
border-radius: 3px;
display: inline-block;
position: relative;
}
.triCheckbox:active, .triCheckbox:checked:active {
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}
.triCheckbox:checked {
background-color: @color-light;
border: 1px solid @color-muted;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
color: #ffffff;
background-color: @color-light;
border: 1px solid @color-muted;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
color: #ffffff;
}
.triCheckbox:checked:after {
content: '\2713';
font-size: 14px;
position: absolute;
content: '\2713';
font-size: 14px;
position: absolute;
top : 50% !important;
right: 50% !important;
-ms-transform: translate(50%, -50%);
transform : translate(50%, -50%);
color: #ffffff;
color: #ffffff;
}
.triCheckbox:indeterminate {
background-color: @color-light;
border: 1px solid @color-muted;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
color: #ffffff;
background-color: @color-light;
border: 1px solid @color-muted;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
color: #ffffff;
}
.triCheckbox:indeterminate:after {
content: '\2013';
position: absolute;
content: '\2013';
position: absolute;
font-size: 14px;
top : 50% !important;
right: 50% !important;
-ms-transform: translate(50%, -55%);
transform : translate(50%, -55%);
color: #ffffff;
color: #ffffff;
}
Oops, something went wrong.

0 comments on commit e5f3410

Please sign in to comment.