cargdev/angular
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(aio): fix buttons in "Home" and "Features"

Browse Source 
Using `<a>` inside a `<button>` is not syntactically valid HTML and breaks on
some browsers (e.g. Firefox). Furthermore, clicking the button doesn't do
anything unless you click on the link (e.g. clicking on the padding around the
link does nothing), which is inconvenient and confusing.

Fixes #17448
This commit is contained in:
Georgios Kalpakas
2017-06-13 12:05:59 +03:00
committed by Pete Bacon Darwin
parent fc774a1871
commit bffccf4622
3 changed files with 20 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
aio/src/styles/1-layouts/_marketing-layout.scss
View File

@ -138,27 +138,22 @@ section#intro {
padding: 32px 16px;
}
button {
min-width: 160px;
.button {
align-items: center;
background-color: $blue;
border-radius: 48px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
box-sizing: border-box;
color: $white;
cursor: pointer;
display: flex;
align-items: center;
font-size: 16px;
height: 40px;
justify-content: center;
min-width: 160px;
&:hover {
a {
color: $white;
opacity: 0.7;
}
}
a {
color: $white;
font-size: 16px;
color: rgba($white, 0.7);
}
}
@ -239,22 +234,22 @@ section#intro {
}
}
button.hero-cta {
.button.hero-cta {
background-color: $white;
border-radius: 48px;
display: flex;
height: 40px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
box-sizing: border-box;
cursor: pointer;
font-size: 18px;
font-weight: 600;
height: 40px;
line-height: 40px;
padding: 0 24px;
text-align: center;
&:hover {
opacity: 0.9;
}
a {
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
}
}
aio-shell {