Proyectos de Subversion Moodle

Rev

Rev 1 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1441 ariadna 1 
/**
2 
 * File buttons.scss.
3 
 * Contains styles for buttons.
4 
 */
5 
 
1 efrain 6 
.singlebutton {
7 
    display: inline-block;
8 
 
9 
    + .singlebutton {
10 
        margin-left: $spacer * 0.5;
11 
    }
12 
}
13 
 
14 
.continuebutton {
15 
    text-align: center;
16 
}
17 
 
18 
p.arrow_button {
19 
    margin-top: 5em;
20 
    text-align: center;
21 
}
22 
 
23 
#addcontrols {
24 
    // This is displayed in a column between 2 20 row multi-selects. This should be just short of half way.
25 
    margin-top: 8 * $line-height-base * $font-size-base;
26 
    text-align: center;
27 
    margin-bottom: 3em;
28 
 
29 
    label {
30 
        display: inline;
31 
    }
32 
}
33 
 
34 
#addcontrols,
35 
#removecontrols {
36 
    input {
37 
        width: 100%;
38 
        margin: auto;
39 
    }
40 
}
41 
 
42 
.btn-lineup {
43 
    margin: 0 0 10px 5px;
44 
}
45 
 
1441 ariadna 46 
/* Small buttons should have the same border-radius as the normal buttons. */
47 
.btn-sm,
48 
.btn-group-sm > .btn {
49 
    --bs-btn-border-radius: var(--#{$prefix}border-radius);
50 
}
1 efrain 51 
 
1441 ariadna 52 
/**
53 
 * Focus styles to improve Bootstrap default contrast.
54 
 */
55 
 
56 
@mixin button-focus($background, $innershadow) {
57 
    &:focus-visible,
58 
    &.focus {
59 
        outline: $btn-focus-width solid darken($background, 40%);
60 
        box-shadow: inset 0 0 0 2px $innershadow;
1 efrain 61 
    }
1441 ariadna 62 
}
1 efrain 63 
 
1441 ariadna 64 
.btn {
65 
    @include button-focus($secondary, $white);
66 
}
67 
 
68 
@each $color, $value in $theme-colors {
69 
    .btn-#{$color} {
70 
        @include button-focus($value, $white);
71 
    }
72 
}
73 
 
74 
@each $color, $value in $theme-colors {
75 
    .btn-outline-#{$color} {
76 
        @include button-focus($value, $gray-800);
77 
    }
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 
    }
1 efrain 99 
    @each $size, $length in $iconsizes {
100 
        &.icon-size-#{$size} {
1441 ariadna 101 
            height: calc(#{$length} + 1rem);
102 
            width: calc(#{$length} + 1rem);
103 
            --#{$prefix}btn-font-size: #{$length};
104 
            --#{$prefix}btn-line-height: #{$length};
1 efrain 105 
        }
106 
    }
107 
}
108 
 
1441 ariadna 109 
/* Specific styles for the collapse/expand buttons. */
110 
.btn-icon.icons-collapse-expand {
1 efrain 111 
    color: $primary;
112 
    background-color: $primary-light-background;
113 
    &:hover {
114 
        outline: 2px solid $primary;
115 
    }
1441 ariadna 116 
    @include button-focus($primary-bg-subtle, $white);
1 efrain 117 
}
118 
 
1441 ariadna 119 
/**
120 
 * Subtle buttons.
121 
 */
1 efrain 122 
 
123 
@each $color, $value in $theme-colors {
1441 ariadna 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)};
1 efrain 133 
        @include button-focus($value, $white);
134 
    }
135 
}
1441 ariadna 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);
1 efrain 145 
}