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

fix(badge align): fix alignment of badges on all screens. Simplify logic to achieve this

This commit is contained in:
Eric Jimenez 2016-04-26 12:15:34 -04:00 committed by Naomi Black
parent d502b1f5aa
commit fbeef5b8ee
2 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/_includes/_hero.jade
View File

@ -8,8 +8,9 @@ if current.path[4] && current.path[3] == 'api'
- var textFormat = 'is-standard-case' - var textFormat = 'is-standard-case'
header(class="hero background-sky") header(class="hero background-sky")
h1(class="hero-title text-display-1 #{textFormat}") #{headerTitle} div(class="inner-header")
if useBadges h1(class="hero-title text-display-1 #{textFormat}") #{headerTitle}
if useBadges
span(class="badges") span(class="badges")
if docType if docType
span(class="status-badge"). span(class="status-badge").

24
public/resources/css/module/_hero.scss
View File

@ -35,10 +35,6 @@ $hero-padding: ($unit * 10) ($unit * 6) ($unit * 7);
screen and (max-width: $tablet-breakpoint) { screen and (max-width: $tablet-breakpoint) {
height: auto; height: auto;
padding-top: 40px; padding-top: 40px;
.badges {
margin-top: $unit * 6;
}
} }
&.is-large { &.is-large {
@ -53,8 +49,18 @@ $hero-padding: ($unit * 10) ($unit * 6) ($unit * 7);
} }
} }
.inner-header {
display: flex;
justify-items: center;
flex-wrap: wrap;
@media screen and (max-width: 599px) {
margin: ($unit * 6) 0px 0px 0px;
}
}
.badges { .badges {
padding-left: 8px; margin-top: 4px;
.status-badge { .status-badge {
color: #0143A3; color: #0143A3;
@ -73,10 +79,6 @@ $hero-padding: ($unit * 10) ($unit * 6) ($unit * 7);
} }
@media screen and (max-width: 599px) { @media screen and (max-width: 599px) {
.badges {
margin-top: $unit;
padding-left: 0;
}
.hero-title-with-badges { .hero-title-with-badges {
margin-bottom: $unit * 2; margin-bottom: $unit * 2;
@ -92,6 +94,7 @@ $hero-padding: ($unit * 10) ($unit * 6) ($unit * 7);
display: inline; // title will be inline with badges display: inline; // title will be inline with badges
text-transform: uppercase; text-transform: uppercase;
margin: 0; margin: 0;
margin-right: 8px;
opacity: .87; opacity: .87;
&.is-standard-case { &.is-standard-case {
@ -101,7 +104,8 @@ $hero-padding: ($unit * 10) ($unit * 6) ($unit * 7);
@media handheld and (max-width: $phone-breakpoint), @media handheld and (max-width: $phone-breakpoint),
screen and (max-device-width: $phone-breakpoint), screen and (max-device-width: $phone-breakpoint),
screen and (max-width: $tablet-breakpoint) { screen and (max-width: $tablet-breakpoint) {
margin: ($unit * 6) 0px 0px 0px; // reduce size of api doc title on small screens, prevents cut text on long titles
font-size: 28px;
} }
} }