jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update link styles.

Browse source
This commit is contained in:
bmauger 2022-01-19 08:57:39 -05:00
parent 5b3b8f76c1
commit 82b7cdbf99
2 changed files with 35 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/layouts/component-test/component-test.vue
View file

@ -606,12 +606,18 @@
</div> </div>
<div class="row my-4"> <div class="row my-4">
<div class="col"> <div class="col">
<h4 class="m-0 p-2 bg-light rounded">Text Link</h4> <h4 class="m-0 p-2 bg-light rounded">Links</h4>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col my-3 d-flex align-items-center"> <div class="col my-3">
<a href="#">Text Link</a> <a href="#">Text Link</a> <span>(default text link behavior)</span>
<br><br>
<a class="small" href="#">Text Link Small</a> <span>(.small)</span>
<br><br>
<a class="footer-link" href="#">Footer Link</a> <span>(.footer-link)</span>
<br><br>
<a class="navigation-link" href="#">Navigation Link</a> <span>(.navigation-link)</span>
</div> </div>
</div> </div>
<div class="row my-4"> <div class="row my-4">

27
src/styles/common-styles.scss
View file

@ -14,8 +14,33 @@ body {
color: $blue; color: $blue;
text-decoration: none; text-decoration: none;
border-bottom: 1px solid $blue; border-bottom: 1px solid $blue;
line-height: 26px;
padding: 0 0 4px 0;
font-weight: 500;
&:hover { &:hover {
color: $blue-400; color: $blue;
font-weight: 700;
}
&.small {
line-height: 24px;
}
&.navigation-link {
color: $black;
border-bottom: 1px solid $black;
line-height: 26px;
}
&.footer-link {
color: $gray-500;
text-decoration: none;
border-bottom: 1px solid transparent;
line-height: 20px;
padding: 0 0 2px 0;
font-weight: 400;
font-size: .75rem;
&:hover {
border-bottom: 1px solid $gray-500;
padding: 0 0 2px 0;
}
} }
} }
.pointer { .pointer {