Skip to content

Instantly share code, notes, and snippets.

@starryeyez024
Last active April 28, 2017 01:56
Show Gist options
  • Select an option

  • Save starryeyez024/e9bd6d39bef940cb48e63c6ae27ac114 to your computer and use it in GitHub Desktop.

Select an option

Save starryeyez024/e9bd6d39bef940cb48e63c6ae27ac114 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<br/>
<div class="ux-solution-tags">
<div class="ux-solution-tags-label"> Solutions: </div>
<div>
<a href="//www.redhat.com/en/technologies/industries/government/optimize-it" class="ux-solution-tags-cta" >IT optimization</a>
<a href="//www.redhat.com/en/technologies/industries/government/operationalize-containers" class="ux-solution-tags-cta" >Containers</a>
<a href="//www.redhat.com/en/technologies/industries/government/modern-app-dev" class="ux-solution-tags-cta" >Modern app development</a>
</div>
</div>
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// Breakpoint (v2.6.1)
// ----
@import "breakpoint";
$screen-md-min: 768px;
.ux-solution-tags {
> * {
display: inline-block;
margin-right: 1em;
margin-bottom: .5em;
&:last-child {
> * {
display: inline-block;
margin-right: 1em;
margin-bottom: .5em;
}
}
}
&-label {
font-family: arial;
font-size: pem(14);
color: color("dark-gray");
text-transform: uppercase;
@include breakpoint( $screen-md-min ) {
font-size: pem(16);
}
}
&-cta {
font-family: arial;
text-decoration: none;
font-size: .7em;
color: color("rich-black");
font-weight: 600;
background-color: transparent;
border: 1px solid #aaa;
padding: 3px 10px;
display: inline-block;
transition: all .2s ease-out;
}
}
.ux-solution-tags > * {
display: inline-block;
margin-right: 1em;
margin-bottom: .5em;
}
.ux-solution-tags > *:last-child > * {
display: inline-block;
margin-right: 1em;
margin-bottom: .5em;
}
.ux-solution-tags-label {
font-family: arial;
font-size: pem(14);
color: color("dark-gray");
text-transform: uppercase;
}
@media (min-width: 768px) {
.ux-solution-tags-label {
font-size: pem(16);
}
}
.ux-solution-tags-cta {
font-family: arial;
text-decoration: none;
font-size: .7em;
color: color("rich-black");
font-weight: 600;
background-color: transparent;
border: 1px solid #aaa;
padding: 3px 10px;
display: inline-block;
transition: all .2s ease-out;
}
<br/>
<div class="ux-solution-tags">
<div class="ux-solution-tags-label"> Solutions: </div>
<div>
<a href="//www.redhat.com/en/technologies/industries/government/optimize-it" class="ux-solution-tags-cta" >IT optimization</a>
<a href="//www.redhat.com/en/technologies/industries/government/operationalize-containers" class="ux-solution-tags-cta" >Containers</a>
<a href="//www.redhat.com/en/technologies/industries/government/modern-app-dev" class="ux-solution-tags-cta" >Modern app development</a>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment