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 
}