Proyectos de Subversion Moodle

Rev

Rev 1 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 1 Rev 1441
Línea -... Línea 1...
-
 
1
/**
-
 
2
 * File buttons.scss.
-
 
3
 * Contains styles for buttons.
-
 
4
 */
-
 
5
 
1
.singlebutton {
6
.singlebutton {
2
    display: inline-block;
7
    display: inline-block;
Línea 3... Línea 8...
3
 
8
 
4
    + .singlebutton {
9
    + .singlebutton {
Línea 36... Línea 41...
36
 
41
 
37
.btn-lineup {
42
.btn-lineup {
38
    margin: 0 0 10px 5px;
43
    margin: 0 0 10px 5px;
Línea 39... Línea -...
39
}
-
 
40
 
44
}
41
.btn.btn-icon {
-
 
42
    height: ($icon-width + 20px);
-
 
43
    width: ($icon-width + 20px);
-
 
44
    font-size: $icon-width;
-
 
45
    line-height: $icon-width;
-
 
46
    padding: 0;
-
 
47
    border-radius: 50%;
-
 
48
    flex-shrink: 0;
45
 
49
 
46
/* Small buttons should have the same border-radius as the normal buttons. */
50
    &:hover,
47
.btn-sm,
51
    &:focus {
-
 
52
        background-color: $gray-200;
-
 
53
    }
-
 
54
 
-
 
55
    @each $size, $length in $iconsizes {
-
 
56
        &.icon-size-#{$size} {
-
 
57
            height: ($length + 20px) !important; /* stylelint-disable-line declaration-no-important */
-
 
58
            width: ($length + 20px) !important; /* stylelint-disable-line declaration-no-important */
-
 
59
            font-size: $length !important; /* stylelint-disable-line declaration-no-important */
-
 
60
            line-height: $length !important; /* stylelint-disable-line declaration-no-important */
-
 
61
        }
48
.btn-group-sm > .btn {
Línea 62... Línea -...
62
    }
-
 
63
}
-
 
64
 
-
 
65
// Specific styles for the collapse/expand buttons.
-
 
66
.btn.btn-icon.icons-collapse-expand {
49
    --bs-btn-border-radius: var(--#{$prefix}border-radius);
67
    color: $primary;
50
}
68
    background-color: $primary-light-background;
51
 
69
    &:hover {
-
 
Línea 70... Línea 52...
70
        outline: 2px solid $primary;
52
/**
71
    }
53
 * Focus styles to improve Bootstrap default contrast.
72
}
54
 */
73
 
55
 
74
@mixin button-focus($background, $innershadow) {
56
@mixin button-focus($background, $innershadow) {
75
    &:focus,
57
    &:focus-visible,
76
    &.focus {
58
    &.focus {
Línea -... Línea 59...
-
 
59
        outline: $btn-focus-width solid darken($background, 40%);
-
 
60
        box-shadow: inset 0 0 0 2px $innershadow;
-
 
61
    }
-
 
62
}
77
        outline: $btn-focus-width solid darken($background, 40%);
63
 
78
        box-shadow: inset 0 0 0 2px $innershadow;
64
.btn {
79
    }
65
    @include button-focus($secondary, $white);
80
}
66
}
81
 
67
 
Línea 88... Línea 74...
88
@each $color, $value in $theme-colors {
74
@each $color, $value in $theme-colors {
89
    .btn-outline-#{$color} {
75
    .btn-outline-#{$color} {
90
        @include button-focus($value, $gray-800);
76
        @include button-focus($value, $gray-800);
91
    }
77
    }
92
}
78
}
-
 
79
 
-
 
80
/**
-
 
81
 * Icon buttons.
-
 
82
 */
-
 
83
 
-
 
84
.btn-icon {
-
 
85
    --#{$prefix}btn-hover-bg: var(--#{$prefix}secondary-bg);
-
 
86
    --#{$prefix}btn-border-radius: #{$btn-icon-border-radius};
-
 
87
    --#{$prefix}btn-padding-x: 0;
-
 
88
    --#{$prefix}btn-padding-y: 0;
-
 
89
    --#{$prefix}btn-font-size: #{$icon-height};
-
 
90
    height: calc(#{$icon-height} + 1rem);
-
 
91
    width: calc(#{$icon-height} + 1rem);
-
 
92
    display: inline-flex;
-
 
93
    align-items: center;
-
 
94
    justify-content: center;
-
 
95
    @include button-focus($secondary, $white);
-
 
96
    .icon {
-
 
97
        margin: 0;
-
 
98
    }
-
 
99
    @each $size, $length in $iconsizes {
-
 
100
        &.icon-size-#{$size} {
-
 
101
            height: calc(#{$length} + 1rem);
-
 
102
            width: calc(#{$length} + 1rem);
-
 
103
            --#{$prefix}btn-font-size: #{$length};
-
 
104
            --#{$prefix}btn-line-height: #{$length};
-
 
105
        }
-
 
106
    }
-
 
107
}
-
 
108
 
-
 
109
/* Specific styles for the collapse/expand buttons. */
-
 
110
.btn-icon.icons-collapse-expand {
-
 
111
    color: $primary;
-
 
112
    background-color: $primary-light-background;
-
 
113
    &:hover {
-
 
114
        outline: 2px solid $primary;
-
 
115
    }
-
 
116
    @include button-focus($primary-bg-subtle, $white);
-
 
117
}
-
 
118
 
-
 
119
/**
-
 
120
 * Subtle buttons.
-
 
121
 */
-
 
122
 
-
 
123
@each $color, $value in $theme-colors {
-
 
124
    .btn-subtle-#{$color} {
-
 
125
        --#{$prefix}btn-font-weight: #{$font-weight-bold};
-
 
126
        --#{$prefix}btn-color: var(--#{$prefix}#{$color}-text-emphasis);
-
 
127
        --#{$prefix}btn-bg: var(--#{$prefix}#{$color}-bg-subtle);
-
 
128
        --#{$prefix}btn-active-color: var(--#{$prefix}#{$color}-text-emphasis);
-
 
129
        --#{$prefix}btn-active-bg: var(--#{$prefix}#{$color}-bg-subtle);
-
 
130
        --#{$prefix}btn-hover-color: #{color-contrast($value)};
-
 
131
        --#{$prefix}btn-hover-bg: var(--#{$prefix}#{$color});
-
 
132
        --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($value)};
-
 
133
        @include button-focus($value, $white);
-
 
134
    }
-
 
135
}
-
 
136
.btn-subtle-body {
-
 
137
    --#{$prefix}btn-font-weight: #{$font-weight-bold};
-
 
138
    --#{$prefix}btn-color: var(--#{$prefix}body-color);
-
 
139
    --#{$prefix}btn-bg: transparent;
-
 
140
    --#{$prefix}btn-border-color: var(--#{$prefix}border-color);
-
 
141
    --#{$prefix}btn-hover-color: #{color-contrast($gray-600)};
-
 
142
    --#{$prefix}btn-hover-bg: var(--#{$prefix}gray-600);
-
 
143
    --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($gray-600)};
-
 
144
    @include button-focus($gray-600, $white);
-
 
145
}