autonomic-cooperative/autonomic.zone
Archived
4
0
Fork 0
Code Issues 15 Pull Requests 2 Releases Activity

Nuke fontawesome, replace with inline SVG

Browse Source
This commit is contained in:
Anna Sidwell
2019-11-14 22:09:48 +00:00
parent cdea7563f4
commit 86a7eb0ea5
21 changed files with 195 additions and 5176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/assets/styles/components/_box.scss
View File

@ -22,50 +22,26 @@
/* Icon */
.icon {
@include icon;
border-bottom: none;
position: relative;
.icon--style1 { fill: _palette(bg); }
.icon--style2 { fill: _palette(accent2, bg); }
.icon--style3 { fill: _palette(accent3, bg); }
.icon--style4 { fill: _palette(accent4, bg); }
> .label {
display: none;
}
.icon--diamond {
transform: rotate(-45deg);
border-radius: 3px;
border: 2px solid #dfdfdf;
box-sizing: border-box;
height: 5rem;
width: 5rem;
&.major {
@include vendor('transform', 'rotate(-45deg)');
border-radius: 3px;
border: solid 2px _palette(border);
display: inline-block;
font-size: 1.35em;
height: calc(3em + 2px);
line-height: 3em;
text-align: center;
width: calc(3em + 2px);
display: inline-flex;
justify-content: center;
align-items: center;
}
&:before {
@include vendor('transform', 'rotate(45deg)');
display: inline-block;
font-size: 1.5em;
}
@include breakpoint(small) {
font-size: 1em;
}
}
&.style1 {
color: _palette(bg);
}
&.style2 {
color: _palette(accent2, bg);
}
&.style3 {
color: _palette(accent3, bg);
}
&.style4 {
color: _palette(accent4, bg);
}
}
.icon--diamond svg {
margin: 1rem;
width: 2.25rem;
transform: rotate(45deg);
}

122
src/assets/styles/components/_features.scss
View File

@ -2,74 +2,74 @@
/* Features */
.features {
@include vendor('display', 'flex');
@include vendor('flex-wrap', 'wrap');
@include vendor('justify-content', 'center');
display: flex;
justify-content: center;
flex-wrap: wrap;
list-style: none;
padding: 0;
width: 100%;
}
li {
@include padding(4em, 4em, (0,0,0,2em));
display: block;
position: relative;
text-align: left;
width: 50%;
.features-icon {
width: 100%;
max-width: 2rem;
margin-right: 2rem;
fill: _palette(accent1, bg);
}
@for $i from 1 through _misc(max-features) {
$j: 0.035 * $i;
.features-item {
display: inline-flex;
align-items: start;
&:nth-child(#{$i}) {
background-color: rgba(0,0,0, $j);
}
}
padding: 4rem 4rem 4rem 3rem;
text-align: left;
width: 50%;
&:before {
display: block;
color: _palette(accent1, bg);
position: absolute;
left: 1.75em;
top: 2.75em;
font-size: 1.5em;
}
@for $i from 1 through _misc(max-features) {
$j: 0.035 * $i;
&:nth-child(1) {
border-top-left-radius: 3px;
}
&:nth-child(2) {
border-top-right-radius: 3px;
}
&:nth-last-child(1) {
border-bottom-right-radius: 3px;
}
&:nth-last-child(2) {
border-bottom-left-radius: 3px;
}
@include breakpoint(medium) {
@include padding(3em, 2em);
text-align: center;
&:before {
left: 0;
margin: 0 0 (_size(element-margin) * 0.5) 0;
position: relative;
top: 0;
}
}
@include breakpoint(small) {
@include padding(3em, 0);
background-color: transparent !important;
border-top: solid 2px _palette(border);
width: 100%;
&:first-child {
border-top: 0;
}
&:nth-child(#{$i}) {
background-color: rgba(0,0,0, $j);
}
}
}
&:nth-child(1) {
border-top-left-radius: 3px;
}
&:nth-child(2) {
border-top-right-radius: 3px;
}
&:nth-last-child(1) {
border-bottom-right-radius: 3px;
}
&:nth-last-child(2) {
border-bottom-left-radius: 3px;
}
@include breakpoint(medium) {
@include padding(3em, 2em);
text-align: center;
&:before {
left: 0;
margin: 0 0 (_size(element-margin) * 0.5) 0;
position: relative;
top: 0;
}
}
@include breakpoint(small) {
@include padding(3em, 0);
background-color: transparent !important;
border-top: solid 2px _palette(border);
width: 100%;
&:first-child {
border-top: 0;
}
}
}