phares3757/oi-metrology
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Static Site

Browse Source
This commit is contained in:
Mike Phares
2024-06-14 16:51:30 -07:00
parent 3aed250488
commit 6737ddfb59
1706 changed files with 628 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
Static/package/dist/collection/components/button/button.css vendored Normal file
View File

@ -0,0 +1,252 @@
:root {
--ifx-font-family: "Source Sans 3";
font-family: var(--ifx-font-family, sans-serif);
}
:host {
vertical-align: bottom;
display: inline-flex;
width: var(--bw, fit-content);
}
.btn {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 0px 16px;
gap: 8px;
color: #FFFFFF;
font-weight: 600;
border-radius: 1px;
line-height: 1.5rem;
font-family: var(--ifx-font-family);
font-style: normal;
text-decoration: none;
user-select: none;
font-size: 1rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
width: var(--bw, fit-content);
}
.btn:not(.disabled) {
cursor: pointer;
}
.btn.disabled {
pointer-events: none;
}
.btn-default {
color: #FFFFFF;
background-color: #0A8276;
}
.btn-default:disabled, .btn-default.disabled {
background-color: #BFBBBB;
color: #FFFFFF;
pointer-events: none;
}
.btn-secondary-default {
background-color: #FFFFFF;
color: #0A8276;
border: 1px solid #0A8276;
}
.btn-secondary-default:disabled, .btn-secondary-default.disabled {
background-color: #FFFFFF;
border: 1px solid #BFBBBB;
color: #BFBBBB;
pointer-events: none;
}
.btn-tertiary-default {
background-color: transparent;
color: #0A8276;
}
.btn-tertiary-default:disabled, .btn-tertiary-default.disabled {
color: #BFBBBB;
pointer-events: none;
}
.btn-danger {
color: #FFFFFF;
background-color: #CD002F;
border-color: #CD002F;
}
.btn-danger:disabled, .btn-danger.disabled {
background-color: #BFBBBB;
color: #FFFFFF;
pointer-events: none;
}
.btn-secondary-danger {
background-color: #FFFFFF;
color: #CD002F;
border: 1px solid #CD002F;
}
.btn-secondary-danger:disabled, .btn-secondary-danger.disabled {
background-color: #FFFFFF;
border: 1px solid #BFBBBB;
color: #BFBBBB;
pointer-events: none;
}
.btn-tertiary-danger {
background-color: transparent;
color: #CD002F;
}
.btn-tertiary-danger:disabled, .btn-tertiary-danger.disabled {
background-color: #FFFFFF;
color: #BFBBBB;
pointer-events: none;
}
.btn-inverse {
color: #0A8276;
background-color: #FFFFFF;
}
.btn-inverse:disabled, .btn-inverse.disabled {
opacity: 1;
background-color: #FFFFFF;
color: #0A8276;
pointer-events: none;
}
.btn-secondary-inverse {
color: #FFFFFF;
border: 1px solid #FFFFFF;
}
.btn-secondary-inverse:disabled, .btn-secondary-inverse.disabled {
border: 1px solid #FFFFFF;
color: #FFFFFF;
pointer-events: none;
}
.btn-tertiary-inverse {
color: #FFFFFF;
}
.btn-tertiary-inverse:disabled, .btn-tertiary-inverse.disabled {
color: #FFFFFF;
opacity: 1;
pointer-events: none;
}
.btn ifx-icon:empty {
display: none;
}
.btn.btn-xs {
font-size: 0.875rem;
height: 32px;
line-height: 1rem;
}
.btn.btn-s {
font-size: 0.875rem;
height: 36px;
line-height: 1.25rem;
}
.btn.btn-l {
font-size: 1.25rem;
height: 48px;
line-height: 1.75rem;
}
.btn.btn-default:not(:disabled, .disabled):focus:not(:active, .active) {
outline: none;
box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276;
}
.btn.btn-default:not(:disabled, .disabled):hover {
background-color: #08665C;
}
.btn.btn-default:not(:disabled, .disabled):active, .btn.btn-default:not(:disabled, .disabled).active {
background-color: #06534B;
}
.btn.btn-secondary-default:not(:disabled, .disabled):focus:not(:active, .active) {
outline: none;
box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276;
}
.btn.btn-secondary-default:not(:disabled, .disabled):hover {
color: #FFFFFF;
background-color: #08665C;
}
.btn.btn-secondary-default:not(:disabled, .disabled):active, .btn.btn-secondary-default:not(:disabled, .disabled).active {
background-color: #06534B;
}
.btn.btn-secondary:not(:disabled, .disabled):hover {
background-color: #9C216E;
}
.btn.btn-secondary:not(:disabled, .disabled):active, .btn.btn-secondary:not(:disabled, .disabled).active {
background-color: #9C216E;
}
.btn.btn-danger:not(:disabled, .disabled):focus:not(:active, .active) {
outline: none;
box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276;
}
.btn.btn-danger:not(:disabled, .disabled):hover {
background-color: #A2001E;
}
.btn.btn-danger:not(:disabled, .disabled):active, .btn.btn-danger:not(:disabled, .disabled).active {
background-color: #900021;
}
.btn.btn-secondary-danger:not(:disabled, .disabled):focus:not(:active, .active) {
outline: none;
box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276;
}
.btn.btn-secondary-danger:not(:disabled, .disabled):hover {
color: #FFFFFF;
background-color: #A2001E;
}
.btn.btn-secondary-danger:not(:disabled, .disabled):active, .btn.btn-secondary-danger:not(:disabled, .disabled).active {
background-color: #900021;
}
.btn.btn-inverse:not(:disabled, .disabled):focus:not(:active, .active) {
outline: none;
box-shadow: 0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF;
}
.btn.btn-inverse:not(:disabled, .disabled):hover {
background-color: #EEEDED;
}
.btn.btn-inverse:not(:disabled, .disabled):active, .btn.btn-inverse:not(:disabled, .disabled).active {
background-color: #BFBBBB;
}
.btn.btn-secondary-inverse:not(:disabled, .disabled):focus:not(:active, .active) {
outline: none;
box-shadow: 0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF;
}
.btn.btn-secondary-inverse:not(:disabled, .disabled):hover {
color: #0A8276;
background-color: #EEEDED;
}
.btn.btn-secondary-inverse:not(:disabled, .disabled):active, .btn.btn-secondary-inverse:not(:disabled, .disabled).active {
color: #0A8276;
background-color: #BFBBBB;
}
.btn.btn-tertiary-default:not(:disabled, .disabled):focus:not(:active, .active) {
outline: none;
box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #08665C;
}
.btn.btn-tertiary-default:not(:disabled, .disabled):hover {
color: #08665C;
}
.btn.btn-tertiary-default:not(:disabled, .disabled):active, .btn.btn-tertiary-default:not(:disabled, .disabled).active {
color: #06534B;
}
.btn.btn-tertiary-danger:not(:disabled, .disabled):focus:not(:active, .active) {
outline: none;
box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #A2001E;
}
.btn.btn-tertiary-danger:not(:disabled, .disabled):hover {
color: #A2001E;
}
.btn.btn-tertiary-danger:not(:disabled, .disabled):active, .btn.btn-tertiary-danger:not(:disabled, .disabled).active {
color: #900021;
}
.btn.btn-tertiary-inverse:not(:disabled, .disabled):focus:not(:active, .active) {
outline: none;
box-shadow: 0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF;
}
.btn.btn-tertiary-inverse:not(:disabled, .disabled):hover {
color: #EEEDED;
}
.btn.btn-tertiary-inverse:not(:disabled, .disabled):active, .btn.btn-tertiary-inverse:not(:disabled, .disabled).active {
color: #BFBBBB;
}