button, input[type="submit"], a[class*="button"] { cursor:pointer; } // Mixins @mixin buttonStyle($color, $bgColor) { font-weight: 700; display: inline-block; text-transform: uppercase; font-family: $interFont; font-size: 1em; text-decoration: none; transition: all 0.1s; border-radius: 4px; padding: .5rem; background: $bgColor; color: $color; border: solid 1px; border-color: unset; &::before { padding-right: .5em; vertical-align: text-top; } } .om-button, a.om-button { @include buttonStyle($blanc, $brandColor); } @mixin buttonPrimary { @include buttonStyle($blanc, $brand700); &:hover { background-color: darken($brandColor, 35%); box-shadow: 0px 3px 3px 0 rgba($noir, 0.2); } } @mixin buttonSecondary { border-color: $brand700; @include buttonStyle ($brand700, $blanc); &:hover { background-color: $blanc; color: $brandColor; border-color: $brandColor; } } @mixin buttonDanger { @include buttonStyle($blanc, $danger); &:hover { background-color: darken($danger, 15%); box-shadow: 0px 3px 3px 0 rgba($noir, 0.2); } } @mixin buttonDangerSecondary { border-color: $danger; @include buttonStyle ($danger, $blanc); &:hover { background-color: $blanc; color: darken($danger, 15%); border-color: darken($danger, 15%); } } @mixin buttonSuccess { @include buttonStyle($blanc, #31c29e); &:hover { background-color: darken(#31c29e, 15%); box-shadow: 0px 3px 3px 0 rgba($noir, 0.2); } } @mixin buttonSuccessSecondary { border-color: #31c29e; @include buttonStyle (#31c29e, $blanc); &:hover { background-color: $blanc; color: darken(#31c29e, 15%); border-color: darken(#31c29e, 15%); } } // Classes générales a.button-primary, button.button-primary, .button-primary { @include buttonPrimary() } a.button-secondary , button.button-secondary , .button-secondary { @include buttonSecondary() } a.button-danger, button.button-danger, .button-danger { @include buttonDanger() } a.button-danger-secondary, button.button-danger-secondary, .button-danger-secondary { @include buttonDangerSecondary() } a.button-success, button.button-success, .button-success { @include buttonSuccess() } a.button-success-secondary, button.button-success-secondary, .button-success-secondary { @include buttonSuccessSecondary() } // Classes spécifiques a.retour, a.raz_advs, a#telecharger_dossier_final { @include buttonSecondary; } p.linkjsclosewindow.ui-button { display: inline-block !important; } a.linkjsclosewindow { color: $blanc; } .ui-button:not(.ui-datepicker-trigger):not(.httpclickbutton), .formControls input.ui-button { @include buttonPrimary(); &:not([id*="search"]){ display: block; padding: 0.5em 1em; font-size: 1.1em; } &[id*="search"] { @include newIcon("\F0D1"); &:before { font-size: 1rem; } span { display: inline-block; padding-left: 0.5em; } } &.button-primary { @include buttonPrimary(); } &.button-secondary { @include buttonSecondary(); } &.button-danger { @include buttonDanger(); } &.button-danger-secondary { @include buttonDangerSecondary(); } &.button-success { @include buttonSuccess() } &.button-success-secondary { @include buttonSuccessSecondary() } }