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 transparent; &::before { padding-right: .5em; vertical-align: text-top; } } @mixin buttonPrimary { @include buttonStyle($blanc, $brand700); &:hover { background-color: darken($brandColor, 35%); box-shadow: 0px 3px 3px 0 rgba($noir, 0.2); } } @mixin buttonSecondary { @include buttonStyle ($brand700, $blanc); border-color: $brand700; &: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 { @include buttonStyle ($danger, $blanc); border-color: $danger; &: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 { @include buttonStyle (#31c29e, $blanc); border-color: #31c29e; &:hover { background-color: $blanc; color: darken(#31c29e, 15%); border-color: darken(#31c29e, 15%); } } // Classes générales .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() } // Classes spécifiques a.retour, a.raz_advs, a#telecharger_dossier_final { @include buttonSecondary; } .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() } }