Improve buttons look

This commit is contained in:
EliverLara
2018-10-04 14:48:46 -05:00
parent ade06a2010
commit 632ae20b16
7 changed files with 170 additions and 238 deletions

View File

@@ -94,12 +94,20 @@ button {
min-width: 24px;
padding-left: 4px;
padding-right: 4px;
&.circular,&.sidebar-button{
padding: 6px 4px;
border-radius: 50px;
box-shadow: none;
}
&.sidebar-button {
background-color: lighten($_sidebar_color, 7.77%);
color: #fff;
&:hover{
background-color: $selected_bg_color;
}
}
}
&.image-button.circular,&.image-button.sidebar-button{
padding: 6px 4px;
border-radius: 50px;
box-shadow: none;
}
&.text-button {
padding-left: 16px;
@@ -543,7 +551,7 @@ button.color {
&, overlay { border-radius: 0; }
@if $variant == 'light' {
box-shadow: 0 1px _text_shadow_color();
box-shadow: none;
&:disabled,
&:backdrop { box-shadow: none; }
@@ -553,9 +561,9 @@ button.color {
notebook, list, .view, popover {
button {
box-shadow: inset 0px 0px 0px 1px $borders_color;
box-shadow: none;
&:backdrop {
box-shadow: inset 0px 0px 0px 1px $borders_color;
box-shadow: none;
}
}
.linked > button {

View File

@@ -41,6 +41,10 @@ row {
&:backdrop { background-color: $backdrop_selected_bg_color; }
}
button:not(.image-button){
background-color: transparent;
}
}
&:selected { @extend %selected_items; }

View File

@@ -121,7 +121,6 @@ stacksidebar {
/*--*/
placessidebar{
$_sidebar_color: if($variant == 'light', #222e39, #161925);
&.sidebar{
background-color: transparent;
background-image:linear-gradient(to right, #171e27 40px,
@@ -130,10 +129,8 @@ placessidebar{
$_sidebar_color 100%);
row{
&.sidebar-row {
margin-right: -14px;
&.sidebar-row{
.sidebar-icon {
margin-left:-14px;
margin-right: 12px;
padding-left: 14px;
@@ -143,7 +140,6 @@ placessidebar{
}
&:hover{
transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
color: rgba(0,0,0,0.76);
background-color: transparent; /*rgba(65,67,75,0.4); */
background-image:linear-gradient(to right, rgba(65,67,75,0) 40px, rgba(0,0,0,0.12) 40px,rgba(0,0,0,0.12) 97%);
@@ -186,7 +182,6 @@ placessidebar{
}
list{
background-color: transparent;
&:backdrop { background-color: transparent; }
}