diff options
Diffstat (limited to 'css3/framework/elements.css')
-rw-r--r-- | css3/framework/elements.css | 962 |
1 files changed, 962 insertions, 0 deletions
diff --git a/css3/framework/elements.css b/css3/framework/elements.css new file mode 100644 index 00000000..6cefa7ed --- /dev/null +++ b/css3/framework/elements.css @@ -0,0 +1,962 @@ +.form-control { + display: block; + width: 100%; + padding: 4px 7px; + font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; + font-size: 14px; + line-height: 1.5; + color: #495057; + background-color: #fff; + background-image: none; + background-clip: padding-box; + border: 1px solid #cecece; + border-radius: 4px; + box-shadow: + 0 0 0 2px rgba(0, 123, 255, 0), + 0 1px 0 0 rgba(0, 0, 0, 0.05); + transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; +} + +select.form-control { + background-image: linear-gradient(#ffffff, #fbfbfb); + border-radius: 4px; + padding: 4px; + height: 31px; + box-shadow: + 0 0 0 2px rgba(0, 123, 255, 0), + 0 1px 2px 0 rgba(0, 0, 0, 0.05); +} + +select.form-control:hover { + background-image: linear-gradient(#fbfbfb, #f5f5f5); +} + +.form-control--compact { + padding: 2px 5px; +} + +select.form-control--compact { + padding: 2px; + height: 26px; +} + +.form-control--stealth { + border: 1px solid transparent; + box-shadow: + 0 0 0 2px rgba(0, 123, 255, 0), + 0 1px 0 0 rgba(0, 0, 0, 0); + transition: border-color ease-in-out 0.07s, box-shadow ease-in-out 0.07s; +} + +.form-control--stealth:hover, .form-control--stealth:focus { + border: 1px solid #cecece; + box-shadow: + 0 0 0 2px rgba(0, 123, 255, 0), + 0 1px 0 0 rgba(0, 0, 0, 0.05); +} + +.form-control:focus { + color: #495057; + background-color: #fff; + border-color: #80bdff; + outline: none; + box-shadow: + 0 0 0 2px rgba(0, 123, 255, 0.25), + 0 1px 0 0 rgba(0, 0, 0, 0); +} + +.is-invalid .form-control, .form-control.is-invalid { + border: 1px solid #dc3545; + box-shadow: + 0 0 0 2px rgba(220, 53, 69, 0), + 0 1px 0 0 rgba(0, 0, 0, 0.05); +} + +.is-invalid .form-control:focus, .form-control.is-invalid:focus { + box-shadow: + 0 0 0 2px rgba(220, 53, 69, 0.25), + 0 1px 0 0 rgba(0, 0, 0, 0); +} + +.form-control::placeholder { + color: #8d8d8d; +} + +.form-control--inline { + display: inline-block; + width: auto; +} + +.form-control-wrap { + position: relative; +} + +.form-control-wrap--loading .form-control { + padding-right: 26px; +} + +.form-control-wrap--loading::after { + content: ''; + width: 12px; + height: 12px; + position: absolute; + top: 0; + right: 7px; + bottom: 0; + margin: auto 0; + border: 2px solid #9eaebd; + border-bottom-color: transparent; + border-radius: 100%; + animation: spin 1s infinite linear; +} + +.col-form-label, .col-form-value { + height: 31px; + line-height: 31px; +} + +.caret { + display: inline-block; + width: 7px; + height: 7px; + border-right: 2px solid #171717; + border-bottom: 2px solid #171717; + transform: rotate(45deg); + vertical-align: middle; + vertical-align: 0.16em; + margin-left: 0.3em; +} + +.caret--pre { + margin-left: 0; + margin-right: 0.3em; +} + +.caret--up { + transform: rotate(-135deg); + vertical-align: 0; +} + +.caret--left { + transform: rotate(135deg); +} + +.dropdown { + position: relative; +} + +.dropdown-menu { + display: none; + position: absolute; + top: 100%; + left: 0; + z-index: 1000; + padding: 6px 0; + margin: 2px 0 0; + font-size: 1rem; + min-width: 160px; + color: #171717; + background-color: #fff; + border-radius: 4px; + flex-direction: column; + box-shadow: 0 15px 35px rgba(50, 50, 93, 0.2), 0 5px 15px rgba(0, 0, 0, 0.2); + text-align: left; +} + +.dropdown-menu--right { + left: auto; + right: 0; +} + +.dropdown--open .dropdown-menu, .dropdown-menu--open { + display: flex; +} + +.dropdown-menu__item { + color: #171717; + padding: 4px 16px; + white-space: nowrap; + font-size: 14px; +} + +a.dropdown-menu__item:hover, a.dropdown-menu__item--active { + text-decoration: none; + background: #f1f1f1; + color: #171717; +} + +.dropdown__separator { + height: 1px; + background: #e0e0e0; + margin: 6px 0; +} + +.nav { + display: flex; + flex-wrap: wrap; + padding: 0; + margin: 0; + list-style: none; +} + +.nav__item { + display: block; +} + +.nav__link { + padding: .5rem 1rem; + display: block; + white-space: nowrap; + color: #6b6b6b; +} +.nav__item--active > .nav__link { + color: #3f3f3f; +} +a.nav__link:hover { + color: #3f3f3f; + text-decoration: none; +} + +.nav__item:first-child > .nav__link { + padding-left: 0; +} + +.nav__item:last-child > .nav__link { + padding-right: 0; +} + +.nav--vertical { + flex-direction: column; +} + +.nav--vertical .nav__item { + display: flex; + flex-direction: column; + position: relative; + font-size: 14px; + line-height: 30px; + padding: 0; + font-weight: 500; + text-overflow: ellipsis; + overflow: hidden; +} +.nav--vertical .nav__item > .nav__item { + margin-left: 20px; +} + +.nav--vertical .nav__link { + padding: 0; + color: #555555; +} +.nav__item--active > .nav__link { + color: #171717; + font-weight: 600; +} +.nav--vertical a.nav__link:hover { + color: #004ea2; + text-decoration: none; +} + +.nav--navbar .dropdown-menu { + margin-left: 1rem; +} + +.card { + margin-bottom: 16px; + border-radius: 4px; + background: white; + box-shadow: 0 7px 14px 0 rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07); + box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2); + box-shadow: 0 7px 14px 0 rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07), 0 1px 5px 0 rgba(0,0,0,0.2); +} + +a.card { + text-decoration: none; + color: inherit; + transition: box-shadow 0.2s; +} + +a.card:hover { + box-shadow: 0 9px 20px 0 rgba(50,50,93,.15), 0 3px 9px 0 rgba(0,0,0,.07), 0 1px 7px 0 rgba(0,0,0,0.2); +} + +.card__header { + padding: 16px 20px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.card__title { + font-size: 18px; + font-weight: 500; + color: #3f3f3f; +} + +.card__subheading { + font-size: 14px; + color: #6b6b6b; + margin-top: 5px; +} + +.card__body, .card__section { + border-top: 1px solid #e0e0e0; + padding: 16px 20px; +} + +.card--no-separators .card__body, .card--no-separators .card__section { + border: none; +} + +.card__section { + background: #f8f8f8; +} + +.card--white .card__section { + background: #fff; +} + +.card__section--error, .card--white .card__section--error { + color: #721c24; + background-color: #f8d7da; + border-top: 1px solid #f5c6cb; + border-bottom: 1px solid #f5c6cb; +} + +.card__section:last-child { + border-bottom: none; +} + +.card__section--error + .card__body, .card__section--error + .card__section { + border-top: none; +} + +.card > .card__body:first-child, .card > .card__section:first-child { + border-top: none; +} + +.card > .card__body:first-child, .card > .card__section:first-child { + border-top-left-radius: 4px; + border-top-right-radius: 4px; +} + +.card > .card__body:last-child, .card > .card__section:last-child { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; +} + +.card__form-section-left { + margin-bottom: 8px; +} + +.card__form-section-title { + font-size: 16px; + font-weight: 500; + color: #3f3f3f; +} + +.card__form-section-subtitle { + font-size: 14px; + color: #6b6b6b; +} + + +.alert { + padding: .75rem 1.25rem; + margin-bottom: 16px; + border: 1px solid transparent; + border-radius: 4px; +} + +.alert--error { + color: #721c24; + background-color: #f8d7da; + border-color: #f5c6cb; +} + + +.form-group { + margin-bottom: 12px; + font-size: 14px; +} + +.form-group__help { + font-size: 12px; + margin-top: 4px; + color: #3f3f3f; +} + +.card__section > .form-group:last-child { + margin-bottom: 0; +} + +.form-group > label { + display: block; + font-size: 14px; + font-weight: 500; + color: #3f3f3f; + margin-bottom: 4px; +} + +.invalid-feedback { + font-size: 14px; + margin-top: 4px; + color: #dc3545; +} + +label.checkbox { + font-size: 14px; + color: #3f3f3f; + font-weight: 400; +} + +.editable-list { + margin-bottom: 12px; +} + +.editable-list__row { + font-size: 14px; + padding: 4px 0 0 0; +} + +.editable-list--sm .editable-list__row { + margin-bottom: 8px; +} + +.editable-list__field { + margin-bottom: 4px; +} + +.card__section .editable-list:last-child { + margin-bottom: 0; +} + +@media (min-width: 576px) { + .editable-list--sm .editable-list__row { + margin-bottom: 0; + } +} + +.btn { + font-family: inherit; /* not needed if using normalize.css */ + margin: 0; /* not needed if using normalize.css */ + display: inline-block; + cursor: pointer; + overflow: visible; /* remove padding in IE */ + padding: 4px 10px; + font-size: 14px; + line-height: 1.5; + text-decoration: none; + color: #495057; + background-color: #fff; + background-image: linear-gradient(#ffffff, #fbfbfb); + background-clip: padding-box; + border: 1px solid #cecece; + border-radius: 4px; + box-shadow: + 0 0 0 2px rgba(0, 123, 255, 0), + 0 1px 2px 0 rgba(0, 0, 0, 0.05); + transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + user-select: none; +} + +.btn:hover { + color: #495057; + text-decoration: none; + background-image: linear-gradient(#fbfbfb, #f5f5f5); +} + +.btn:focus { + color: #495057; + background-color: #fff; + border-color: #80bdff; + outline: none; + box-shadow: + 0 0 0 2px rgba(0, 123, 255, 0.25), + 0 1px 0 0 rgba(0, 0, 0, 0); +} + +.btn.active { + background: #959595; + border-color: #767676; + color: #fff; +} + +.btn-group { + display: inline-flex; +} + +.btn-group .btn + .btn { + margin-left: -1px; +} + +.btn-group > .btn:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.btn-group >.btn:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.btn-group > .btn:hover, .btn-group > .btn:focus { + z-index: 1; +} + +.btn-group > .btn.active { + z-index: 2; +} + +.btn--subtle { + border: none; + background: none; + box-shadow: none; + transition: background-color ease-in-out 0.1s, box-shadow ease-in-out 0.15s; +} + +.btn--subtle:hover { + background: rgba(0, 0, 0, 0.06); + color: #3f3f3f; +} + +.btn--subtle:focus { + background: none; + box-shadow: none; +} + +.btn--subtle:active { + background: rgba(0, 0, 0, 0.09); + color: #171717; + box-shadow: none; +} + +.btn--disabled, .btn:disabled { + opacity: .65; +} + +a.btn--disabled, fieldset:disabled a.btn { + pointer-events: none; +} + +.text-row { display: flex; } +.text-shrink { flex-shrink: 100000; } +.text-expand { flex: 1; flex-basis: auto; } + +.spinner-padding { + padding: 40px; + display: flex; + justify-content: center; +} + +.spinner { + content: ''; + border: 3px solid #9eaebd; + border-bottom-color: transparent; + border-radius: 100%; + animation: spin 1s infinite linear; +} + +.spinner--sm { + width: 12px; + height: 12px; + border-width: 2px; +} + +.spinner--md { + width: 24px; + height: 24px; + border-width: 3px; +} + +.spinner--lg { + width: 32px; + height: 32px; + border-width: 4px; +} + +@keyframes spin { + from { transform:rotate(0deg); } + to { transform:rotate(360deg); } +} + +.table { + width: 100%; + background: transparent; +} + +.table tbody + .table tbody { + border-top: 2px solid #dee2e6; +} + +.table td, .table th { + padding: .3rem .75rem; + vertical-align: top; +} + +.table th { + font-weight: 500; +} + +.table thead th { + padding: .6rem .75rem; + vertical-align: bottom; + border-top: 1px solid #dee2e6; + border-bottom: 1px solid #dee2e6; +} + +.table thead th.th--nopad { + padding: 0; +} + +.table thead th .table-header { + display: block; + padding: .6rem .75rem; +} + +.form-control--table-edit { + /* align field so it 's at the same position the text would be */ + height: 28px; + margin: -4px -8px -4px -8px; +} + +.table-edit-overlay-base { + position: relative; +} + +.form-control--table-edit-overlay { + position: absolute; + top: 3px; + left: 11px; + opacity: 0; + transition: border-color ease-in-out 0.07s, box-shadow ease-in-out 0.07s, opacity ease-in-out 0.07s; +} + +.card > .table > tbody > tr:first-child > td .form-control--table-edit-overlay { + top: 7px; +} + +.form-control--table-edit-overlay:hover, .form-control--table-edit-overlay:focus { + opacity: 1; +} + +@media (max-width: 575.98px) { + .table--responsive-single-sm { + display: block; + } + .table--responsive-single-sm tbody, .table--responsive-single-sm thead { + display: block; + } + .table--responsive-single-sm tr { + display: block; + padding: 8px 15px !important; + } + .table--responsive-single-sm td, .table--responsive-single-sm th, .table--responsive-single-sm th .table-header { + display: block; + padding: 0 !important; + } + .table--responsive-single-sm td[width], .table--responsive-single-sm th[width] { + width: auto !important; + } + .table--responsive-single-sm thead th { + border: none; + } + .table--responsive-single-sm thead { + border-top: 1px solid #dee2e6; + border-bottom: 1px solid #dee2e6; + } + .card > .table--responsive-single-sm:first-child > thead { + border-top: none; + } + .form-control--table-edit-overlay, .card > .table > tbody > tr:first-child > td .form-control--table-edit-overlay { + top: 0px; + left: 0px; + } + .table-edit-overlay-base { + height: 26px; + } + .form-control--table-edit { + margin: 0 -8px 0 -8px; + } +} + +.card > .table > thead { + background-color: #fafafa; +} + +.card > .table:first-child > thead { + border-top-left-radius: 4px; + border-top-right-radius: 4px; +} + +.card > .table:first-child > thead > tr > th { + border-top: none; +} + +.card > .table > tbody > tr:first-child > td { + padding-top: .5rem; +} + +.card > .table > tbody > tr:last-child > td { + padding-bottom: .5rem; +} + +.card > .table > tbody > tr > td:first-child, .card > .table > thead > tr > th:first-child { + padding-left: 20px; +} + +.card > .table > thead > tr > th.th--nopad:first-child { + padding-left: 0; +} + +.card > .table > thead > tr > th:first-child > .table-header { + padding-left: 20px; +} + +.card > .table > tbody > tr > td:last-child, .card > .table > thead > tr > th:last-child { + padding-right: 20px; +} + +.table > thead > tr > th:last-child { + padding-right: 0; +} + +.card > .table > thead > tr > th.th--nopad:last-child { + padding-right: 0; +} + +.card > .table > thead > tr > th:last-child > .table-header { + padding-right: 20px; +} + +.td-editable { + cursor: pointer; +} + +a.td-editable { + display: block; + color: inherit; + text-decoration: inherit; +} + +.vertical-selector { + font-size: 14px; +} + +.vertical-selector__item { + display: block; + font-weight: 500; + padding: 5px 10px; + border-radius: 5px; + color: #555555; +} + +a.vertical-selector__item { + text-decoration: none; +} + +.vertical-selector__item:hover { + background-color: rgba(255, 255, 255, 0.4); +} + +.vertical-selector__item--active { + background-color: rgba(255, 255, 255, 0.7); + color: #171717; + font-weight: bold +} + +.vertical-selector-label { + font-size: 14px; + font-weight: 500; + color: #3f3f3f; + margin-bottom: 8px; +} + +.expand-arrow { + display: inline-block; + width: 7px; + height: 7px; + border-right: 1px solid #171717; + border-bottom: 1px solid #171717; + transform: rotate(-45deg); + vertical-align: middle; + vertical-align: 0.1em; +} + +.expand-arrow--open { + transform: rotate(45deg); + vertical-align: middle; + vertical-align: 0.16em; +} + +.modal-backdrop { + z-index: 1040; + background-color: rgba(0, 0, 0, 0.21); + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.modal-scrollbar-measure { + position: absolute; + top: -9999px; + width: 50px; + height: 50px; + overflow: scroll; +} + +body.has-modal-open { + overflow: hidden; +} + +.modal { + display: none; + z-index: 1050; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow-x: hidden; + overflow-y: scroll; + flex-direction: column; + align-items: center; + padding: 14px; +} + +.modal--open { + display: flex; +} + +.modal__content { + background: #f8f8f8; + width: 100%; + margin: auto; + box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 0.2); + border-radius: 4px; +} + +@media (min-width: 630px) { + .modal__content { + width: 600px; + } +} + +.modal__header { + height: 72px; + background-color: #fff; + border-bottom: 1px solid #e0e0e0; + display: flex; + align-items: center; + padding: 0 22px; + border-top-left-radius: 4px; + border-top-right-radius: 4px; +} + +.modal__title { + font-size: 20px; + font-weight: 500; + flex: 1; +} + +.modal__footer { + height: 72px; + background-color: #fff; + border-top: 1px solid #e0e0e0; + padding: 0 19px; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + display: flex; + align-items: center; +} + +.modal__footer-buttons { + flex: 1; + display: flex; + justify-content: flex-end; + align-items: center; +} + +.modal__footer-buttons .btn { + margin-left: 10px; +} + +.modal__body { + background-color: #f8f8f8; + padding: 22px; +} + +.modal__body + .modal__body, .modal__table + .modal__body { + border-top: 1px solid #e0e0e0; +} + +.modal__close { + display: block; + width: 40px; + height: 40px; + position: relative; + background: transparent; + border: none; + margin-right: -8px; + cursor: pointer; +} + +.modal__close::before, .modal__close::after { + position: absolute; + top: 11px; /* (40 (container height) - 20 (stroke height)) / 2 */ + left: 19px; /* (40 (container width) - 2 (stroke width)) / 2 */ + content: ''; + height: 18px; + width: 2px; + background: #6b6b6b; + transform: rotate(-45deg); +} + +.modal__close::after { + transform: rotate(45deg); +} + +.modal__section-title { + font-size: 18px; + font-weight: 500; + color: #3f3f3f; + margin: -5px 0 15px 0; +} + +.modal__section-title--solo { + margin: -5px 0; +} + +.modal__table > thead { background: #fafafa; } +/* reduce padding to fit in modal better */ +.modal__table td, .modal__table th { padding: .3rem .5rem; } +.modal__table thead th { padding: .6rem .5rem; } +.modal__table > tbody > tr > td:first-child, .modal__table > thead > tr > th:first-child { padding-left: 22px; } +.modal__table > thead > tr > th.th--nopad:first-child { padding-left: 0; } +.modal__table > thead > tr > th:first-child > .table-header { padding-left: 22px; } +.modal__table > tbody > tr > td:last-child, .modal__table > thead > tr > th:last-child { padding-right: 22px; } +.modal__table > thead > tr > th.th--nopad:last-child { padding-right: 0; } +.modal__table > thead > tr > th:last-child > .table-header { padding-right: 22px; } + +.btn--remove-row { + height: 29px; + width: 29px; + position: relative; +} + +.btn--remove-row::before, .btn--remove-row::after { + position: absolute; + top: 8px; /* (29 (container height) - 17 (stroke height)) / 2 */ + left: 13px; /* (29 (container width) - 2 (stroke width)) / 2 */ + content: ''; + height: 13px; + width: 2px; + background: #8d8d8d; + transform: rotate(-45deg); +} + +.btn--remove-row::after { + transform: rotate(45deg); +}
\ No newline at end of file |