0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-24 23:49:45 -05:00

Add btn icon styles

This commit is contained in:
Juan de la Cruz 2020-05-06 09:35:28 +02:00
parent e6aaf65d03
commit 323832da63

View file

@ -19,9 +19,17 @@
justify-content: center;
padding: 0 1rem;
transition: all .4s;
svg {
height: 15px;
width: 15px;
}
&.btn-large {
font-size: $fs14;
height: 40px;
svg {
height: 20px;
width: 20px;
}
}
&.btn-small {
height: 25px;
@ -69,6 +77,51 @@
}
}
.btn-icon-dark {
@extend %btn;
background: $color-gray-60;
color: $color-gray-20;
svg {
fill: $color-gray-20;
}
&:hover {
background: $color-primary;
svg {
fill: $color-gray-60;
}
}
}
.btn-icon-light {
@extend %btn;
background: $color-gray-10;
color: $color-gray-40;
svg {
fill: $color-gray-40;
}
&:hover {
background: $color-primary;
svg {
fill: $color-gray-60;
}
}
}
.btn-icon-basic {
@extend %btn;
background: transparent;
color: $color-gray-60;
svg {
fill: $color-gray-60;
}
&:hover {
background: transparent;
svg {
fill: $color-primary;
}
}
}
.btn-gray {
@extend %btn;
background: $color-gray-30;