Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-26 08:29:42 -05:00
Code Issues Activity

Add btn icon styles

Browse source
This commit is contained in:
Juan de la Cruz 2020-05-06 09:35:28 +02:00
parent e6aaf65d03
commit 323832da63
1 changed files with 53 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
frontend/resources/styles/common/framework.scss
View file

@ -19,9 +19,17 @@
justify-content: center; justify-content: center;
padding: 0 1rem; padding: 0 1rem;
transition: all .4s; transition: all .4s;
svg {
height: 15px;
width: 15px;
}
&.btn-large { &.btn-large {
font-size: $fs14; font-size: $fs14;
height: 40px; height: 40px;
svg {
height: 20px;
width: 20px;
}
} }
&.btn-small { &.btn-small {
height: 25px; 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 { .btn-gray {
@extend %btn; @extend %btn;
background: $color-gray-30; background: $color-gray-30;