summaryrefslogtreecommitdiff
path: root/css3/framework/elements.css
diff options
context:
space:
mode:
Diffstat (limited to 'css3/framework/elements.css')
-rw-r--r--css3/framework/elements.css962
1 files changed, 0 insertions, 962 deletions
diff --git a/css3/framework/elements.css b/css3/framework/elements.css
deleted file mode 100644
index 6cefa7ed..00000000
--- a/css3/framework/elements.css
+++ /dev/null
@@ -1,962 +0,0 @@
-.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