美文网首页
bootstrap5 按需引入, 个性化定制去除focus时的边

bootstrap5 按需引入, 个性化定制去除focus时的边

作者: 码农梦醒 | 来源:发表于2021-05-20 17:06 被阅读0次
    // 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
    @import "~bootstrap/scss/functions";
    
    // 2. Include any default variable overrides here
    // 去除输入框的 box-shadow(详见: bootstrap/scss/_form-control.scss#L43)
    $input-focus-box-shadow: none;
    // 去除选择框的 box-shadow(详见: bootstrap/scss/_form-select.scss#L32)
    $form-select-focus-box-shadow: none;
    // 去除选择框的 box-shadow(详见: bootstrap/scss/_form-check.scss#L47)
    $form-check-input-focus-box-shadow: none;
    // 去除按钮的 box-shadow(详见: bootstrap/scss/_buttons#L30) [此方式对按钮无效]
    $btn-box-shadow: none;
    $btn-focus-box-shadow: none;
    $btn-active-box-shadow: none;
    
    // 3. Include remainder of required Bootstrap stylesheets
    @import "~bootstrap/scss/variables";
    @import "~bootstrap/scss/mixins";
    
    // 4. Include any optional Bootstrap components as you like
    @import "~bootstrap/scss/root";
    @import "~bootstrap/scss/reboot";
    @import "~bootstrap/scss/type";
    @import "~bootstrap/scss/images";
    @import "~bootstrap/scss/containers";
    @import "~bootstrap/scss/grid";
    @import "~bootstrap/scss/forms";
    @import "~bootstrap/scss/buttons";
    
    // 去除按钮的 box-shadow [此方式对按钮有效]
    @each $color, $value in $theme-colors {
      .btn-#{$color}:focus {
        box-shadow: $btn-focus-box-shadow;
      }
      .btn-#{$color}:active:focus {
        box-shadow: $btn-focus-box-shadow;
      }
      .btn-#{$color}.active:focus {
        box-shadow: $btn-focus-box-shadow;
      }
      .btn-outline-#{$color}:focus {
        box-shadow: $btn-focus-box-shadow;
      }
      .btn-outline-#{$color}:active:focus {
        box-shadow: $btn-focus-box-shadow;
      }
      .btn-outline-#{$color}.active:focus {
        box-shadow: $btn-focus-box-shadow;
      }
      .btn-check:checked + .btn-outline-#{$color}.active:focus {
        box-shadow: $btn-focus-box-shadow;
      }
      .btn-check:checked + .btn-outline-#{$color}:active:focus {
        box-shadow: $btn-focus-box-shadow;
      }
      .btn-check:checked + .btn-outline-#{$color}:focus {
        box-shadow: $btn-focus-box-shadow;
      }
      .btn-check:focus + .btn-outline-#{$color}{
        box-shadow: $btn-focus-box-shadow;
      }
      .btn-check:active + .btn-outline-#{$color}{
        box-shadow: $btn-focus-box-shadow;
      }
    }
    

    相关文章

      网友评论

          本文标题:bootstrap5 按需引入, 个性化定制去除focus时的边

          本文链接:https://www.haomeiwen.com/subject/jorbjltx.html