Skip to content
Permalink
Browse files

Fix: Color updates and code cleanup

* Update the colors used on the scan results page
because the bulk of the color audit work was done
in the website rep and needed to be updated here
as well.

* Remove old classes and CSS not being used in the
HTML Formatter.

- - - - - - - - - - - -

Ref webhintio/webhint.io#640
Close #1993
  • Loading branch information...
ststimac authored and molant committed Mar 1, 2019
1 parent 2cc07c5 commit 022f05a0ef4719132fcd7dc5dc7bbf15b3f7d7a2
@@ -96,81 +96,3 @@
}

}

/* Fixed sidebar width */

@media (min-width: 48em) {

[class*="layout--sidebar"] > .module {
margin-top: 0;
}

[class*="layout--sidebar"] > .module--primary {
width: calc(100% - 26rem);
}

.layout--sidebar--alt > .module--primary {
float: left;
}
}

@media (min-width: 64em) {

[class*="layout--sidebar"] > .module--primary {
width: calc(100% - 36rem);
}

}

/*
* FIFTHS LAYOUT
* ---------------------------------------------
*/

@media (min-width: 33.75em) and (max-width: 48em) {

.layout--fifths .module {
width: 50%;
}

.layout--fifths .module:nth-child(-n+2) {
margin-top: 0;
}

.layout--fifths .module:nth-child(2n+1) {
clear: left;
}

}

@media (min-width: 48em) and (max-width: 64em) {

.layout--fifths .module {
width: 33%;
}

.layout--fifths .module:nth-child(-n+3) {
margin-top: 0;
}

.layout--fifths .module:nth-child(3n+1) {
clear: left;
}

}

@media (min-width: 64em) {

.layout--fifths .module {
width: 20%;
}

.layout--fifths .module:nth-child(-n+5) {
margin-top: 0;
}

.layout--fifths .module:nth-child(5n+1) {
clear: left;
}

}
@@ -15,17 +15,6 @@
width: 100%;
}

.scan-overview__header {
background-color: #e6e6e6;
padding: 1rem 2rem;
word-wrap: break-word;
}

.scan-overview__header p:first-child {
margin-bottom: 1rem;
margin-right: 0;
}

.scan-overview__status {
background-color: #e6e6e6;
display: flex;
@@ -62,6 +51,7 @@
}

@keyframes progressBarAnimation {

0% {
background-position: 0% 50%
}
@@ -71,27 +61,7 @@
100% {
background-position: 0% 50%
}
}

.analyzing {
animation: fade 3s linear infinite;
}

@keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}

.scan-overview__header a {
font-size: 1.8rem;
letter-spacing: .05rem;
}

.scan-overview--details {
@@ -189,15 +159,6 @@
}

@media (min-width: 33.75em) {
.scan-overview__header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.scan-overview__header a {
font-size: 1.8rem;
}

.scan-overview--details {
display: flex;
@@ -234,13 +195,6 @@
}
}

@media (min-width: 43.75em) {
.scan-overview__header p:first-child {
margin-bottom: 0;
margin-right: 5rem;
}
}

@media (min-width: 58em) {
[class*="scan-overview__body--"] {
font-size: 3.6rem;
@@ -386,6 +340,7 @@ a > .rule-tile:hover {
max-width: 4rem;
max-height: 5rem;
}

}

@media (min-width: 48em) {
@@ -422,6 +377,7 @@ a > .rule-tile:hover {
.rule-tile--wrapper:first-child {
border-top: none;
}

}

@media (min-width: 48em) and (max-width: 82.5em) {
@@ -462,6 +418,7 @@ a > .rule-tile:hover {
.rule-tile__sub-category {
font-size: 1.2rem;
}

}

/* SCAN DETAILS */
@@ -607,12 +564,6 @@ button {
text-transform: none;
}

@media(min-width: 33.75em) {
a.docs-button {
margin-bottom: 0;
}
}

.rule-result--details__body {
padding: 1.4rem 0;
margin-left: 3rem;
@@ -633,12 +584,6 @@ button {
padding: .2rem .4rem;
}

.error-badge {
color: #b91b06;
font-size: 1.4rem;
padding-left: 3rem;
}

.rule-result__code {
background-color: #f4f4f4;
margin-top: 3rem;
@@ -655,24 +600,10 @@ button {
hyphens: auto;
}

.rule-result__code p {
padding: 0 0 1.4rem 0;
}

.rule-result__code code {
background-color: #f4f4f4;
}

@media (min-width: 48.75em) {
.rule-result--details__header {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 2.4rem;
}
}

/* RULE RESULT MESSAGES */

.rule-result__message--compiling {
@@ -701,12 +632,14 @@ button {
/* RESULTS LOADER ANIMATION */

@keyframes spin {

0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}

}

.rule-result__message--passed {
@@ -740,7 +673,7 @@ button {
}

.rule-result--details__footer-msg img.axe-logo {
width: 10rem;
width: 7rem;
}

/* SCAN QUEUE */

0 comments on commit 022f05a

Please sign in to comment.
You can’t perform that action at this time.