tcitcs/pa11y-dashboard
2
0
Fork 0
forked from external-repos/pa11y-dashboard
Code Pull Requests Activity

Updated results page (#196)

Browse Source 
* 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:
Elena Musatova
2017-10-31 17:10:24 +01:00
committed by Rowan Manning
parent a8013834c5
commit 66d97769a0
59 changed files with 6019 additions and 3807 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
public/less/popovers.less
View File

@@ -2,7 +2,6 @@
// Popovers
// --------------------------------------------------
.popover {
position: absolute;
top: 0;
@@ -17,16 +16,24 @@
border: 1px solid @popover-fallback-border-color;
border: 1px solid @popover-border-color;
border-radius: @border-radius-large;
.box-shadow(0 5px 10px rgba(0,0,0,.2));
.box-shadow(0 5px 10px rgba(0, 0, 0, .2));
// Overrides for proper insertion
white-space: normal;
// Offset the popover to account for the popover arrow
&.top { margin-top: -10px; }
&.right { margin-left: 10px; }
&.bottom { margin-top: 10px; }
&.left { margin-left: -10px; }
&.top {
margin-top: -10px;
}
&.right {
margin-left: 10px;
}
&.bottom {
margin-top: 10px;
}
&.left {
margin-left: -10px;
}
}
.popover-title {
@@ -51,17 +58,19 @@
.popover .arrow {
&,
&:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
}
.popover .arrow {
border-width: @popover-arrow-outer-width;
}
.popover .arrow:after {
border-width: @popover-arrow-width;
content: "";
@@ -69,65 +78,64 @@
.popover {
&.top .arrow {
left: 50%;
margin-left: -@popover-arrow-outer-width;
border-bottom-width: 0;
border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-top-color: @popover-arrow-outer-color;
bottom: -@popover-arrow-outer-width;
&:after {
content: " ";
bottom: 1px;
margin-left: -@popover-arrow-width;
border-bottom-width: 0;
border-top-color: @popover-arrow-color;
}
left: 50%;
margin-left: -@popover-arrow-outer-width;
border-bottom-width: 0;
border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-top-color: @popover-arrow-outer-color;
bottom: -@popover-arrow-outer-width;
&:after {
content: " ";
bottom: 1px;
margin-left: -@popover-arrow-width;
border-bottom-width: 0;
border-top-color: @popover-arrow-color;
}
}
&.right .arrow {
top: 50%;
left: -@popover-arrow-outer-width;
margin-top: -@popover-arrow-outer-width;
border-left-width: 0;
border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-right-color: @popover-arrow-outer-color;
&:after {
content: " ";
left: 1px;
bottom: -@popover-arrow-width;
border-left-width: 0;
border-right-color: @popover-arrow-color;
}
top: 50%;
left: -@popover-arrow-outer-width;
margin-top: -@popover-arrow-outer-width;
border-left-width: 0;
border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-right-color: @popover-arrow-outer-color;
&:after {
content: " ";
left: 1px;
bottom: -@popover-arrow-width;
border-left-width: 0;
border-right-color: @popover-arrow-color;
}
}
&.bottom .arrow {
left: 50%;
margin-left: -@popover-arrow-outer-width;
border-top-width: 0;
border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-bottom-color: @popover-arrow-outer-color;
top: -@popover-arrow-outer-width;
&:after {
content: " ";
top: 1px;
margin-left: -@popover-arrow-width;
border-top-width: 0;
border-bottom-color: @popover-arrow-color;
}
left: 50%;
margin-left: -@popover-arrow-outer-width;
border-top-width: 0;
border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-bottom-color: @popover-arrow-outer-color;
top: -@popover-arrow-outer-width;
&:after {
content: " ";
top: 1px;
margin-left: -@popover-arrow-width;
border-top-width: 0;
border-bottom-color: @popover-arrow-color;
}
}
&.left .arrow {
top: 50%;
right: -@popover-arrow-outer-width;
margin-top: -@popover-arrow-outer-width;
border-right-width: 0;
border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-left-color: @popover-arrow-outer-color;
&:after {
content: " ";
right: 1px;
border-right-width: 0;
border-left-color: @popover-arrow-color;
bottom: -@popover-arrow-width;
}
top: 50%;
right: -@popover-arrow-outer-width;
margin-top: -@popover-arrow-outer-width;
border-right-width: 0;
border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback
border-left-color: @popover-arrow-outer-color;
&:after {
content: " ";
right: 1px;
border-right-width: 0;
border-left-color: @popover-arrow-color;
bottom: -@popover-arrow-width;
}
}
}