iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
aio/content/marketing/features.html
View File

@ -105,9 +105,7 @@
</div>
<div class="cta-bar announcement-bar">
<button class="button">
<a href="guide/quickstart">Get Started</a>
</button>
<a class="button" href="guide/quickstart">Get Started</a>
</div>
</article>

10
aio/content/marketing/index.html
View File

@ -17,9 +17,7 @@
<!-- container content starts -->
<div class="hero-headline no-toc">One framework.<br>Mobile &amp; desktop.</div>
<button class="button button-large button-plain hero-cta">
<a href="guide/quickstart">Get Started</a>
</button>
<a class="button hero-cta" href="guide/quickstart">Get Started</a>
</div><!-- CONTAINER END -->
</section>
@ -34,10 +32,8 @@
<div class="announcement-bar">
<img src="generated/images/marketing/angular-mix.png" height="40" width="151">
<p>Join us at our newest event, October 2017</p>
<button class="button">
<a href="https://angularmix.com/">Learn More</a>
</button>
</div>
<a class="button" href="https://angularmix.com/">Learn More</a>
</div>
</div>
<!-- Group 1-->

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 {