upgrade to stylelint release

This commit is contained in:
Jeff Escalante 2020-05-19 15:29:18 -04:00
parent 789ba665d5
commit 7cbd8b9d36
8 changed files with 1002 additions and 87 deletions

11
website/.stylelintrc.js Normal file
View File

@ -0,0 +1,11 @@
module.exports = {
...require('@hashicorp/nextjs-scripts/.stylelintrc.js'),
rules: {
'selector-pseudo-class-no-unknown': [
true,
{
ignoreAtRules: ['page'],
},
],
},
}

View File

@ -21,6 +21,7 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
/* /*
* Margins here compensate for extra 8px margin on buttons * Margins here compensate for extra 8px margin on buttons
* which are needed to center and space properly regardless of whether * which are needed to center and space properly regardless of whether

View File

@ -24,7 +24,7 @@
width: 100%; width: 100%;
height: var(--background-height); height: var(--background-height);
position: absolute; position: absolute;
bottom: 0px; bottom: 0;
z-index: -1; z-index: -1;
} }
@ -56,7 +56,7 @@
max-height: 40px; max-height: 40px;
width: 33.33%; width: 33.33%;
padding: 0 30px; padding: 0 30px;
margin: 24px 0px; margin: 24px 0;
@media (max-width: 800px) { @media (max-width: 800px) {
padding: 0 20px; padding: 0 20px;
@ -68,7 +68,7 @@
max-height: 40px; max-height: 40px;
width: 33.33%; width: 33.33%;
padding: 0 30px; padding: 0 30px;
margin: 24px 0px; margin: 24px 0;
@media (max-width: 800px) { @media (max-width: 800px) {
padding: 0 20px; padding: 0 20px;
@ -116,6 +116,7 @@
outline: none !important; outline: none !important;
} }
} }
/* End `nuka-carousel` styles */ /* End `nuka-carousel` styles */
& .side-control { & .side-control {
@ -150,7 +151,7 @@
width: 100%; width: 100%;
background: var(--white); background: var(--white);
padding: 64px; padding: 64px;
box-shadow: 0px 8px 22px #dedede; box-shadow: 0 8px 22px #dedede;
@media (max-width: 800px) { @media (max-width: 800px) {
box-shadow: none; box-shadow: none;
@ -231,12 +232,13 @@
& .person-name { & .person-name {
& h5 { & h5 {
margin: 0; margin: 0;
@media (max-width: 400px) {
font-size: 16px;
}
} }
@media (max-width: 400px) { @media (max-width: 400px) {
& h5 {
font-size: 16px;
}
& p { & p {
font-size: 15px; font-size: 15px;
} }
@ -256,7 +258,7 @@
& .case { & .case {
color: var(--gray-5); color: var(--gray-5);
font-size: 24px; font-size: 24px;
line-height: 31px; /* Called for within the design, no custom property seemed appropriate*/ line-height: 31px; /* Called for within the design, no custom property seemed appropriate */
} }
} }

View File

@ -69,9 +69,11 @@
margin: 0 16px; margin: 0 16px;
width: 33.333%; width: 33.333%;
transition: box-shadow 0.25s, transform 0.25s, -webkit-transform 0.25s; transition: box-shadow 0.25s, transform 0.25s, -webkit-transform 0.25s;
display: flex;
cursor: pointer;
&:hover { &:hover {
box-shadow: 0px 16px 28px rgba(37, 38, 45, 0.12); box-shadow: 0 16px 28px rgba(37, 38, 45, 0.12);
transform: translateY(-4px); transform: translateY(-4px);
} }
@ -87,89 +89,84 @@
margin-bottom: 48px; margin-bottom: 48px;
} }
} }
}
& > a { & .course {
display: flex; border: 1px solid var(--gray-6);
cursor: pointer;
}
& > a .course {
border: 1px solid var(--gray-6);
display: flex;
flex-direction: column;
width: 100%;
& > div {
min-height: 200px;
padding: 25px;
}
& .image {
background: var(--gray-7);
position: relative;
display: flex; display: flex;
justify-content: center; flex-direction: column;
align-items: center; width: 100%;
& img { & > div {
max-width: 80px; min-height: 200px;
max-height: 80px; padding: 25px;
width: 100%;
} }
}
& h4 { & .image {
color: var(--gray-2); background: var(--gray-7);
} position: relative;
& .time {
color: var(--gray-4);
position: absolute;
top: 10px;
right: 10px;
}
& .content {
text-align: center;
background: #fff;
@media (max-width: 768px) {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
& img {
max-width: 80px;
max-height: 80px;
width: 100%;
}
} }
& h4 { & h4 {
margin: 24px 0px; color: var(--gray-2);
}
& .time {
color: var(--gray-4);
position: absolute;
top: 10px;
right: 10px;
}
& .content {
text-align: center;
background: #fff;
@media (max-width: 768px) {
display: flex;
justify-content: center;
align-items: center;
}
& h4 {
margin: 24px 0;
}
} }
} }
} }
}
&.brand-consul { &.brand-consul {
& .content label { & .content label {
color: var(--consul); color: var(--consul);
}
} }
}
/* Brand -- Nomad */ /* Brand -- Nomad */
&.brand-nomad { &.brand-nomad {
& .content label { & .content label {
color: var(--nomad); color: var(--nomad);
}
} }
}
/* Brand -- Packer */ /* Brand -- Packer */
&.brand-packer { &.brand-packer {
& .content label { & .content label {
color: var(--packer); color: var(--packer);
}
} }
}
/* Brand -- Terraform */ /* Brand -- Terraform */
&.brand-terraform { &.brand-terraform {
& .content label { & .content label {
color: var(--terraform); color: var(--terraform);
}
} }
} }
} }

View File

@ -1,7 +1,7 @@
#p-use-case { #p-use-case {
& .features-header { & .features-header {
text-align: center; text-align: center;
margin-bottom: 0px; margin-bottom: 0;
} }
/* Overriding the g-text-split component to have /* Overriding the g-text-split component to have

File diff suppressed because it is too large Load Diff

View File

@ -4,7 +4,7 @@
"version": "0.0.1", "version": "0.0.1",
"author": "HashiCorp", "author": "HashiCorp",
"dependencies": { "dependencies": {
"@hashicorp/nextjs-scripts": "^7.2.1", "@hashicorp/nextjs-scripts": "^8.0.0",
"@hashicorp/react-alert": "^2.0.0", "@hashicorp/react-alert": "^2.0.0",
"@hashicorp/react-alert-banner": "^3.1.0", "@hashicorp/react-alert-banner": "^3.1.0",
"@hashicorp/react-button": "^2.2.0", "@hashicorp/react-button": "^2.2.0",

View File

@ -121,16 +121,16 @@ footer .content {
.g-section-block section { .g-section-block section {
padding-top: 96px; padding-top: 96px;
padding-bottom: 96px; padding-bottom: 96px;
}
.g-section-block section > .g-section-header + *, & > .g-section-header + *,
.g-section-block section > .g-container > .g-section-header + * { & > .g-container > .g-section-header + * {
margin-top: 72px; margin-top: 72px;
} }
.g-section-block section > * + *, & > * + *,
.g-section-block section > .g-container > * + * { & > .g-container > * + * {
margin-top: 96px; margin-top: 96px;
}
} }
.g-section-block .button-container { .g-section-block .button-container {