← Back to branch summary

~canonical-sysadmins/wordpress/4.6

« back to all changes in this revision

Viewing changes to wp-admin/css/colors/_mixins.scss

  • Committer: Jacek Nykis
  • Date: 2015-01-05 16:17:05 UTC
  • Revision ID: jacek.nykis@canonical.com-20150105161705-w544l1h5mcg7u4w9
Initial commit

Show diffs side-by-side

added added

removed removed

Lines of Context:
wp-admin/css/colors/_mixins.scss
 
1
/*
 
2
 * Button mixin- creates 3d-ish button effect with correct
 
3
 * highlights/shadows, based on a base color.
 
4
 */
 
5
@mixin button( $button-color, $text-color: white ) {
 
6
        background: $button-color;
 
7
        border-color: darken( $button-color, 10% );
 
8
        color: $text-color;
 
9
        box-shadow: inset 0 1px 0 lighten( $button-color, 15% ), 0 1px 0 rgba(0,0,0,.15);
 
10
 
 
11
        &:hover,
 
12
        &:focus {
 
13
                background: darken( $button-color, 5% );
 
14
                border-color: darken( $button-color, 15% );
 
15
                color: $text-color;
 
16
                box-shadow: inset 0 1px 0 lighten( $button-color, 10% );
 
17
        }
 
18
 
 
19
        &:focus {
 
20
                box-shadow: inset 0 1px 0 lighten( $button-color, 10% ),
 
21
                            0 0 0 1px #5b9dd9,
 
22
                            0 0 2px 1px rgba( 30, 140, 190, .8 );
 
23
        }
 
24
 
 
25
        &:active {
 
26
                background: darken( $button-color, 10% );
 
27
                border-color: darken( $button-color, 15% );
 
28
                color: $text-color;
 
29
                box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ),
 
30
                            0 0 0 1px #5b9dd9,
 
31
                            0 0 2px 1px rgba( 30, 140, 190, .8 );
 
32
        }
 
33
 
 
34
        &[disabled],
 
35
        &:disabled,
 
36
        &.button-primary-disabled,
 
37
        &.disabled {
 
38
                color: hsl( hue( $button-color ), 10%, 80% ) !important;
 
39
                background: darken( $button-color, 8% ) !important;
 
40
                border-color: darken( $button-color, 15% ) !important;
 
41
                text-shadow: none !important;
 
42
        }
 
43
}