1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-14 09:05:17 +01:00
blog/_src/_assets/styl/buttons.styl

230 lines
5.2 KiB
Stylus
Raw Normal View History

2014-07-12 02:00:18 +02:00
//
// kremalicious3
// --------------
// Buttons
//
2014-07-13 01:58:31 +02:00
// Reset default button element
button
padding: 0
cursor: pointer
background: transparent
border: 0
-webkit-appearance: none
&:active
background: $link-color
transition: none
text-shadow: none
2015-06-22 21:28:31 +02:00
.btn,
2015-06-09 22:56:01 +02:00
a.btn
2014-07-12 02:00:18 +02:00
@extend .textcenter
display: inline-block
margin-bottom: 0
font-weight: normal
vertical-align: middle
2014-07-13 00:42:57 +02:00
touch-action: manipulation
2014-07-12 02:00:18 +02:00
cursor: pointer
background-image: none // Reset unusual Firefox-on-Android default style
white-space: nowrap
user-select: none
transition: all .2s ease-in-out
// Default Button
2014-07-12 21:22:47 +02:00
button-size($padding-base-vertical, $padding-base-horizontal, $font-size-small, $line-height-base, $border-radius-base)
2014-07-12 02:00:18 +02:00
background-color: rgba(255,255,255,.1)
border: 1px solid rgba(94,131,162,.3)
border-bottom-color: rgba(94,131,162,.4)
font-family: $headings-font-family
font-weight: $headings-font-weight
color: $brand-grey
text-transform: uppercase
2015-08-09 18:11:26 +02:00
box-shadow: 0 1px 3px alpha($brand-grey-light, .2), inset 0 1px 0 rgba(255,255,255,.7)
2014-07-12 02:00:18 +02:00
2014-07-12 21:22:47 +02:00
&:hover,
2014-07-12 02:00:18 +02:00
&:focus
2015-05-31 22:23:58 +02:00
outline: 0
2014-07-12 21:22:47 +02:00
background-color: rgba(255,255,255,.5)
2014-07-12 02:00:18 +02:00
2014-07-12 21:22:47 +02:00
&:active
2015-06-09 22:56:01 +02:00
color: $brand-grey
border-color: rgba(94,131,162,.3)
2014-07-12 21:22:47 +02:00
background-color: transparent
box-shadow: 0 1px 0 #fff
transition: none
2014-07-12 02:00:18 +02:00
&:focus
outline: 0
border-color: $input-border-focus
2014-07-12 21:22:47 +02:00
// Disabled State
&.disabled,
&[disabled],
fieldset[disabled] &
cursor: not-allowed
pointer-events: none // Future-proof disabling of clicks
opacity: .6
box-shadow: none
2014-07-12 02:00:18 +02:00
2014-07-13 01:08:55 +02:00
// grid buttons
&.col2,
&.col3
margin-bottom: ($line-height-computed/2)
@media $breakpoint2
margin-bottom: 0
2014-07-12 02:00:18 +02:00
.btn span
2014-07-12 21:22:47 +02:00
font-size: .9em
color: rgba(19, 56, 50, .6)
margin-left: .3em
2014-07-12 02:00:18 +02:00
// Primary Button
2015-06-09 22:56:01 +02:00
.btn-primary,
a.btn-primary
2014-07-12 21:22:47 +02:00
color: darken($link-color, 50%)
text-shadow: 0 1px 0 rgba(255,255,255,.3)
background: lighten($link-color, 15%)
border-color: $link-color
box-shadow: 0 1px 3px $brand-grey-light, inset 0 1px 0 rgba(255,255,255,.4)
2014-07-12 02:00:18 +02:00
2014-07-12 21:22:47 +02:00
&:hover,
&:focus
color: darken($link-color, 50%)
background-color: lighten($link-color, 25%)
text-shadow: 0 1px 0 rgba(255,255,255,.3)
2014-07-12 02:00:18 +02:00
2014-07-12 21:22:47 +02:00
&:active
color: darken($link-color, 50%)
2015-06-09 22:56:01 +02:00
border-color: darken($link-color, 10%)
2014-07-12 21:22:47 +02:00
background-color: lighten($link-color, 15%)
2014-07-12 02:00:18 +02:00
.more-link
2014-07-12 21:22:47 +02:00
font-family: $headings-font-family
font-weight: $headings-font-weight
font-size: $font-size-small
color: $link-color
text-transform: uppercase
2014-07-12 02:00:18 +02:00
2014-07-12 21:22:47 +02:00
// icon
2015-06-08 21:22:09 +02:00
.icon
2014-07-12 02:00:18 +02:00
top: .15em
position: relative
2015-06-08 21:22:09 +02:00
width: 18px
height: 18px
2014-07-12 02:00:18 +02:00
.btn-block
2014-07-12 21:22:47 +02:00
display: block
2014-07-12 02:00:18 +02:00
//
// Tweet button
//
.btn.twitter-share
display: inline-block
padding: 1px 3px 0 3px
height: 21px
2014-07-12 21:22:47 +02:00
border: 1px solid #ccc
border-radius: 3px
font: bold 11px/17px Helvetica, Arial, sans-serif
text-align: left
color: #333
text-transform: none
2014-07-12 02:00:18 +02:00
text-decoration: none
2014-07-12 21:22:47 +02:00
text-shadow: 0 1px 0 rgba(255, 255, 255, .5)
background-color: #f8f8f8
2015-09-13 23:10:26 +02:00
background-image: linear-gradient(to bottom, #fff, #dedede)
2014-07-12 21:22:47 +02:00
vertical-align: top
box-shadow: none
2014-07-12 02:00:18 +02:00
&:hover,
&:focus,
&:active
border-color: #bbb
background-color: #d9d9d9
2015-09-13 23:10:26 +02:00
background-image: linear-gradient(to bottom, #f8f8f8, #d9d9d9)
2014-07-12 02:00:18 +02:00
&:active
top: 0
background-color: #efefef
2014-07-12 21:22:47 +02:00
box-shadow: inset 0 3px 5px rgba(0,0,0, .1)
2014-07-12 02:00:18 +02:00
// icon
2015-06-08 21:22:09 +02:00
.icon
width: 15px
height: 15px
2015-08-18 20:55:30 +02:00
margin: 1px 3px 0 0
2015-06-08 21:22:09 +02:00
fill: #0089cb
2015-08-18 20:55:30 +02:00
float: left
2014-07-12 21:22:47 +02:00
// Close button
/////////////////////////////////////
.close
2015-08-18 20:55:30 +02:00
@extend .textcenter, .transition
width: 14px
height: 14px
2014-08-10 00:26:08 +02:00
padding: 0
2015-08-18 20:55:30 +02:00
border-radius: 50%
2014-07-12 21:22:47 +02:00
display: block
2015-08-18 20:55:30 +02:00
background: lighten($brand-grey-light, 50%)
2014-07-12 21:22:47 +02:00
color: #fff
2015-08-18 20:55:30 +02:00
line-height: 1
font-size: $font-size-mini
2014-07-12 21:22:47 +02:00
2014-07-13 01:58:31 +02:00
&:hover,
&:focus
2014-07-13 00:42:57 +02:00
background: $link-color-hover
2014-07-13 01:58:31 +02:00
color: #fff
cursor: pointer
2015-05-31 22:23:58 +02:00
outline: 0
2015-06-22 21:28:31 +02:00
// some helper classes for old content
/////////////////////////////////////
.content-download
2015-08-18 20:55:30 +02:00
@extend .grid, .grid--gutters
display: block
margin-top: 0
@media $breakpoint1
display: flex
margin-top: -($gutter-space)
2015-06-22 21:28:31 +02:00
a
2015-08-18 20:55:30 +02:00
@extend .btn, .grid__col
margin: $gutter-space 0 0 $gutter-space
2015-06-22 21:28:31 +02:00
display: block
span
font-size: $font-size-mini
color: $text-color-light
.icon-download,
.icon-heart,
.icon-wordpress,
.icon-github,
.icon-eye
&:before
content: ""
width: 18px
height: 18px
display: inline-block
margin-right: 5px
margin-bottom: -3px
opacity: .35
background: url('/assets/img/entypo-arrow-with-circle-down.svg') no-repeat left center
.icon-heart:before
background-image: url('/assets/img/entypo-heart.svg')
.icon-github:before
background-image: url('/assets/img/entypo-github.svg')
.icon-eye:before
background-image: url('/assets/img/entypo-eye.svg')