Update all CSS to use logical properties
- Vendor CSS's are excluded for now - Removed <IE7 asterisk prefix items
This commit is contained in:
iBug
@ -7,7 +7,7 @@
|
||||
margin-bottom: 2em;
|
||||
|
||||
@include breakpoint($large) {
|
||||
float: right;
|
||||
float: inline-end;
|
||||
width: calc(100% - #{$right-sidebar-width-narrow});
|
||||
padding-inline-end: $right-sidebar-width-narrow;
|
||||
}
|
||||
@ -53,10 +53,7 @@
|
||||
a[rel="permalink"]::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
a + a {
|
||||
@ -98,14 +95,14 @@
|
||||
.archive__item-caption {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
margin: 0 auto;
|
||||
padding: 2px 5px;
|
||||
color: #fff;
|
||||
font-family: $caption-font-family;
|
||||
font-size: $type-size-8;
|
||||
background: #000;
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
z-index: 5;
|
||||
opacity: 0.5;
|
||||
border-radius: $border-radius 0 0 0;
|
||||
@ -140,11 +137,11 @@
|
||||
/* extend grid elements to the right */
|
||||
|
||||
@include breakpoint($large) {
|
||||
margin-right: -1 * $right-sidebar-width-narrow;
|
||||
margin-inline-end: -1 * $right-sidebar-width-narrow;
|
||||
}
|
||||
|
||||
@include breakpoint($x-large) {
|
||||
margin-right: -1 * $right-sidebar-width;
|
||||
margin-inline-end: -1 * $right-sidebar-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -153,23 +150,22 @@
|
||||
margin-bottom: 2em;
|
||||
|
||||
@include breakpoint($small) {
|
||||
float: left;
|
||||
float: inline-start;
|
||||
width: span(5 of 10);
|
||||
|
||||
&:nth-child(2n + 1) {
|
||||
clear: both;
|
||||
margin-left: 0;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
&:nth-child(2n + 2) {
|
||||
clear: none;
|
||||
margin-left: gutter(of 10);
|
||||
margin-inline-start: gutter(of 10);
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint($medium) {
|
||||
margin-left: 0; /* override margin*/
|
||||
margin-right: 0; /* override margin*/
|
||||
margin-inline: 0; /* override margin*/
|
||||
width: span(3 of 12);
|
||||
|
||||
&:nth-child(2n + 1) {
|
||||
@ -182,17 +178,17 @@
|
||||
|
||||
&:nth-child(4n + 2) {
|
||||
clear: none;
|
||||
margin-left: gutter(1 of 12);
|
||||
margin-inline-start: gutter(1 of 12);
|
||||
}
|
||||
|
||||
&:nth-child(4n + 3) {
|
||||
clear: none;
|
||||
margin-left: gutter(1 of 12);
|
||||
margin-inline-start: gutter(1 of 12);
|
||||
}
|
||||
|
||||
&:nth-child(4n + 4) {
|
||||
clear: none;
|
||||
margin-left: gutter(1 of 12);
|
||||
margin-inline-start: gutter(1 of 12);
|
||||
}
|
||||
}
|
||||
|
||||
@ -254,23 +250,23 @@
|
||||
font-size: 1.125em;
|
||||
|
||||
@include breakpoint($small) {
|
||||
float: left;
|
||||
float: inline-start;
|
||||
margin-bottom: 0;
|
||||
width: span(4 of 12);
|
||||
|
||||
&:nth-child(3n + 1) {
|
||||
clear: both;
|
||||
margin-left: 0;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
&:nth-child(3n + 2) {
|
||||
clear: none;
|
||||
margin-left: gutter(of 12);
|
||||
margin-inline-start: gutter(of 12);
|
||||
}
|
||||
|
||||
&:nth-child(3n + 3) {
|
||||
clear: none;
|
||||
margin-left: gutter(of 12);
|
||||
margin-inline-start: gutter(of 12);
|
||||
}
|
||||
|
||||
.feature__item-teaser {
|
||||
@ -280,30 +276,25 @@
|
||||
}
|
||||
|
||||
.archive__item-body {
|
||||
padding-left: gutter(1 of 12);
|
||||
padding-right: gutter(1 of 12);
|
||||
padding-inline: gutter(1 of 12);
|
||||
}
|
||||
|
||||
a.btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
&--left {
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
float: inline-start;
|
||||
margin-inline: 0;
|
||||
width: 100%;
|
||||
clear: both;
|
||||
font-size: 1.125em;
|
||||
|
||||
.archive__item {
|
||||
float: left;
|
||||
float: inline-start;
|
||||
}
|
||||
|
||||
.archive__item-teaser {
|
||||
@ -313,22 +304,19 @@
|
||||
a.btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
@include breakpoint($small) {
|
||||
.archive__item-teaser {
|
||||
float: left;
|
||||
float: inline-start;
|
||||
width: span(5 of 12);
|
||||
}
|
||||
|
||||
.archive__item-body {
|
||||
float: right;
|
||||
padding-left: gutter(0.5 of 12);
|
||||
padding-right: gutter(1 of 12);
|
||||
float: inline-end;
|
||||
padding-inline-start: gutter(0.5 of 12);
|
||||
padding-inline-end: gutter(1 of 12);
|
||||
width: span(7 of 12);
|
||||
}
|
||||
}
|
||||
@ -336,15 +324,14 @@
|
||||
|
||||
&--right {
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
float: inline-start;
|
||||
margin-inline: 0;
|
||||
width: 100%;
|
||||
clear: both;
|
||||
font-size: 1.125em;
|
||||
|
||||
.archive__item {
|
||||
float: left;
|
||||
float: inline-start;
|
||||
}
|
||||
|
||||
.archive__item-teaser {
|
||||
@ -354,34 +341,30 @@
|
||||
a.btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
@include breakpoint($small) {
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
|
||||
.archive__item-teaser {
|
||||
float: right;
|
||||
float: inline-end;
|
||||
width: span(5 of 12);
|
||||
}
|
||||
|
||||
.archive__item-body {
|
||||
float: left;
|
||||
float: inline-start;
|
||||
width: span(7 of 12);
|
||||
padding-left: gutter(0.5 of 12);
|
||||
padding-right: gutter(1 of 12);
|
||||
padding-inline-start: gutter(0.5 of 12);
|
||||
padding-inline-end: gutter(1 of 12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--center {
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
float: inline-start;
|
||||
margin-inline: 0;
|
||||
width: 100%;
|
||||
clear: both;
|
||||
font-size: 1.125em;
|
||||
@ -398,10 +381,7 @@
|
||||
a.btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
@include breakpoint($small) {
|
||||
@ -442,14 +422,14 @@
|
||||
Wide Pages
|
||||
========================================================================== */
|
||||
|
||||
.wide {
|
||||
.wide {
|
||||
.archive {
|
||||
@include breakpoint($large) {
|
||||
padding-right: 0;
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
|
||||
@include breakpoint($x-large) {
|
||||
padding-right: 0;
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user