1a88f7529SYoshie Muranaka.btn { 2a88f7529SYoshie Muranaka padding-top: $spacer / 2; 3a88f7529SYoshie Muranaka padding-right: $spacer; 4a88f7529SYoshie Muranaka padding-bottom: $spacer / 2; 5a88f7529SYoshie Muranaka padding-left: $spacer; 630f11f81SDixsie Wolmers display: inline-flex; 730f11f81SDixsie Wolmers align-items: center; 830f11f81SDixsie Wolmers justify-content: space-around; 930f11f81SDixsie Wolmers svg { 1030f11f81SDixsie Wolmers margin-right: $spacer / 4; 11a88f7529SYoshie Muranaka } 12dc618a8dSSurenNeware &:disabled { 13dc618a8dSSurenNeware color: gray("600"); 14dc618a8dSSurenNeware fill: currentColor; 15dc618a8dSSurenNeware box-shadow: none !important; 16dc618a8dSSurenNeware &:not(.btn-link) { 17dc618a8dSSurenNeware border-color: gray("400"); 18dc618a8dSSurenNeware background-color: gray("400"); 19dc618a8dSSurenNeware } 20dc618a8dSSurenNeware } 21a88f7529SYoshie Muranaka} 22a88f7529SYoshie Muranaka 23a88f7529SYoshie Muranaka.btn-primary { 24a88f7529SYoshie Muranaka fill: currentColor; 25dc618a8dSSurenNeware &:focus, 26dc618a8dSSurenNeware &:not(:disabled):not(.disabled):active:focus { 27dc618a8dSSurenNeware border-color: $white; 28dc618a8dSSurenNeware box-shadow: inset 0 0 0 3px theme-color('primary'), inset 0 0 0 5px $white; 29dc618a8dSSurenNeware } 30a88f7529SYoshie Muranaka} 31a88f7529SYoshie Muranaka 32a88f7529SYoshie Muranaka.btn-secondary { 33a88f7529SYoshie Muranaka fill: currentColor; 34dc618a8dSSurenNeware &:focus, 35dc618a8dSSurenNeware &:not(:disabled):not(.disabled):active:focus { 36dc618a8dSSurenNeware border-color: $white; 37dc618a8dSSurenNeware box-shadow: inset 0 0 0 3px theme-color('secondary'), inset 0 0 0 5px $white; 38dc618a8dSSurenNeware } 39a88f7529SYoshie Muranaka} 40a88f7529SYoshie Muranaka 41dc618a8dSSurenNeware// Global style for all button link 42a88f7529SYoshie Muranaka.btn-link { 43dc618a8dSSurenNeware font-weight: $headings-font-weight; 4401da8187SYoshie Muranaka fill: theme-color("primary"); 45a88f7529SYoshie Muranaka text-decoration: none !important; 46dc618a8dSSurenNeware &:hover { 47dc618a8dSSurenNeware background-color: gray("200"); 48dc618a8dSSurenNeware color: theme-color("primary"); 49dc618a8dSSurenNeware } 50dc618a8dSSurenNeware &:active { 51dc618a8dSSurenNeware background-color: gray("300"); 52dc618a8dSSurenNeware } 53a88f7529SYoshie Muranaka &:focus { 54dc618a8dSSurenNeware box-shadow: inset 0 0 0 2px theme-color("primary"); 55dc618a8dSSurenNeware color: theme-color("primary"); 56dc618a8dSSurenNeware outline: none; 57dc618a8dSSurenNeware } 58dc618a8dSSurenNeware &:disabled { 59a88f7529SYoshie Muranaka box-shadow: $btn-focus-box-shadow; 60a88f7529SYoshie Muranaka } 61a88f7529SYoshie Muranaka} 62a88f7529SYoshie Muranaka 6330f11f81SDixsie Wolmers// Icon only buttons 6430f11f81SDixsie Wolmers.btn-icon-only svg { 6530f11f81SDixsie Wolmers margin-right: 0; 6630f11f81SDixsie Wolmers} 6730f11f81SDixsie Wolmers 6830f11f81SDixsie Wolmers// Datepicker, clear search and Password toggle buttons 6930f11f81SDixsie Wolmers.input-action-btn, 7030f11f81SDixsie Wolmers.btn-datepicker { 71dc618a8dSSurenNeware position: absolute; 72dc618a8dSSurenNeware right: 0; 7330f11f81SDixsie Wolmers top: 0; 74*9fc88d6cSDerick Montague z-index: $zindex-dropdown + 1; 75a88f7529SYoshie Muranaka} 7630f11f81SDixsie Wolmers 7730f11f81SDixsie Wolmers// Contain input buttons within input 7830f11f81SDixsie Wolmers.btn-datepicker .dropdown-toggle, 7930f11f81SDixsie Wolmers.input-action-btn { 8030f11f81SDixsie Wolmers padding: 7px; 8130f11f81SDixsie Wolmers margin: 1px; 82a88f7529SYoshie Muranaka}