omii-ui
Version:
使用OMII开发的WebComponents库,样式采用bootstrap。可以作为标准的esmodule使用
7 lines (6 loc) • 11.1 kB
CSS
/*!
* Bootstrap v5.2.3 (https://getbootstrap.com/)
* Copyright 2011-2022 The Bootstrap Authors
* Copyright 2011-2022 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/.btn{--oi-btn-padding-x: .75rem;--oi-btn-padding-y: .375rem;--oi-btn-font-family: ;--oi-btn-font-size: 1rem;--oi-btn-font-weight: 400;--oi-btn-line-height: 1.5;--oi-btn-color: #212529;--oi-btn-bg: transparent;--oi-btn-border-width: 1px;--oi-btn-border-color: transparent;--oi-btn-border-radius: .375rem;--oi-btn-hover-border-color: transparent;--oi-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);--oi-btn-disabled-opacity: .65;--oi-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--oi-btn-focus-shadow-rgb), .5);display:inline-block;padding:var(--oi-btn-padding-y) var(--oi-btn-padding-x);font-family:var(--oi-btn-font-family);font-size:var(--oi-btn-font-size);font-weight:var(--oi-btn-font-weight);line-height:var(--oi-btn-line-height);color:var(--oi-btn-color);text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;user-select:none;border:var(--oi-btn-border-width) solid var(--oi-btn-border-color);border-radius:var(--oi-btn-border-radius);background-color:var(--oi-btn-bg);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion: reduce){.btn{transition:none}}.btn:hover{color:var(--oi-btn-hover-color);background-color:var(--oi-btn-hover-bg);border-color:var(--oi-btn-hover-border-color)}.btn-check+.btn:hover{color:var(--oi-btn-color);background-color:var(--oi-btn-bg);border-color:var(--oi-btn-border-color)}.btn:focus-visible{color:var(--oi-btn-hover-color);background-color:var(--oi-btn-hover-bg);border-color:var(--oi-btn-hover-border-color);outline:0;box-shadow:var(--oi-btn-focus-box-shadow)}.btn-check:focus-visible+.btn{border-color:var(--oi-btn-hover-border-color);outline:0;box-shadow:var(--oi-btn-focus-box-shadow)}.btn-check:checked+.btn,:not(.btn-check)+.btn:active,.btn:first-child:active,.btn.active,.btn.show{color:var(--oi-btn-active-color);background-color:var(--oi-btn-active-bg);border-color:var(--oi-btn-active-border-color)}.btn-check:checked+.btn:focus-visible,:not(.btn-check)+.btn:active:focus-visible,.btn:first-child:active:focus-visible,.btn.active:focus-visible,.btn.show:focus-visible{box-shadow:var(--oi-btn-focus-box-shadow)}.btn:disabled,.btn.disabled,fieldset:disabled .btn{color:var(--oi-btn-disabled-color);pointer-events:none;background-color:var(--oi-btn-disabled-bg);border-color:var(--oi-btn-disabled-border-color);opacity:var(--oi-btn-disabled-opacity)}.btn-primary{--oi-btn-color: #fff;--oi-btn-bg: #0d6efd;--oi-btn-border-color: #0d6efd;--oi-btn-hover-color: #fff;--oi-btn-hover-bg: #0b5ed7;--oi-btn-hover-border-color: #0a58ca;--oi-btn-focus-shadow-rgb: 49, 132, 253;--oi-btn-active-color: #fff;--oi-btn-active-bg: #0a58ca;--oi-btn-active-border-color: #0a53be;--oi-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);--oi-btn-disabled-color: #fff;--oi-btn-disabled-bg: #0d6efd;--oi-btn-disabled-border-color: #0d6efd}.btn-secondary{--oi-btn-color: #fff;--oi-btn-bg: #6c757d;--oi-btn-border-color: #6c757d;--oi-btn-hover-color: #fff;--oi-btn-hover-bg: #5c636a;--oi-btn-hover-border-color: #565e64;--oi-btn-focus-shadow-rgb: 130, 138, 145;--oi-btn-active-color: #fff;--oi-btn-active-bg: #565e64;--oi-btn-active-border-color: #51585e;--oi-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);--oi-btn-disabled-color: #fff;--oi-btn-disabled-bg: #6c757d;--oi-btn-disabled-border-color: #6c757d}.btn-success{--oi-btn-color: #fff;--oi-btn-bg: #198754;--oi-btn-border-color: #198754;--oi-btn-hover-color: #fff;--oi-btn-hover-bg: #157347;--oi-btn-hover-border-color: #146c43;--oi-btn-focus-shadow-rgb: 60, 153, 110;--oi-btn-active-color: #fff;--oi-btn-active-bg: #146c43;--oi-btn-active-border-color: #13653f;--oi-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);--oi-btn-disabled-color: #fff;--oi-btn-disabled-bg: #198754;--oi-btn-disabled-border-color: #198754}.btn-info{--oi-btn-color: #000;--oi-btn-bg: #0dcaf0;--oi-btn-border-color: #0dcaf0;--oi-btn-hover-color: #000;--oi-btn-hover-bg: #31d2f2;--oi-btn-hover-border-color: #25cff2;--oi-btn-focus-shadow-rgb: 11, 172, 204;--oi-btn-active-color: #000;--oi-btn-active-bg: #3dd5f3;--oi-btn-active-border-color: #25cff2;--oi-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);--oi-btn-disabled-color: #000;--oi-btn-disabled-bg: #0dcaf0;--oi-btn-disabled-border-color: #0dcaf0}.btn-warning{--oi-btn-color: #000;--oi-btn-bg: #ffc107;--oi-btn-border-color: #ffc107;--oi-btn-hover-color: #000;--oi-btn-hover-bg: #ffca2c;--oi-btn-hover-border-color: #ffc720;--oi-btn-focus-shadow-rgb: 217, 164, 6;--oi-btn-active-color: #000;--oi-btn-active-bg: #ffcd39;--oi-btn-active-border-color: #ffc720;--oi-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);--oi-btn-disabled-color: #000;--oi-btn-disabled-bg: #ffc107;--oi-btn-disabled-border-color: #ffc107}.btn-danger{--oi-btn-color: #fff;--oi-btn-bg: #dc3545;--oi-btn-border-color: #dc3545;--oi-btn-hover-color: #fff;--oi-btn-hover-bg: #bb2d3b;--oi-btn-hover-border-color: #b02a37;--oi-btn-focus-shadow-rgb: 225, 83, 97;--oi-btn-active-color: #fff;--oi-btn-active-bg: #b02a37;--oi-btn-active-border-color: #a52834;--oi-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);--oi-btn-disabled-color: #fff;--oi-btn-disabled-bg: #dc3545;--oi-btn-disabled-border-color: #dc3545}.btn-light{--oi-btn-color: #000;--oi-btn-bg: #f8f9fa;--oi-btn-border-color: #f8f9fa;--oi-btn-hover-color: #000;--oi-btn-hover-bg: #d3d4d5;--oi-btn-hover-border-color: #c6c7c8;--oi-btn-focus-shadow-rgb: 211, 212, 213;--oi-btn-active-color: #000;--oi-btn-active-bg: #c6c7c8;--oi-btn-active-border-color: #babbbc;--oi-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);--oi-btn-disabled-color: #000;--oi-btn-disabled-bg: #f8f9fa;--oi-btn-disabled-border-color: #f8f9fa}.btn-dark{--oi-btn-color: #fff;--oi-btn-bg: #212529;--oi-btn-border-color: #212529;--oi-btn-hover-color: #fff;--oi-btn-hover-bg: #424649;--oi-btn-hover-border-color: #373b3e;--oi-btn-focus-shadow-rgb: 66, 70, 73;--oi-btn-active-color: #fff;--oi-btn-active-bg: #4d5154;--oi-btn-active-border-color: #373b3e;--oi-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);--oi-btn-disabled-color: #fff;--oi-btn-disabled-bg: #212529;--oi-btn-disabled-border-color: #212529}.btn-outline-primary{--oi-btn-color: #0d6efd;--oi-btn-border-color: #0d6efd;--oi-btn-hover-color: #fff;--oi-btn-hover-bg: #0d6efd;--oi-btn-hover-border-color: #0d6efd;--oi-btn-focus-shadow-rgb: 13, 110, 253;--oi-btn-active-color: #fff;--oi-btn-active-bg: #0d6efd;--oi-btn-active-border-color: #0d6efd;--oi-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);--oi-btn-disabled-color: #0d6efd;--oi-btn-disabled-bg: transparent;--oi-btn-disabled-border-color: #0d6efd;--oi-gradient: none}.btn-outline-secondary{--oi-btn-color: #6c757d;--oi-btn-border-color: #6c757d;--oi-btn-hover-color: #fff;--oi-btn-hover-bg: #6c757d;--oi-btn-hover-border-color: #6c757d;--oi-btn-focus-shadow-rgb: 108, 117, 125;--oi-btn-active-color: #fff;--oi-btn-active-bg: #6c757d;--oi-btn-active-border-color: #6c757d;--oi-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);--oi-btn-disabled-color: #6c757d;--oi-btn-disabled-bg: transparent;--oi-btn-disabled-border-color: #6c757d;--oi-gradient: none}.btn-outline-success{--oi-btn-color: #198754;--oi-btn-border-color: #198754;--oi-btn-hover-color: #fff;--oi-btn-hover-bg: #198754;--oi-btn-hover-border-color: #198754;--oi-btn-focus-shadow-rgb: 25, 135, 84;--oi-btn-active-color: #fff;--oi-btn-active-bg: #198754;--oi-btn-active-border-color: #198754;--oi-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);--oi-btn-disabled-color: #198754;--oi-btn-disabled-bg: transparent;--oi-btn-disabled-border-color: #198754;--oi-gradient: none}.btn-outline-info{--oi-btn-color: #0dcaf0;--oi-btn-border-color: #0dcaf0;--oi-btn-hover-color: #000;--oi-btn-hover-bg: #0dcaf0;--oi-btn-hover-border-color: #0dcaf0;--oi-btn-focus-shadow-rgb: 13, 202, 240;--oi-btn-active-color: #000;--oi-btn-active-bg: #0dcaf0;--oi-btn-active-border-color: #0dcaf0;--oi-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);--oi-btn-disabled-color: #0dcaf0;--oi-btn-disabled-bg: transparent;--oi-btn-disabled-border-color: #0dcaf0;--oi-gradient: none}.btn-outline-warning{--oi-btn-color: #ffc107;--oi-btn-border-color: #ffc107;--oi-btn-hover-color: #000;--oi-btn-hover-bg: #ffc107;--oi-btn-hover-border-color: #ffc107;--oi-btn-focus-shadow-rgb: 255, 193, 7;--oi-btn-active-color: #000;--oi-btn-active-bg: #ffc107;--oi-btn-active-border-color: #ffc107;--oi-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);--oi-btn-disabled-color: #ffc107;--oi-btn-disabled-bg: transparent;--oi-btn-disabled-border-color: #ffc107;--oi-gradient: none}.btn-outline-danger{--oi-btn-color: #dc3545;--oi-btn-border-color: #dc3545;--oi-btn-hover-color: #fff;--oi-btn-hover-bg: #dc3545;--oi-btn-hover-border-color: #dc3545;--oi-btn-focus-shadow-rgb: 220, 53, 69;--oi-btn-active-color: #fff;--oi-btn-active-bg: #dc3545;--oi-btn-active-border-color: #dc3545;--oi-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);--oi-btn-disabled-color: #dc3545;--oi-btn-disabled-bg: transparent;--oi-btn-disabled-border-color: #dc3545;--oi-gradient: none}.btn-outline-light{--oi-btn-color: #f8f9fa;--oi-btn-border-color: #f8f9fa;--oi-btn-hover-color: #000;--oi-btn-hover-bg: #f8f9fa;--oi-btn-hover-border-color: #f8f9fa;--oi-btn-focus-shadow-rgb: 248, 249, 250;--oi-btn-active-color: #000;--oi-btn-active-bg: #f8f9fa;--oi-btn-active-border-color: #f8f9fa;--oi-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);--oi-btn-disabled-color: #f8f9fa;--oi-btn-disabled-bg: transparent;--oi-btn-disabled-border-color: #f8f9fa;--oi-gradient: none}.btn-outline-dark{--oi-btn-color: #212529;--oi-btn-border-color: #212529;--oi-btn-hover-color: #fff;--oi-btn-hover-bg: #212529;--oi-btn-hover-border-color: #212529;--oi-btn-focus-shadow-rgb: 33, 37, 41;--oi-btn-active-color: #fff;--oi-btn-active-bg: #212529;--oi-btn-active-border-color: #212529;--oi-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);--oi-btn-disabled-color: #212529;--oi-btn-disabled-bg: transparent;--oi-btn-disabled-border-color: #212529;--oi-gradient: none}.btn-link{--oi-btn-font-weight: 400;--oi-btn-color: var(--oi-link-color);--oi-btn-bg: transparent;--oi-btn-border-color: transparent;--oi-btn-hover-color: var(--oi-link-hover-color);--oi-btn-hover-border-color: transparent;--oi-btn-active-color: var(--oi-link-hover-color);--oi-btn-active-border-color: transparent;--oi-btn-disabled-color: #6c757d;--oi-btn-disabled-border-color: transparent;--oi-btn-box-shadow: none;--oi-btn-focus-shadow-rgb: 49, 132, 253;text-decoration:underline}.btn-link:focus-visible{color:var(--oi-btn-color)}.btn-link:hover{color:var(--oi-btn-hover-color)}.btn-lg{--oi-btn-padding-y: .5rem;--oi-btn-padding-x: 1rem;--oi-btn-font-size: 1.25rem;--oi-btn-border-radius: .5rem}.btn-sm{--oi-btn-padding-y: .25rem;--oi-btn-padding-x: .5rem;--oi-btn-font-size: .875rem;--oi-btn-border-radius: .25rem}