mastermindzh/rickvanlieshout.com
1
0
Fork 0
mirror of https://github.com/mastermindzh/rickvanlieshout.com synced 2025-01-14 15:51:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update button styles

Browse Source
This commit is contained in:
alxshelepenok 2018-11-11 14:45:46 +03:00
parent ffbe3e2c4f
commit cca1567f16
4 changed files with 30 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/scss/_variables.scss
View File

@ -27,6 +27,10 @@ $typographic-link-s-font-color: $color-secondary;
$typographic-leading: round(16 * ($typographic-root-font-size / 100) * $typographic-base-line-height); $typographic-leading: round(16 * ($typographic-root-font-size / 100) * $typographic-base-line-height);
// Buttons
$button-height: 35px;
$button-border-radius: 20px;
// Layout // Layout
$layout-post-single-width: 945px; $layout-post-single-width: 945px;
$layout-post-width: $layout-post-single-width - 305px; $layout-post-width: $layout-post-single-width - 305px;

22
src/components/Post/Post.module.scss
View File

@ -16,25 +16,23 @@
&__home-button { &__home-button {
display: block; display: block;
width: 90px; max-width: 90px;
height: 35px; height: $button-height;
font-size: $typographic-base-font-size; padding: 0 24px;
padding: 0 16px; line-height: $button-height;
line-height: 35px;
text-align: center; text-align: center;
color: lighten($color-base, 20%); color: $color-base;
background: $color-gray-bg; border: 1px solid $color-gray-border;
border-radius: $button-border-radius;
font-size: $typographic-base-font-size;
font-weight: normal; font-weight: normal;
border-radius: 3px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@include margin-top(1); @include margin-top(1);
&:hover, &:hover,
&:focus { &:focus {
color: $color-base; color: $color-primary;
background: darken($color-gray-bg, 5%);
border: 0
} }
} }
@ -52,8 +50,8 @@
} }
&__home-button { &__home-button {
max-width: auto;
position: fixed; position: fixed;
max-width: auto;
margin: 0; margin: 0;
top: 30px; top: 30px;
left: 30px left: 30px

17
src/components/Post/Tags/Tags.module.scss
View File

@ -14,19 +14,18 @@
margin: 10px 5px; margin: 10px 5px;
&-link { &-link {
background: $color-gray-bg; display: inline-block;
height: $button-height;
padding: 0 24px;
line-height: $button-height;
border: 1px solid $color-gray-border;
text-decoration: none; text-decoration: none;
border: 0; border-radius: $button-border-radius;
border-radius: 3px; color: $color-base;
color: lighten($color-base, 20%);
line-height: $typographic-base-line-height;
padding: 8px 16px;
&:hover, &:hover,
&:focus { &:focus {
color: $color-base; color: $color-primary;
background: darken($color-gray-bg, 5%);
border: 0;
} }
} }

16
src/components/Sidebar/Contacts/Contacts.module.scss
View File

@ -12,30 +12,30 @@
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 10px -3px; margin: 10px -3px;
width: 104px; width: 140px;
&-item { &-item {
padding: 0; padding: 0;
margin: 4px;
display: flex; display: flex;
align-content: center; align-content: center;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 3px; height: $button-height;
height: 28px; width: $button-height;
width: 28px; line-height: $button-height;
line-height: 28px;
border-radius: 50%; border-radius: 50%;
text-align: center; text-align: center;
background: $color-gray-bg; border: 1px solid $color-gray-bg;
&-link { &-link {
border: 0; border: 0;
display: flex; display: flex;
color: lighten($color-base, 20%); color: $color-base;
&:hover, &:hover,
&:focus { &:focus {
color: $color-base; color: $color-primary;
} }
} }