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

2021-05-20  本文已影响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;
  }
}
上一篇下一篇

猜你喜欢

热点阅读