--- /dev/null
+// BUTTONS\r
+button:focus {\r
+ outline: none!important;\r
+}\r
+\r
+.btn {\r
+ font-size: 0.8rem;\r
+ padding: 0.85rem 2.13rem;\r
+ &.btn-lg {\r
+ font-size: 0.9rem;\r
+ padding: 1rem 2.4rem;\r
+ }\r
+ &.btn-md {\r
+ font-size: 0.7rem;\r
+ padding: 0.7rem 1.6rem;\r
+ }\r
+ &.btn-sm {\r
+ font-size: 0.6rem;\r
+ padding: 0.5rem 1.6rem;\r
+ &.btn-table {\r
+ padding: 0.5rem 0.9rem;\r
+ }\r
+ .fa {\r
+ font-size:0.8rem;\r
+ }\r
+ }\r
+}\r
+\r
+.btn {\r
+ border-radius: 2px;\r
+ border: 0;\r
+ @extend .z-depth-1;\r
+ transition: .2s ease-out;\r
+ color: #fff!important;\r
+ margin: 6px;\r
+ white-space: normal !important;\r
+ word-wrap: break-word;\r
+ text-transform: uppercase;\r
+ &:hover {\r
+ @extend .z-depth-1-half;\r
+ color: #fff;\r
+ }\r
+ &:active,\r
+ &:focus,\r
+ &.active {\r
+ outline: 0;\r
+ color: #fff;\r
+ @extend .z-depth-1-half;\r
+ } \r
+ .fa {\r
+ font-size: 1.1rem;\r
+ position: relative;\r
+ vertical-align: middle;\r
+ margin-top: -2px;\r
+ &.right {\r
+ margin-left: 3px;\r
+ }\r
+ &.left {\r
+ margin-right: 3px;\r
+ }\r
+ }\r
+}\r
+\r
+.btn-group {\r
+ .btn {\r
+ margin: 0;\r
+ }\r
+}\r
+\r
+.btn-block {\r
+ margin: inherit;\r
+}\r
+\r
+// Alert buttons\r
+.btn-secondary {\r
+ background-color: $secondary-color;\r
+ &:hover,\r
+ &:focus,\r
+ &:active {\r
+ background-color: lighten( $secondary-color, 5%)!important;\r
+ color: #fff;\r
+ }\r
+ &.active {\r
+ background-color: darken( $secondary-color, 20%)!important;\r
+ @extend .z-depth-1-half;\r
+ &:hover {\r
+ color: #fff;\r
+ }\r
+ &:focus {\r
+ color: #fff;\r
+ }\r
+ }\r
+ &.dropdown-toggle {\r
+ color: #fff!important;\r
+ background-color: $secondary-color!important;\r
+ @extend .z-depth-1-half;\r
+ &:hover {\r
+ color: #fff;\r
+ background-color: lighten( $secondary-color, 5%)!important;\r
+ }\r
+ &:focus {\r
+ color: #fff;\r
+ background-color: $secondary-color;\r
+ }\r
+ }\r
+}\r
+\r
+.btn-secondary:active:hover {\r
+ background-color: lighten( $secondary-color, 5%)!important;\r
+}\r
+\r
+.btn-primary {\r
+ background: $primary-color;\r
+ &:hover,\r
+ &:focus,\r
+ &:active {\r
+ background-color: lighten( $primary-color, 5%)!important;\r
+ }\r
+ &.active {\r
+ background-color: darken( $primary-color, 20%)!important;\r
+ @extend .z-depth-1-half;\r
+ }\r
+}\r
+\r
+.btn-default {\r
+ background: $default-color;\r
+ &:hover,\r
+ &:focus,\r
+ &:active {\r
+ background-color: lighten( $default-color, 5%)!important;\r
+ }\r
+ &.active {\r
+ background-color: darken( $default-color, 20%)!important;\r
+ @extend .z-depth-1-half;\r
+ }\r
+}\r
+\r
+.btn-success {\r
+ background: $success-color;\r
+ &:hover,\r
+ &:focus,\r
+ &:active {\r
+ background-color: lighten( $success-color, 2%)!important;\r
+ }\r
+ &.active {\r
+ background-color: darken( $success-color, 20%)!important;\r
+ @extend .z-depth-1-half;\r
+ }\r
+}\r
+\r
+.btn-info {\r
+ background: $info-color;\r
+ &:hover,\r
+ &:focus {\r
+ background-color: lighten( $info-color, 5%)!important;\r
+ }\r
+ &.active {\r
+ background-color: darken( $info-color, 20%)!important;\r
+ @extend .z-depth-1-half;\r
+ }\r
+}\r
+\r
+.btn-warning {\r
+ background: $warning-color-dark;\r
+ &:hover,\r
+ &:focus {\r
+ background-color: lighten( $warning-color-dark, 6%)!important;\r
+ }\r
+ &.active {\r
+ background-color: darken( $warning-color, 20%)!important;\r
+ @extend .z-depth-1-half;\r
+ }\r
+}\r
+\r
+.btn-danger {\r
+ background: $danger-color-dark;\r
+ &:hover,\r
+ &:focus {\r
+ background-color: lighten( $danger-color-dark, 3%)!important;\r
+ }\r
+ &.active {\r
+ background-color: darken( $danger-color-dark, 15%)!important;\r
+ @extend .z-depth-1-half;\r
+ }\r
+}\r
+\r
+.btn-link {\r
+ background-color: transparent;\r
+ color: #000!important;\r
+ &:hover,\r
+ &:focus {\r
+ background-color: transparent;\r
+ color: #000;\r
+ }\r
+}\r
+\r
+// Additional button styles\r
+.btn-outline-primary {\r
+ border: 2px solid $primary-color;\r
+ color: $primary-color-dark!important;\r
+ background-color: transparent;\r
+ &:hover,\r
+ &:focus,\r
+ &:active,\r
+ &:active:focus {\r
+ color: $primary-color;\r
+ border-color: $primary-color;\r
+ background-color: transparent;\r
+ }\r
+}\r
+\r
+.btn-outline-secondary {\r
+ border: 2px solid $secondary-color;\r
+ color: $secondary-color-dark!important;\r
+ background-color: transparent;\r
+ &:hover,\r
+ &:focus,\r
+ &:active,\r
+ &:active:focus {\r
+ color: $secondary-color;\r
+ border: 2px solid $secondary-color;\r
+ background-color: transparent;\r
+ }\r
+}\r
+\r
+.btn-outline-default {\r
+ background-color: transparent;\r
+ border: 2px solid $default-color;\r
+ color: $default-color-dark!important;\r
+ background-color: transparent;\r
+ &:hover,\r
+ &:focus,\r
+ &:active,\r
+ &:active:focus {\r
+ color: $default-color;\r
+ border-color: $default-color;\r
+ background-color:transparent;\r
+ }\r
+}\r
+\r
+.btn-outline-success {\r
+ border: 2px solid $success-color;\r
+ color: $success-color-dark!important;\r
+ background-color: transparent;\r
+ &:hover,\r
+ &:focus,\r
+ &:active,\r
+ &:active:focus {\r
+ color: $success-color;\r
+ border-color: $success-color;\r
+ background-color: transparent;\r
+ }\r
+}\r
+\r
+.btn-outline-info {\r
+ border: 2px solid $info-color;\r
+ color: $info-color-dark!important;\r
+ background-color: transparent;\r
+ &:hover,\r
+ &:focus,\r
+ &:active,\r
+ &:active:focus {\r
+ color: $info-color;\r
+ border-color: $info-color;\r
+ background-color: transparent;\r
+\r
+ }\r
+}\r
+\r
+.btn-outline-warning {\r
+ border: 2px solid $warning-color;\r
+ color: $warning-color-dark!important;\r
+ background-color: transparent;\r
+ &:hover,\r
+ &:focus,\r
+ &:active,\r
+ &:active:focus {\r
+ border-color: $warning-color;\r
+ color: $warning-color;\r
+ background-color: transparent;\r
+ }\r
+}\r
+\r
+.btn-outline-danger {\r
+ border: 2px solid $danger-color;\r
+ color: $danger-color-dark!important;\r
+ background-color: transparent;\r
+ &:hover,\r
+ &:focus,\r
+ &:active,\r
+ &:active:focus {\r
+ color: $danger-color;\r
+ border-color: $danger-color;\r
+ background-color: transparent;\r
+ }\r
+}\r
+\r
+.btn-outline-white {\r
+ border: 2px solid #fff;\r
+ color: #fff!important;\r
+ background-color: transparent;\r
+ &:hover,\r
+ &:focus,\r
+ &:active,\r
+ &:active:focus {\r
+ color: darken( #fff, 10%);\r
+ border-color: #fff;\r
+ background-color:transparent;\r
+ }\r
+}\r
+\r
+.btn-outline-black {\r
+ border: 2px solid #000;\r
+ color: #000!important;\r
+ background-color: transparent;\r
+ &:hover,\r
+ &:focus,\r
+ &:active,\r
+ &:active:focus {\r
+ color: #000;\r
+ border-color: #000;\r
+ background-color: transparent;\r
+ }\r
+}\r
+\r
+// Pagination\r
+.pager li a {\r
+ border: 0;\r
+ @extend .z-depth-1;\r
+ transition: .2s ease-out;\r
+ &:hover {\r
+ @extend .z-depth-1-half;\r
+ }\r
+}\r
+\r
+// Additional buttons colors\r
+.btn-elegant {\r
+ background: $elegant-color;\r
+ &:hover,\r
+ &:focus {\r
+ background-color: lighten( $elegant-color, 5%)!important;\r
+ }\r
+ &.active {\r
+ background-color: darken( $elegant-color, 20%)!important;\r
+ @extend .z-depth-1-half;\r
+ }\r
+}\r
+\r
+.btn-unique {\r
+ background: $unique-color-dark;\r
+ &:hover,\r
+ &:focus {\r
+ background-color: lighten( $unique-color-dark, 5%)!important;\r
+ }\r
+ &.active {\r
+ background-color: darken( $unique-color-dark, 20%)!important;\r
+ @extend .z-depth-1-half;\r
+ }\r
+}\r
+\r
+.btn-pink {\r
+ background: #e91e63;\r
+ &:hover,\r
+ &:focus {\r
+ background-color: lighten(#e91e63, 5%)!important;\r
+ }\r
+ &.active {\r
+ background-color: darken(#e91e63, 20%)!important;\r
+ @extend .z-depth-1-half;\r
+ }\r
+}\r
+\r
+.btn-purple {\r
+ background: #4a148c;\r
+ &:hover,\r
+ &:focus {\r
+ background-color: lighten(#4a148c, 5%)!important;\r
+ }\r
+ &.active {\r
+ background-color: darken(#4a148c, 20%)!important;\r
+ @extend .z-depth-1-half;\r
+ }\r
+}\r
+\r
+.btn-deep-purple {\r
+ background: #311b92;\r
+ &:hover,\r
+ &:focus {\r
+ background-color: lighten(#311b92, 5%)!important;\r
+ }\r
+ &.active {\r
+ background-color: darken(#311b92, 20%)!important;\r
+ @extend .z-depth-1-half;\r
+ }\r
+}\r
+\r
+.btn-indigo {\r
+ background: #1a237e;\r
+ &:hover,\r
+ &:focus {\r
+ background-color: lighten(#1a237e, 5%)!important;\r
+ }\r
+ &.active {\r
+ background-color: darken(#1a237e, 20%)!important;\r
+ @extend .z-depth-1-half;\r
+ }\r
+}\r
+\r
+.btn-cyan {\r
+ background: #00acc1;\r
+ &:hover,\r
+ &:focus {\r
+ background-color: lighten(#00acc1, 5%)!important;\r
+ }\r
+ &.active {\r
+ background-color: darken(#00acc1, 20%)!important;\r
+ @extend .z-depth-1-half;\r
+ }\r
+}\r
+\r
+.btn-light-green {\r
+ background: #7cb342;\r
+ &:hover,\r
+ &:focus {\r
+ background-color: lighten(#7cb342, 5%)!important;\r
+ }\r
+ &.active {\r
+ background-color: darken(#7cb342, 20%)!important;\r
+ @extend .z-depth-1-half;\r
+ }\r
+}\r
+\r
+.btn-dark-green {\r
+ background: #007E33;\r
+ &:hover,\r
+ &:focus {\r
+ background-color: lighten(#007E33, 5%)!important;\r
+ }\r
+ &.active {\r
+ background-color: darken(#007E33, 20%)!important;\r
+ @extend .z-depth-1-half;\r
+ }\r
+}\r
+\r
+.btn-lime {\r
+ background: #afb42b;\r
+ &:hover,\r
+ &:focus {\r
+ background-color: lighten(#afb42b, 5%)!important;\r
+ }\r
+ &.active {\r
+ background-color: darken(#afb42b, 20%)!important;\r
+ @extend .z-depth-1-half;\r
+ }\r
+}\r
+\r
+.btn-yellow {\r
+ background: #fbc02d;\r
+ &:hover,\r
+ &:focus {\r
+ background-color: lighten(#fbc02d, 5%)!important;\r
+ }\r
+ &.active {\r
+ background-color: darken(#fbc02d, 20%)!important;\r
+ @extend .z-depth-1-half;\r
+ }\r
+}\r
+\r
+.btn-amber {\r
+ background: #ff6f00;\r
+ &:hover,\r
+ &:focus {\r
+ background-color: lighten(#ff6f00, 5%)!important;\r
+ }\r
+ &.active {\r
+ background-color: darken(#ff6f00, 20%)!important;\r
+ @extend .z-depth-1-half;\r
+ }\r
+}\r
+\r
+.btn-orange {\r
+ background: #e65100;\r
+ &:hover,\r
+ &:focus {\r
+ background-color: lighten(#e65100, 5%)!important;\r
+ }\r
+ &.active {\r
+ background-color: darken(#e65100, 20%)!important;\r
+ @extend .z-depth-1-half;\r
+ }\r
+}\r
+\r
+.btn-deep-orange {\r
+ background: #bf360c;\r
+ &:hover,\r
+ &:focus {\r
+ background-color: lighten(#bf360c, 5%)!important;\r
+ }\r
+ &.active {\r
+ background-color: darken(#bf360c, 20%)!important;\r
+ @extend .z-depth-1-half;\r
+ }\r
+}\r
+\r
+.btn-brown {\r
+ background: #6d4c41;\r
+ &:hover,\r
+ &:focus {\r
+ background-color: lighten(#6d4c41, 5%)!important;\r
+ }\r
+ &.active {\r
+ background-color: darken(#6d4c41, 20%)!important;\r
+ @extend .z-depth-1-half;\r
+ }\r
+}\r
+\r
+.btn-blue-grey {\r
+ background: #607d8b;\r
+ &:hover,\r
+ &:focus {\r
+ background-color: lighten(#607d8b, 5%)!important;\r
+ }\r
+ &.active {\r
+ background-color: darken(#607d8b, 20%)!important;\r
+ @extend .z-depth-1-half;\r
+ }\r
+}\r
+\r
+.btn-mdb {\r
+ background: #45526E;\r
+ &:hover,\r
+ &:focus {\r
+ background-color: lighten(#45526E, 5%)!important;\r
+ }\r
+ &.active {\r
+ background-color: darken(#45526E, 20%)!important;\r
+ @extend .z-depth-1-half;\r
+ }\r
+}\r
+\r
+.btn-secondary {\r
+ &.disabled,\r
+ &:disabled {\r
+ background-color: #aa66cc;\r
+ cursor: not-allowed;\r
+ pointer-events: auto !important;\r
+ }\r
+}\r
+\r
+.btn-split {\r
+ padding-left: 0.85rem;\r
+ padding-right: 1.25rem;\r
+}
\ No newline at end of file
projects / bootswatch / blobdiff