Use boolean to define if button-rounded mixin is filled or not

Fix to blog
This commit is contained in:
Pablo Vazquez 2016-08-22 23:04:06 +02:00
parent bd9ce3182d
commit 9c59b06ab9
2 changed files with 26 additions and 16 deletions

View File

@ -21,31 +21,44 @@
+clearfix
@mixin button-rounded($mixin-color, $roundness)
@mixin button-rounded($mixin-color, $roundness, $filled: false)
font-family: $font-body
text-transform: uppercase
opacity: .9
padding:
left: 20px
right: 20px
text-transform: uppercase
color: $mixin-color
border: 1px solid $mixin-color
border-radius: $roundness
background-color: transparent
@if $filled
background: linear-gradient(lighten($mixin-color, 2%), $mixin-color)
color: white
border: thin solid darken($mixin-color, 5%)
text-shadow: 1px 1px 0 rgba(black, .15)
@else
background-color: transparent
color: $mixin-color
border: thin solid $mixin-color
text-shadow: none
transition: color 350ms ease-out, border 150ms ease-in-out, opacity 150ms ease-in-out, background-color 150ms ease-in-out
text-shadow: none
&:hover
opacity: 1
cursor: pointer
color: $mixin-color
border-color: $mixin-color
background-color: rgba($mixin-color, .1)
text-decoration: none
@if $filled
background: linear-gradient(lighten($mixin-color, 5%), lighten($mixin-color, 5%))
color: white
border-color: lighten($mixin-color, 5%)
@else
background-color: rgba($mixin-color, .1)
color: $mixin-color
border-color: $mixin-color
&:active, &:focus
outline: none
box-shadow: none
border-color: $mixin-color
background-color: $mixin-color
color: white

View File

@ -19,7 +19,7 @@
#blog_container
margin: 0
padding:
top: 0
top: 15px
bottom: 15px
display: flex
justify-content: center
@ -212,8 +212,6 @@
.blog_index-header
width: 100%
height: 300px
max-height: 300px
overflow: hidden
position: relative
display: block
@ -221,7 +219,6 @@
border-top-right-radius: 3px
img
+position-center-translate
width: 100%
.blog_index-item