// base declaration .cmi-btn, a.cmi-btn, button.cmi-btn
+cmi-border-radius($button-border-radius) +box-sizing(border-box) position: relative display: inline-block overflow: hidden min-width: $button-min-width height: $button-height margin: $button-margin-vertical $button-margin-horizontal padding: $button-padding-vertical $button-padding-horizontal font-size: $button-font-size text-align: center text-transform: uppercase text-decoration: none line-height: $button-line-height letter-spacing: 0.05rem border: none outline: 0 cursor: pointer color: $button-default-font-color -webkit-tap-highlight-color: transparent &:hover outline: none text-decoration: none color: darken($color-primary, 7%) background-color: $button-color-hover &:active, &:target outline: none text-decoration: none color: darken($color-primary, 10%) background-color: opacify($button-color-hover, 0.05)
// button raised .cmi-btn.cmi-btn-raised, a.cmi-btn.cmi-btn-raised, button.cmi-btn.cmi-btn-raised
background-color: $button-color-raised @extend .cmi-z-depth-1 +transition(.1s ease-out) &:hover background-color: $button-color-hover @extend .cmi-z-depth-1-hover &:active, &:target background-color: opacify($button-color-hover, 0.05) @extend .cmi-z-depth-2
// button default .cmi-btn.cmi-btn-default, a.cmi-btn.cmi-btn-default, button.cmi-btn.cmi-btn-default
background-color: $button-default-bg-color color: $button-default-font-color &:hover background-color: opacify($button-default-bg-color, 0.02) color: $button-primary-font-color &:active, &:target background-color: opacify($button-default-bg-color, 0.07) color: $button-primary-font-color
// button primary .cmi-btn.cmi-btn-primary, a.cmi-btn.cmi-btn-primary, button.cmi-btn.cmi-btn-primary
background-color: $button-primary-bg-color color: $button-primary-font-color &:hover background-color: lighten($button-primary-bg-color, 5%) color: $button-primary-font-color &:active, &:target background-color: lighten($button-primary-bg-color, 10%) color: $button-primary-font-color
// button danger .cmi-btn.cmi-btn-danger, a.cmi-btn.cmi-btn-danger, button.cmi-btn.cmi-btn-danger
background-color: $button-danger-bg-color color: $button-danger-font-color &:hover background-color: darken($button-danger-bg-color, 5%) color: lighten($button-danger-font-color, 5%) &:active, &:target background-color: darken($button-danger-bg-color, 10%) color: lighten($button-danger-font-color, 5%)
// button danger flat .cmi-btn.cmi-btn-danger-flat, a.cmi-btn.cmi-btn-danger-flat, button.cmi-btn.cmi-btn-danger-flat
color: $button-danger-bg-color &:hover color: lighten($button-danger-bg-color, 5%) &:active, &:target color: lighten($button-danger-bg-color, 5%)
// button small .cmi-btn.cmi-btn-small, a.cmi-btn.cmi-btn-small, button.cmi-btn.cmi-btn-small
min-width: $button-small-min-width height: $button-small-height padding: $button-small-padding-vertical $button-small-padding-horizontal font-size: $button-small-font-size line-height: $button-small-line-height
// button large .cmi-btn.cmi-btn-large, a.cmi-btn.cmi-btn-large, button.cmi-btn.cmi-btn-large
min-width: $button-large-min-width height: $button-large-height padding: $button-large-padding-vertical $button-large-padding-horizontal font-size: $button-large-font-size line-height: $button-large-line-height
// button block .cmi-btn.cmi-btn-block, a.cmi-btn.cmi-btn-block, button.cmi-btn.cmi-btn-block
display: block margin-left: 0 margin-right: 0
// ———————————— // circle buttons
.cmi-btn.cmi-btn-circle
+cmi-border-radius(25px) +clearfix display: inline-block min-width: 50px height: 50px padding: 0 text-align: left i, .cmi-btn-circle-slide-content position: relative display: block white-space: nowrap i float: left padding: 15px font-size: 19px .cmi-btn-circle-slide-content overflow: hidden max-width: 0px margin-right: 0px padding: 18px 0 float: right font-size: 14px line-height: 1 +transition-property(margin-right max-width) +transition-duration(.25s) +transition-timing-function(ease) +transition-delay(.3s) &:hover .cmi-btn-circle-slide-content max-width: 400px margin-right: 20px +transition-property(margin-right max-width) +transition-duration(.25s) +transition-timing-function(ease) +transition-delay(0s)
// button small .cmi-btn.cmi-btn-circle.cmi-btn-small
+cmi-border-radius(40px / 2) min-width: 40px height: 40px padding: 0 i padding: 11px font-size: 17px .cmi-btn-circle-slide-content padding: 13px 0 font-size: 12px line-height: 14px
// button large .cmi-btn.cmi-btn-circle.cmi-btn-large
+cmi-border-radius(60px / 2) min-width: 60px height: 60px padding: 0 i padding: 19px font-size: 22px .cmi-btn-circle-slide-content padding: 20px 0 font-size: 18px line-height: 20px
// button grow left .cmi-btn.cmi-btn-circle-left
text-align: right i float: right .cmi-btn-circle-slide-content margin-right: 0px !important float: left +transition-property(margin-left max-width) &:hover .cmi-btn-circle-slide-content margin-left: 20px +transition-property(margin-left max-width)
// ———————————— // ripples
.cmi-btn, a.cmi-btn, button.cmi-btn
&:active, &:target background-color: $button-color-hover
.cmi-btn.cmi-btn-raised, a.cmi-btn.cmi-btn-raised, button.cmi-btn.cmi-btn-raised
&:active, &:target background-color: $button-color-hover
.cmi-btn.cmi-btn-default, a.cmi-btn.cmi-btn-default, button.cmi-btn.cmi-btn-default
&:active, &:target background-color: opacify($button-default-bg-color, 0.02)
.cmi-btn.cmi-btn-primary, a.cmi-btn.cmi-btn-primary, button.cmi-btn.cmi-btn-primary
&:active, &:target background-color: lighten($button-primary-bg-color, 5%)
// ———————————— // content dependend changes
td.cmi-td
.cmi-btn margin-top: 0 margin-bottom: 0
tr.cmi-tr-active
.cmi-btn, a.cmi-btn, button.cmi-btn background-color: #f4f4f4 &:hover background-color: lighten(#f4f4f4, 5%) &:active, &:target background-color: lighten(#f4f4f4, 5%)
.cmi-flex-list-table
.cmi-btn margin-top: 0 margin-bottom: 0 ul.cmi-flex-list-table-active .cmi-btn, a.cmi-btn, button.cmi-btn background-color: #f4f4f4 &:hover background-color: lighten(#f4f4f4, 5%) &:active, &:target background-color: lighten(#f4f4f4, 5%)