Update button styles

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

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);
// Buttons
$button-height: 35px;
$button-border-radius: 20px;
// Layout
$layout-post-single-width: 945px;
$layout-post-width: $layout-post-single-width - 305px;

View File

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

View File

@ -14,19 +14,18 @@
margin: 10px 5px;
&-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;
border: 0;
border-radius: 3px;
color: lighten($color-base, 20%);
line-height: $typographic-base-line-height;
padding: 8px 16px;
border-radius: $button-border-radius;
color: $color-base;
&:hover,
&:focus {
color: $color-base;
background: darken($color-gray-bg, 5%);
border: 0;
color: $color-primary;
}
}

View File

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