cief/exchange-2.0
1
0
Fork 0
mirror of https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git synced 2026-08-19 04:23:55 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
e3e4b490b02cc309bf71e695627f0d75ecdffa91
exchange-2.0/resources/assets/sass/modules/_buttons.scss
T
edmondlang e3e4b490b0 Merge branch 'development' of gitlab.com:CIEFWorldwideSdnBhd/exchange-2.0 into wallet-ui 
# Conflicts:
#	resources/views/partials/header.blade.php
#	routes/web.php
2022-02-04 22:22:07 +08:00

684 lines
16 KiB
SCSS
Vendored
Raw Blame History

/*------------------------------------------------------------------
[6. Buttons]
*/
/*
[Buttons Base Styles]
*/
// Mixins
// --------------------------------------------------
// Creates contextual buttons
@mixin button($text-color, $background-color, $border-color) {
&,
&:focus{
color: $text-color;
background-color: $background-color;
border-color: $border-color;
}
&.active,
&:active,
&.active:focus,
&:active:focus,
&:active:hover,
.show .dropdown-toggle#{&} {
background-color: mix($background-color, $color-black, $mix-percentage-dark) !important;
border-color: mix($background-color, $color-black, $mix-percentage-dark) !important;
color:$text-color;
}
&.hover,
&:hover,
.show .dropdown-toggle#{&}
{
background-color: mix($background-color, $color-white, $mix-percentage-light);
border-color: mix($background-color, $color-white, $mix-percentage-light);
color: $text-color;
}
&.active:hover{
background: mix($background-color, #000, 86%) ;
border-color: mix($background-color, #000, 86%) ;
}
&.disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&:active,
&.active {
background-color: $background-color;
border-color: $border-color;
}
}
.badge {
color: $background-color;
background-color: $text-color;
}
}
.btn {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
letter-spacing: 0.01em;
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
-webkit-font-feature-settings: "kern" 1;
-moz-font-feature-settings: "kern" 1;
margin-bottom: 0;
border: 1px solid $color-master-lighter;
text-align: center;
vertical-align: middle;
cursor: pointer;
@include border-radius(3px);
background-image: none !important;
color: $color-master;
background-color: $color-white ;
text-shadow: none;
box-shadow: none;
line-height: 21px;
position: relative;
transition: color 0.1s linear 0s,background-color 0.1s linear 0s,opacity 0.2s linear 0s !important;
padding: 6px $padding-base-horizontal;
&:hover{
background-color: #fafafa;
border: 1px solid fade-out($color-master,.73);
color: #333;
}
&.active{
border-color: $color-master-light;
background: #fff;
color: #333;
}
&:focus,
&:active:focus,
&.active:focus {
outline: none !important;
outline-style: none;
color: #333;
}
.caret {
margin-left: 3px;
&.single {
margin-left: 0px;
}
}
&:hover,
&:focus,
&:active,
&.active,
&.disabled,
&[disabled] {
box-shadow: none;
}
}
// Fix for chrome's button outline on focus
button:focus{
outline: none !important;
}
button:disabled {
cursor: not-allowed;
}
/*
Alternate buttons
--------------------------------------------------
*/
.btn-primary {
@include button($color-white, $color-primary, $color-primary);
}
.btn-success {
@include button($color-white, $color-success, $color-success);
}
.btn-complete{
@include button($color-white, $color-complete, $color-complete);
}
.btn-info {
@include button($color-white, $color-info, $color-info);
}
.btn-warning {
@include button($color-white, $color-warning, $color-warning);
}
.btn-danger {
@include button($color-white, $color-danger, $color-danger);
}
.btn-outline-primary {
@include button($color-primary, transparent, $color-primary);
&:hover{
@include button($color-white, $color-primary, $color-primary);
}
}
.btn-outline-success {
@include button($color-success, transparent, $color-success);
&:hover{
@include button($color-white, $color-success, $color-success);
}
}
.btn-outline-complete{
@include button($color-complete, transparent, $color-complete);
&:hover{
@include button($color-white, $color-complete, $color-complete);
}
}
.btn-outline-info {
@include button($color-info, transparent, $color-info);
&:hover{
@include button($color-white, $color-info, $color-info);
}
}
.btn-outline-warning {
@include button($color-warning, transparent, $color-warning);
&:hover{
@include button($color-white, $color-warning, $color-warning);
}
}
.btn-outline-danger {
@include button($color-danger, transparent, $color-danger);
&:hover{
@include button($color-white, $color-danger, $color-danger);
}
}
.btn-default, .btn-default:focus{
color: #5e5e5e;
background-color: $color-white;
border-color: $color-master-lighter;
}
.btn-default {
&.active, &:active, &.active:focus, &:active:focus, &:active:hover{
background-color: $color-master-lighter;
border-color: $color-master-light;
color:$color-master-dark;
}
&.hover, &:hover{
background-color: $color-master-lightest;
border-color: fade-out($color-master,.73);
color: $color-master-darker;
}
&.active:hover{
background: mix($color-white, #000, 94%) ;
}
}
// Link button
.btn-link{
color: #5e5e5e;
background-color: transparent;
border: none;
&:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
background-color: transparent;
border: none;
text-decoration: none;
outline: none;
}
}
//File Input Btn
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
background: red;
cursor: inherit;
display: block;
}
/*
Button Sizes
--------------------------------------------------
*/
.btn-lg, .btn-group-lg > .btn{
padding-left: $padding-lg-horizontal;
padding-right: $padding-lg-horizontal;
line-height: 22px;
padding-top: 10px;
padding-bottom: 10px;
}
.btn-sm, .btn-group-sm > .btn{
padding-left: $padding-sm-horizontal;
padding-right: $padding-sm-horizontal;
font-size: 11.9px;
line-height: 20px;
}
.btn-xs, .btn-group-xs > .btn{
padding: $padding-xs-vertical $padding-xs-horizontal;
font-size: 10.5px;
}
.btn-cons {
margin-right: 5px;
min-width: 120px;
}
/*
Rounded buttons
--------------------------------------------------
*/
.btn-rounded{
border-radius: 100px !important;
}
/*
Dropdown menus
--------------------------------------------------
*/
.show{
.btn-group#{&} .dropdown-toggle,
& .dropdown-toggle,
&.dropdown-default .dropdown-toggle{
box-shadow: none;
}
}
/* Pages default dropdown */
.dropdown-default{
display: inline-block;
&.toggle-only{
padding-left: 9px;
padding-right: 9px;
&:after{
position: initial;
}
}
&.show{
& > .btn {
&.dropdown-toggle {
border-color: transparent !important;
background: transparent !important;
z-index: $zIndex-navbar - 9 !important;
}
}
.dropdown-menu {
opacity: 1;
transform: scale(1, 1);
z-index: $zIndex-dropdown;
.dropdown-item {
visibility: visible;
}
}
&.dropup {
& > .btn-primary + .dropdown-menu:after,
& > .btn-success + .dropdown-menu:after,
& > .btn-complete + .dropdown-menu:after,
& > .btn-warning + .dropdown-menu:after,
& > .btn-danger + .dropdown-menu:after,
& > .btn-info + .dropdown-menu:after{
top: auto;
bottom: 0;
}
}
& > .btn-primary + .dropdown-menu:after,
& > .btn-success + .dropdown-menu:after,
& > .btn-complete + .dropdown-menu:after,
& > .btn-warning + .dropdown-menu:after,
& > .btn-danger + .dropdown-menu:after,
& > .btn-info + .dropdown-menu:after{
top:0;
height: 42px;
}
& > .btn-primary + .dropdown-menu:after{
background-color: $color-primary;
}
& > .btn-success + .dropdown-menu:after{
background-color: $color-success;
}
& > .btn-complete + .dropdown-menu:after{
background-color: $color-complete;
}
& > .btn-warning + .dropdown-menu:after{
background-color: $color-warning;
}
& > .btn-danger + .dropdown-menu:after{
background-color: $color-danger;
}
& > .btn-info + .dropdown-menu:after{
background-color: $color-info;
}
}
&.dropup {
.btn.dropdown-toggle{
&.btn-lg{
& + .dropdown-menu{
margin-bottom: -47px;
padding-bottom: 49px;
&:after{
bottom: 49px;
}
}
}
&.btn-sm{
& + .dropdown-menu{
margin-bottom: -34px;
padding-bottom: 36px;
&:after{
bottom: 36px;
}
}
}
&.btn-xs{
& + .dropdown-menu{
margin-bottom: -29px;
padding-bottom: 31px;
&:after{
bottom: 31px;
}
}
}
}
.dropdown-menu{
margin-bottom: -40px;
padding: 0 3px 44px 0 !important;
transform-origin: center bottom 0;
&:after{
bottom: 43px;
top: auto !important;
}
}
}
.btn.dropdown-toggle{
text-align: left;
padding-right: $padding-base-horizontal + 10px;
&.btn-lg{
padding-right: $padding-lg-horizontal + 14px;
&:after{
right: 26px;
}
& + .dropdown-menu{
margin-top: -47px;
padding-top: 49px;
&:after{
top: 49px;
}
}
}
&.btn-sm{
padding-right: $padding-sm-horizontal + 10px;
&:after{
right: 16px;
}
& + .dropdown-menu{
margin-top: -34px;
padding-top: 36px;
&:after{
top: 36px;
}
}
}
&.btn-xs{
padding-right: $padding-xs-horizontal + 12px;
&:after{
right: 8px;
}
& + .dropdown-menu{
margin-top: -29px;
padding-top: 31px;
&:after{
top: 31px;
}
}
}
&:after{
position: absolute;
right: 15px;
top:50%;
margin-top: -2px;
}
}
.btn-rounded{
padding-left: 17px;
padding-right: 17px;
}
.btn-rounded + .dropdown-menu{
border-radius: 17px;
}
.dropdown-menu {
margin-top: -40px;
padding-top: 42px;
overflow: hidden;
backface-visibility: hidden;
display: block;
opacity: 0;
transform: scale(1, 0);
transform-origin: center top 0;
@include transition(all 170ms cubic-bezier(.05, .74, .27, .99) 0s);
z-index: -1;
&:after{
content: "";
position: absolute;
height: 1px;
left: 0;
top: 42px;
background: $color-master-light;
width: 100%;
}
.dropdown-item {
visibility: hidden;
}
}
}
.dropdown-toggle{
&:after{
position: absolute;
right: 15px;
top: 50%;
margin-top: -2px;
}
}
.dropdown-menu {
position: absolute;
display: none;
float: left;
list-style: none;
text-shadow: none;
@include box-shadow(0px 0px 5px fade-out($color-master, .8));
border: none;
border-radius: 3px;
font-size: 13px;
margin: 0;
background:$color-master-lightest;
min-width: 50px;
z-index: $zIndex-dropdown !important;
.divider {
background-color: $color-master-light;
height: 1px;
margin: 3px 0;
border-bottom: 0px;
}
& > .dropdown-item {
padding-left: 0px;
line-height: 35px;
color: $color-master;
padding: 0 20px;
border-radius: 3px;
display: block;
clear: both;
white-space: nowrap;
text-align:left;
&:hover, &:focus{
color: $color-master-darker;
text-decoration: none;
}
&:first-child{
padding-top: 9px;
}
&:last-child{
padding-bottom: 9px;
}
&.dropdown-header{
padding: 3px 20px;
}
&.active {
&,
&:hover,
&:focus{
color: $color-master-darker;
text-decoration: none;
background-color: $color-master-lighter;
}
}
&.disabled {
&,
&:hover,
&:focus{
color: lighten($color-master, 20%);
}
&:hover, &:focus{
text-decoration: none;
cursor: default;
}
}
}
}
.dropdown-backdrop{
z-index: $zIndex-dropdownMask;
}
/*
Animated buttons
--------------------------------------------------
*/
.btn-animated{
overflow: hidden;
@include backface-visibility(hidden);
@include transform-style(preserve-3d);
& > span {
display: inline-block;
width: 100%;
height: 100%;
@include backface-visibility(hidden);
@include transition(all 0.2s ease-in-out);
@include transform-style(preserve-3d);
}
&:before {
position: absolute;
height: 100%;
width: 100%;
font-size: 100%;
line-height: 2.5;
@include transition(all 0.2s ease-in-out);
}
&:after{
content: '';
position: absolute;
z-index: -1;
@include transition(all 0.2s ease-in-out);
}
&.from-top{
&:before{
left: 0;
top: -100%;
}
&:hover, &.show-icon{
&:before{
top: 0;
}
& > span{
@include translateY(300%);
}
}
}
&.from-left{
&:before{
left: -100%;
top: 0;
}
&:hover, &.show-icon{
&:before{
left: 0;
}
& > span{
@include translateX(200%);
}
}
}
&.fa{
&:before {
font-family: FontAwesome;
}
}
&.pg{
&:before {
font-family: "pages-icon";
}
}
}
/*
Tag buttons
--------------------------------------------------
*/
.btn-tag{
line-height: 17px;
border-radius: 17px 3px 3px 17px;
padding: 5px 19px;
&:hover, &.hover{
border-color:transparent;
}
&.btn-tag-light{
background: #fafdff;
color: #5b8ca5;
border:1px solid #cbe4f0;
&:hover{
background: #fff;
}
}
&.btn-tag-dark{
background: $color-master-light;
color:$color-master;
&:hover{
background: lighten($color-master-light, 2%);
}
}
&.btn-tag-rounded{
border-radius: 17px;
}
}
/*
Misc buttons
--------------------------------------------------
*/
.btn-toolbar .btn{
padding-left:14px;
padding-right: 14px;
}
.pager .disabled{
> button,
> button:hover,
> button:focus,
> span{
cursor: not-allowed;
opacity: .5;
}
}
.modal-content{
a.btn-primary:not([href]):not([tabindex]){
color: #fff;
&:hover, &:focus {
color: #fff;
}
}
}
Reference in New Issue View Git Blame Copy Permalink