.packages-title {
@include font-size(38, $base-line-height);
margin: 40px 0;
color: $color-text-grey;
.letter-sort > .list {
padding: 15px 0;
margin: 0;
text-align: center;
list-style: none;
border: $base-border;
border-right: 0;
border-left: 0;
@include general-mobile {
box-shadow: $base-box-shadow;
> li {
margin: 10px;
> li {
@include font-size(22, $base-line-height);
@include line-height(36);
display: inline-block;
margin: 0 8px;
font-size: 20px;
text-transform: uppercase;
> li > a {
font-weight: 300;
color: $color-text-grey;
> li > a:hover {
color: $color-link;
.sort-results {
padding: 40px 20px 10px;
.package-list,
.exact-match {
padding: 20px 0;
ul {
padding: 0;
list-style: none;
li {
padding: 18px;
&:nth-child(even) {
background: $color-light-grey;
a {
@include font-size(26, $base-line-height);
line-height: 25px;
color: $color-link;
word-wrap: break-word;
.version {
@include font-size(18, $base-line-height);
font-weight: 300;
color: $color-text-grey;
p {
@include font-size(14, $base-line-height);
padding: 10px 0 0;
margin: 0;
font-weight: 300;
line-height: 16px;
.downloads-info {
@include font-size(18, $base-line-height);
float: right;
font-weight: 300;
color: $color-text-grey;
text-align: right;
.download-count {
Selector should have depth of applicability no greater than 4, but was 5.
Nested selectors are highly coupled to the DOM structure, they will produce less efficient selectors and they compromises the readability of your code although it reduces the duplication of parent selectors. It is recommended to follow the inception rule in such scenarios.
You can reduce this nesting by introducing new selectors targeting the nested elements instead of relying in their parent / child dependency.
display: inline-block;
padding: 0 0 10px;
font-weight: bold;
color: $color-text-grey;
.downloads-count-wrapper {
Selector should have depth of applicability no greater than 4, but was 5.
Nested selectors are highly coupled to the DOM structure, they will produce less efficient selectors and they compromises the readability of your code although it reduces the duplication of parent selectors. It is recommended to follow the inception rule in such scenarios.
You can reduce this nesting by introducing new selectors targeting the nested elements instead of relying in their parent / child dependency.
position: relative;
display: inline-block;
.downloads-count-desc {
Selector should have depth of applicability no greater than 4, but was 6.
Nested selectors are highly coupled to the DOM structure, they will produce less efficient selectors and they compromises the readability of your code although it reduces the duplication of parent selectors. It is recommended to follow the inception rule in such scenarios.
You can reduce this nesting by introducing new selectors targeting the nested elements instead of relying in their parent / child dependency.
border-bottom: 1px dotted $color-purple;
.tooltiptext {
Selector should have depth of applicability no greater than 4, but was 6.
Nested selectors are highly coupled to the DOM structure, they will produce less efficient selectors and they compromises the readability of your code although it reduces the duplication of parent selectors. It is recommended to follow the inception rule in such scenarios.
You can reduce this nesting by introducing new selectors targeting the nested elements instead of relying in their parent / child dependency.
@include font-size(14, $base-line-height);
position: relative;
top: -2em;
width: 300px;
padding: 5px;
color: $color-white;
text-align: center;
text-transform: none;
visibility: hidden;
background-color: $color-text-grey;
border: #919ca2 1px solid;
border-radius: 4px;
transition: all .3s ease-in-out;
.downloads-count-wrapper:hover .tooltiptext {
Selector should have depth of applicability no greater than 4, but was 6.
Nested selectors are highly coupled to the DOM structure, they will produce less efficient selectors and they compromises the readability of your code although it reduces the duplication of parent selectors. It is recommended to follow the inception rule in such scenarios.
You can reduce this nesting by introducing new selectors targeting the nested elements instead of relying in their parent / child dependency.
top: 1.2em;
visibility: visible;
transition: all .2s ease;
h5 {
font-style: italic;
color: #999;
.exact-match {
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
.pagination-widget {
float: right;
.pagination-info,
.pagination-sort {
@include font-size(16, $base-line-height);
float: left;
padding: 10px;
font-weight: 300;
color: $color-text-grey;
.pagination-info {
@include general-mobile {
padding: 10px 0;
.pagination-sort {
@include general-mobile {
float: right;
padding: 10px 0;
.pagination {
margin: 0;
li {
a:hover,
a:focus,
span,
span:hover,
span:focus {
color: $color-link;
.active {
a:hover,
a:focus,
span,
span:hover,
span:focus {
background-color: $color-link;
border-color: $color-link;