mirror of
https://github.com/pa11y/pa11y-dashboard.git
synced 2025-09-25 14:51:28 +00:00
Updated results page (#196)
* Update gitignore * Update makefile. Add hbs helper * Collect all selectors for errors/warnings/notices * Add list of techniques that help to solve problems * Remove task-stats block from sidebar * Remove script from Makefile * Update tooltips. Map standards and techniques * Update layout for new components: new tabs, errors panels, lists of selectors, tooltips and popovers * Update styles for new layout and components * Graph buttons and popovers styles * Reformat less code * Include popover. Update IE styles * Problem details. Context popovers * Update graph buttons. Add sorting by number of errors * Update graph buttons params * Fix tooltip names * Swap details and ignore link-buttons * Set ignore link colors
This commit is contained in:

committed by
Rowan Manning

parent
a8013834c5
commit
66d97769a0
@@ -2,7 +2,6 @@
|
||||
// Carousel
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Wrapper for the slide container and indicators
|
||||
.carousel {
|
||||
position: relative;
|
||||
@@ -14,49 +13,51 @@
|
||||
width: 100%;
|
||||
|
||||
> .item {
|
||||
display: none;
|
||||
position: relative;
|
||||
.transition(.6s ease-in-out left);
|
||||
display: none;
|
||||
position: relative;
|
||||
.transition(.6s ease-in-out left);
|
||||
|
||||
// Account for jankitude on images
|
||||
> img,
|
||||
> a > img {
|
||||
.img-responsive();
|
||||
line-height: 1;
|
||||
}
|
||||
// Account for jankitude on images
|
||||
> img,
|
||||
> a > img {
|
||||
.img-responsive();
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
> .active,
|
||||
> .next,
|
||||
> .prev { display: block; }
|
||||
> .prev {
|
||||
display: block;
|
||||
}
|
||||
|
||||
> .active {
|
||||
left: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
> .next,
|
||||
> .prev {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> .next {
|
||||
left: 100%;
|
||||
left: 100%;
|
||||
}
|
||||
> .prev {
|
||||
left: -100%;
|
||||
left: -100%;
|
||||
}
|
||||
> .next.left,
|
||||
> .prev.right {
|
||||
left: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
> .active.left {
|
||||
left: -100%;
|
||||
left: -100%;
|
||||
}
|
||||
> .active.right {
|
||||
left: 100%;
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -80,20 +81,20 @@
|
||||
|
||||
// Set gradients for backgrounds
|
||||
&.left {
|
||||
#gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
|
||||
#gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
|
||||
}
|
||||
&.right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
#gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
|
||||
left: auto;
|
||||
right: 0;
|
||||
#gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
|
||||
}
|
||||
|
||||
// Hover/focus state
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @carousel-control-color;
|
||||
text-decoration: none;
|
||||
.opacity(.9);
|
||||
color: @carousel-control-color;
|
||||
text-decoration: none;
|
||||
.opacity(.9);
|
||||
}
|
||||
|
||||
// Toggles
|
||||
@@ -101,37 +102,41 @@
|
||||
.icon-next,
|
||||
.glyphicon-chevron-left,
|
||||
.glyphicon-chevron-right {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
z-index: 5;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
z-index: 5;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.icon-prev,
|
||||
.glyphicon-chevron-left {
|
||||
left: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.icon-next,
|
||||
.glyphicon-chevron-right {
|
||||
right: 50%;
|
||||
right: 50%;
|
||||
}
|
||||
|
||||
.icon-prev,
|
||||
.icon-next {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-top: -10px;
|
||||
margin-left: -10px;
|
||||
font-family: serif;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-top: -10px;
|
||||
margin-left: -10px;
|
||||
font-family: serif;
|
||||
}
|
||||
|
||||
.icon-prev {
|
||||
&:before {
|
||||
content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
|
||||
}
|
||||
&:before {
|
||||
content: '\2039'; // SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
|
||||
}
|
||||
}
|
||||
|
||||
.icon-next {
|
||||
&:before {
|
||||
content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
|
||||
}
|
||||
&:before {
|
||||
content: '\203a'; // SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -152,20 +157,21 @@
|
||||
text-align: center;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: 1px;
|
||||
text-indent: -999px;
|
||||
border: 1px solid @carousel-indicator-border-color;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: 1px;
|
||||
text-indent: -999px;
|
||||
border: 1px solid @carousel-indicator-border-color;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.active {
|
||||
margin: 0;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: @carousel-indicator-active-bg;
|
||||
margin: 0;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: @carousel-indicator-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -183,38 +189,37 @@
|
||||
color: @carousel-caption-color;
|
||||
text-align: center;
|
||||
text-shadow: @carousel-text-shadow;
|
||||
|
||||
& .btn {
|
||||
text-shadow: none; // No shadow for button elements in carousel-caption
|
||||
text-shadow: none; // No shadow for button elements in carousel-caption
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Scale up controls for tablets and up
|
||||
@media screen and (min-width: @screen-sm-min) {
|
||||
|
||||
// Scale up the controls a smidge
|
||||
.carousel-control {
|
||||
.glyphicons-chevron-left,
|
||||
.glyphicons-chevron-right,
|
||||
.icon-prev,
|
||||
.icon-next {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-top: -15px;
|
||||
margin-left: -15px;
|
||||
font-size: 30px;
|
||||
}
|
||||
.glyphicons-chevron-left,
|
||||
.glyphicons-chevron-right,
|
||||
.icon-prev,
|
||||
.icon-next {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-top: -15px;
|
||||
margin-left: -15px;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
// Show and left align the captions
|
||||
.carousel-caption {
|
||||
left: 20%;
|
||||
right: 20%;
|
||||
padding-bottom: 30px;
|
||||
left: 20%;
|
||||
right: 20%;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
// Move up the indicators
|
||||
.carousel-indicators {
|
||||
bottom: 20px;
|
||||
bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user