UNPKG

@asi-ngtools/lib

Version:

This project is a little components library, simple to use, which will help you to simplify your project.

1,881 lines 120 kB
asi-checkbox, .asi-checkbox { display: flex; margin: 5px; flex: 1 0 auto; flex: 0 0 auto; } asi-checkbox.label-top, .asi-checkbox.label-top { flex-direction: column; } asi-checkbox.label-top .input-label, .asi-checkbox.label-top .input-label { margin: 0 0 5px; } asi-checkbox.label-top-center, .asi-checkbox.label-top-center { flex-direction: column; align-items: center; } asi-checkbox.label-top-center .input-label, .asi-checkbox.label-top-center .input-label { margin: 0 0 5px; } asi-checkbox.label-left, .asi-checkbox.label-left { flex-direction: row; align-items: center; } asi-checkbox.label-left .input-label, .asi-checkbox.label-left .input-label { margin: 0 10px 0 0; } asi-checkbox.label-bottom, .asi-checkbox.label-bottom { flex-direction: column; } asi-checkbox.label-bottom .input-label, .asi-checkbox.label-bottom .input-label { margin: 10px 0 0; order: 1; } asi-checkbox.label-bottom-center, .asi-checkbox.label-bottom-center { flex-direction: column; align-items: center; } asi-checkbox.label-bottom-center .input-label, .asi-checkbox.label-bottom-center .input-label { margin: 10px 0 0; order: 1; } asi-checkbox.label-right, .asi-checkbox.label-right { flex-direction: row; align-items: center; } asi-checkbox.label-right .input-label, .asi-checkbox.label-right .input-label { margin: 0 0 0 10px; order: 1; } asi-checkbox button, .asi-checkbox button { border: 1px solid transparent; color: inherit; text-decoration: none; text-align: left; user-select: none; padding: 0; } asi-checkbox button::-moz-focus-inner, .asi-checkbox button::-moz-focus-inner { padding: 0; border: 0; } asi-checkbox button:not([disabled]), .asi-checkbox button:not([disabled]) { background: none; line-height: initial; } asi-checkbox button:enabled:hover, .asi-checkbox button:enabled:hover { cursor: pointer; } asi-checkbox label.input-label, .asi-checkbox label.input-label { color: #3d3e3f; } asi-checkbox .checkbox, .asi-checkbox .checkbox { max-height: 22px; height: 22px; max-width: 22px; width: 22px; padding: 0 0 3px; outline: none; box-shadow: 0 0 1px #b8b7b7; border: 1px solid #b8b7b7; } asi-checkbox .checkbox:focus, .asi-checkbox .checkbox:focus { border: 1px solid #3eaaaf; } asi-checkbox .checkbox:enabled, .asi-checkbox .checkbox:enabled { background-color: white; } asi-checkbox .checkbox > div, .asi-checkbox .checkbox > div { display: flex; flex-direction: row; align-items: center; justify-content: center; } asi-checkbox .checkbox .checkbox-button, .asi-checkbox .checkbox .checkbox-button { width: 11px; height: 6px; display: block; border: 3px solid white; border-top: none; border-right: none; background: transparent; transform: rotate(-45deg); opacity: 0; } asi-checkbox .checkbox.checked, .asi-checkbox .checkbox.checked { background-color: #3eaaaf; } asi-checkbox .checkbox.checked .checkbox-button, .asi-checkbox .checkbox.checked .checkbox-button { opacity: 1; } asi-checkbox .checkbox.radio, .asi-checkbox .checkbox.radio { border-radius: 22px; } asi-icon-checkbox, .asi-icon-checkbox { display: flex; margin: 5px; flex: 1 0 auto; flex: 0 0 auto; } asi-icon-checkbox.label-top, .asi-icon-checkbox.label-top { flex-direction: column; } asi-icon-checkbox.label-top .input-label, .asi-icon-checkbox.label-top .input-label { margin: 0 0 5px; } asi-icon-checkbox.label-top-center, .asi-icon-checkbox.label-top-center { flex-direction: column; align-items: center; } asi-icon-checkbox.label-top-center .input-label, .asi-icon-checkbox.label-top-center .input-label { margin: 0 0 5px; } asi-icon-checkbox.label-left, .asi-icon-checkbox.label-left { flex-direction: row; align-items: center; } asi-icon-checkbox.label-left .input-label, .asi-icon-checkbox.label-left .input-label { margin: 0 10px 0 0; } asi-icon-checkbox.label-bottom, .asi-icon-checkbox.label-bottom { flex-direction: column; } asi-icon-checkbox.label-bottom .input-label, .asi-icon-checkbox.label-bottom .input-label { margin: 10px 0 0; order: 1; } asi-icon-checkbox.label-bottom-center, .asi-icon-checkbox.label-bottom-center { flex-direction: column; align-items: center; } asi-icon-checkbox.label-bottom-center .input-label, .asi-icon-checkbox.label-bottom-center .input-label { margin: 10px 0 0; order: 1; } asi-icon-checkbox.label-right, .asi-icon-checkbox.label-right { flex-direction: row; align-items: center; } asi-icon-checkbox.label-right .input-label, .asi-icon-checkbox.label-right .input-label { margin: 0 0 0 10px; order: 1; } asi-icon-checkbox button, .asi-icon-checkbox button { border: 1px solid transparent; color: inherit; text-decoration: none; text-align: left; user-select: none; padding: 0; } asi-icon-checkbox button::-moz-focus-inner, .asi-icon-checkbox button::-moz-focus-inner { padding: 0; border: 0; } asi-icon-checkbox button:not([disabled]), .asi-icon-checkbox button:not([disabled]) { background: none; line-height: initial; } asi-icon-checkbox button:enabled:hover, .asi-icon-checkbox button:enabled:hover { cursor: pointer; } asi-icon-checkbox label.input-label, .asi-icon-checkbox label.input-label { color: #3d3e3f; } asi-icon-checkbox .icon-checkbox button:not([disabled]), .asi-icon-checkbox .icon-checkbox button:not([disabled]) { color: #3d3e3f; } asi-icon-checkbox .icon-checkbox.checked button, .asi-icon-checkbox .icon-checkbox.checked button { color: #3eaaaf; } asi-switch { display: flex; margin: 5px; flex: 1 0 auto; } asi-switch.label-top { flex-direction: column; } asi-switch.label-top .input-label { margin: 0 0 5px; } asi-switch.label-top-center { flex-direction: column; align-items: center; } asi-switch.label-top-center .input-label { margin: 0 0 5px; } asi-switch.label-left { flex-direction: row; align-items: center; } asi-switch.label-left .input-label { margin: 0 10px 0 0; } asi-switch.label-bottom { flex-direction: column; } asi-switch.label-bottom .input-label { margin: 10px 0 0; order: 1; } asi-switch.label-bottom-center { flex-direction: column; align-items: center; } asi-switch.label-bottom-center .input-label { margin: 10px 0 0; order: 1; } asi-switch.label-right { flex-direction: row; align-items: center; } asi-switch.label-right .input-label { margin: 0 0 0 10px; order: 1; } asi-switch button { border: 1px solid transparent; color: inherit; text-decoration: none; text-align: left; user-select: none; padding: 0; } asi-switch button::-moz-focus-inner { padding: 0; border: 0; } asi-switch button:not([disabled]) { background: none; line-height: initial; } asi-switch button:enabled:hover { cursor: pointer; } asi-switch label.input-label { color: #3d3e3f; } asi-switch button.switch { max-height: 22px; height: 22px; max-width: 40px; width: 40px; padding: 0; text-align: left; border-radius: 20px; background-color: #3d566f; position: relative; outline: none; box-sizing: border-box; border: 1px solid transparent; } asi-switch button.switch :not([disabled]) { background-color: white; } asi-switch button.switch:focus { border: 1px solid orange; } asi-switch button.switch .switch-button { position: absolute; top: 0; left: 0; height: 20px; width: 20px; border-radius: 18px; display: block; box-shadow: 0 0 1px grey; transition: left 0.2s ease-in-out; box-sizing: border-box; } asi-switch button.switch.checked { background-color: #5CB85C; } asi-switch button.switch.checked .switch-button { background-color: white; left: 19px; } .drop-down-select { overflow: auto; display: block; max-height: 181px; } .drop-down-select .drop-down-panel { display: inline-block; min-width: 100%; border-bottom: none; background-color: white; padding-bottom: 1px; } .drop-down-select .drop-down-panel .drop-down-item { display: flex; flex-direction: column; justify-content: center; cursor: pointer; height: 30px; min-height: 30px; max-height: 30px; min-width: 100%; padding: 0; border: 1px solid #b8b7b7; border-bottom: none; background-color: white; } .drop-down-select .drop-down-panel .drop-down-item:first-child { border-radius: 2px 2px 0 0; } .drop-down-select .drop-down-panel .drop-down-item:last-child { border-bottom: 1px solid #b8b7b7; border-radius: 0 0 2px 2px; } .drop-down-select .drop-down-panel .drop-down-item:hover { box-shadow: 3px 0 0 0 #3eaaaf inset; background-color: #F3F3F3; } .drop-down-select .drop-down-panel .drop-down-item:hover .option .item { color: black; } .drop-down-select .drop-down-panel .drop-down-item .option { height: 30px; display: flex; flex-direction: row; align-items: center; } .drop-down-select .drop-down-panel .drop-down-item .option asi-checkbox { padding: 0 0 0 5px; } .drop-down-select .drop-down-panel .drop-down-item .option:focus { border: 1px solid #3eaaaf; } .drop-down-select .drop-down-panel .drop-down-item .option .item { display: flex; flex: 1 1 auto; color: #545454; padding: 0 5px; } .asi-select, asi-select { display: flex; margin: 5px; flex: 1 0 auto; } .asi-select.label-top, asi-select.label-top { flex-direction: column; } .asi-select.label-top .input-label, asi-select.label-top .input-label { margin: 0 0 5px; } .asi-select.label-top-center, asi-select.label-top-center { flex-direction: column; align-items: center; } .asi-select.label-top-center .input-label, asi-select.label-top-center .input-label { margin: 0 0 5px; } .asi-select.label-left, asi-select.label-left { flex-direction: row; align-items: center; } .asi-select.label-left .input-label, asi-select.label-left .input-label { margin: 0 10px 0 0; } .asi-select.label-bottom, asi-select.label-bottom { flex-direction: column; } .asi-select.label-bottom .input-label, asi-select.label-bottom .input-label { margin: 10px 0 0; order: 1; } .asi-select.label-bottom-center, asi-select.label-bottom-center { flex-direction: column; align-items: center; } .asi-select.label-bottom-center .input-label, asi-select.label-bottom-center .input-label { margin: 10px 0 0; order: 1; } .asi-select.label-right, asi-select.label-right { flex-direction: row; align-items: center; } .asi-select.label-right .input-label, asi-select.label-right .input-label { margin: 0 0 0 10px; order: 1; } .asi-select button, asi-select button { border: 1px solid transparent; color: inherit; text-decoration: none; text-align: left; user-select: none; padding: 0; } .asi-select button::-moz-focus-inner, asi-select button::-moz-focus-inner { padding: 0; border: 0; } .asi-select button:not([disabled]), asi-select button:not([disabled]) { background: none; line-height: initial; } .asi-select button:enabled:hover, asi-select button:enabled:hover { cursor: pointer; } .asi-select .asi-checkbox, asi-select .asi-checkbox { margin: 0; } .asi-select label.input-label, asi-select label.input-label { color: #3d3e3f; } .asi-select.multiple .asi-select-container .asi-select-header .item-container > span, asi-select.multiple .asi-select-container .asi-select-header .item-container > span { padding-left: 25px; } .asi-select .asi-select-container, asi-select .asi-select-container { display: flex; flex: 1 0 auto; flex-direction: column; } .asi-select .asi-select-container .asi-select-header, asi-select .asi-select-container .asi-select-header { display: flex; flex-direction: row; align-items: center; border: 1px solid #b8b7b7; border-radius: 2px; box-shadow: 1px 1px 1px #91c4c7; position: relative; min-height: 30px; outline: none; } .asi-select .asi-select-container .asi-select-header asi-checkbox, asi-select .asi-select-container .asi-select-header asi-checkbox { position: absolute; top: 4px; } .asi-select .asi-select-container .asi-select-header:not([disabled]), asi-select .asi-select-container .asi-select-header:not([disabled]) { cursor: pointer; background-color: white; } .asi-select .asi-select-container .asi-select-header:disabled, asi-select .asi-select-container .asi-select-header:disabled { background-color: #ebebe4; } .asi-select .asi-select-container .asi-select-header:focus, asi-select .asi-select-container .asi-select-header:focus { border: 1px solid #3eaaaf; } .asi-select .asi-select-container .asi-select-header .asi-checkbox, asi-select .asi-select-container .asi-select-header .asi-checkbox { padding: 0 0 0 5px; } .asi-select .asi-select-container .asi-select-header .item-container, asi-select .asi-select-container .asi-select-header .item-container { height: 30px; padding: 0; display: flex; flex-direction: row; align-items: center; flex: 1 1 auto; min-width: 0; padding-left: 5px; outline: none; } .asi-select .asi-select-container .asi-select-header .item-container:focus, asi-select .asi-select-container .asi-select-header .item-container:focus { border: 1px solid #3eaaaf; } .asi-select .asi-select-container .asi-select-header .item-container:not([disabled]), asi-select .asi-select-container .asi-select-header .item-container:not([disabled]) { color: black; } .asi-select .asi-select-container .asi-select-header .item-container:not([disabled]) asi-empty, asi-select .asi-select-container .asi-select-header .item-container:not([disabled]) asi-empty { color: grey; } .asi-select .asi-select-container .asi-select-header .item-container > span, asi-select .asi-select-container .asi-select-header .item-container > span { display: flex; flex-direction: row; align-items: center; flex: 1 1 auto; } .asi-select .asi-select-container .asi-select-header .item-container > span .item, asi-select .asi-select-container .asi-select-header .item-container > span .item { color: inherit; height: 100%; flex: 1 1 auto; overflow: hidden; } .asi-select .asi-select-container .asi-select-header .item-container > span .drop-icon-container, asi-select .asi-select-container .asi-select-header .item-container > span .drop-icon-container { height: 100%; display: flex; flex-direction: row; align-items: center; } .asi-select .asi-select-container .asi-select-header .item-container > span .drop-icon-container .drop-icon, asi-select .asi-select-container .asi-select-header .item-container > span .drop-icon-container .drop-icon { display: block; margin-right: 5px; width: 10px; height: 15px; color: inherit; } .drop-down-autocomplete { overflow: auto; display: block; max-height: 181px; } .drop-down-autocomplete .drop-down-panel { display: inline-block; min-width: 100%; border-bottom: none; background-color: white; } .drop-down-autocomplete .drop-down-panel .drop-down-item { display: flex; flex-direction: column; justify-content: center; cursor: pointer; height: 30px; min-height: 30px; max-height: 30px; min-width: 100%; padding: 0; border: 1px solid #b8b7b7; border-bottom: none; background-color: white; } .drop-down-autocomplete .drop-down-panel .drop-down-item:first-child { border-radius: 2px 2px 0 0; } .drop-down-autocomplete .drop-down-panel .drop-down-item:last-child { border-bottom: 1px solid #b8b7b7; border-radius: 0 0 2px 2px; } .drop-down-autocomplete .drop-down-panel .drop-down-item:hover { box-shadow: 3px 0 0 0 #3eaaaf inset; background-color: #F3F3F3; } .drop-down-autocomplete .drop-down-panel .drop-down-item:hover .option .item { color: black; } .drop-down-autocomplete .drop-down-panel .drop-down-item .option { padding-left: 5px; display: flex; flex-direction: row; align-items: center; } .drop-down-autocomplete .drop-down-panel .drop-down-item .option asi-checkbox { padding: 0 5px 0 0; } .drop-down-autocomplete .drop-down-panel .drop-down-item .option:focus { border: 1px solid #3eaaaf; } .drop-down-autocomplete .drop-down-panel .drop-down-item .option .item { display: flex; flex: 1 1 auto; color: #545454; padding: 0 5px; } .asi-autocomplete, asi-autocomplete { display: flex; margin: 5px; flex: 1 0 auto; } .asi-autocomplete.label-top, asi-autocomplete.label-top { flex-direction: column; } .asi-autocomplete.label-top .input-label, asi-autocomplete.label-top .input-label { margin: 0 0 5px; } .asi-autocomplete.label-top-center, asi-autocomplete.label-top-center { flex-direction: column; align-items: center; } .asi-autocomplete.label-top-center .input-label, asi-autocomplete.label-top-center .input-label { margin: 0 0 5px; } .asi-autocomplete.label-left, asi-autocomplete.label-left { flex-direction: row; align-items: center; } .asi-autocomplete.label-left .input-label, asi-autocomplete.label-left .input-label { margin: 0 10px 0 0; } .asi-autocomplete.label-bottom, asi-autocomplete.label-bottom { flex-direction: column; } .asi-autocomplete.label-bottom .input-label, asi-autocomplete.label-bottom .input-label { margin: 10px 0 0; order: 1; } .asi-autocomplete.label-bottom-center, asi-autocomplete.label-bottom-center { flex-direction: column; align-items: center; } .asi-autocomplete.label-bottom-center .input-label, asi-autocomplete.label-bottom-center .input-label { margin: 10px 0 0; order: 1; } .asi-autocomplete.label-right, asi-autocomplete.label-right { flex-direction: row; align-items: center; } .asi-autocomplete.label-right .input-label, asi-autocomplete.label-right .input-label { margin: 0 0 0 10px; order: 1; } .asi-autocomplete button, asi-autocomplete button { border: 1px solid transparent; color: inherit; text-decoration: none; text-align: left; user-select: none; padding: 0; } .asi-autocomplete button::-moz-focus-inner, asi-autocomplete button::-moz-focus-inner { padding: 0; border: 0; } .asi-autocomplete button:not([disabled]), asi-autocomplete button:not([disabled]) { background: none; line-height: initial; } .asi-autocomplete button:enabled:hover, asi-autocomplete button:enabled:hover { cursor: pointer; } .asi-autocomplete label.input-label, asi-autocomplete label.input-label { color: #3d3e3f; } .asi-autocomplete .autocomplete, asi-autocomplete .autocomplete { display: flex; flex-direction: column; } .asi-autocomplete .autocomplete input, asi-autocomplete .autocomplete input { outline: none; height: 30px; max-height: 30px; padding: 0; border: 1px solid #b8b7b7; border-radius: 2px; box-shadow: 1px 1px 1px #91c4c7; padding-left: 5px; flex: 1 0 auto; } .asi-autocomplete .autocomplete input:focus, asi-autocomplete .autocomplete input:focus { border: 1px solid #3eaaaf; } .asi-autocomplete .autocomplete .autocomplete-header, asi-autocomplete .autocomplete .autocomplete-header { height: 30px; border: 1px solid #b8b7b7; border-radius: 2px; box-shadow: 1px 1px 1px #91c4c7; padding-left: 5px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; outline: none; box-sizing: content-box; } .asi-autocomplete .autocomplete .autocomplete-header:focus, asi-autocomplete .autocomplete .autocomplete-header:focus { border: 1px solid #3eaaaf; } .asi-autocomplete .autocomplete .autocomplete-header .remove-icon-container, asi-autocomplete .autocomplete .autocomplete-header .remove-icon-container { height: 100%; display: flex; flex-direction: row; align-items: center; } .asi-autocomplete .autocomplete .autocomplete-header .remove-icon-container:not([disabled]), asi-autocomplete .autocomplete .autocomplete-header .remove-icon-container:not([disabled]) { cursor: pointer; } .asi-autocomplete .autocomplete .autocomplete-header .remove-icon-container:focus, asi-autocomplete .autocomplete .autocomplete-header .remove-icon-container:focus { border: 1px solid #3eaaaf; } .asi-autocomplete .autocomplete .autocomplete-header .remove-icon-container .remove-icon, asi-autocomplete .autocomplete .autocomplete-header .remove-icon-container .remove-icon { display: block; margin-right: 5px; width: 10px; height: 19px; color: black; } .asi-image-chooser, asi-image-chooser { display: flex; margin: 5px; flex: 1 0 auto; flex: 0 0 auto; } .asi-image-chooser.label-top, asi-image-chooser.label-top { flex-direction: column; } .asi-image-chooser.label-top .input-label, asi-image-chooser.label-top .input-label { margin: 0 0 5px; } .asi-image-chooser.label-top-center, asi-image-chooser.label-top-center { flex-direction: column; align-items: center; } .asi-image-chooser.label-top-center .input-label, asi-image-chooser.label-top-center .input-label { margin: 0 0 5px; } .asi-image-chooser.label-left, asi-image-chooser.label-left { flex-direction: row; align-items: center; } .asi-image-chooser.label-left .input-label, asi-image-chooser.label-left .input-label { margin: 0 10px 0 0; } .asi-image-chooser.label-bottom, asi-image-chooser.label-bottom { flex-direction: column; } .asi-image-chooser.label-bottom .input-label, asi-image-chooser.label-bottom .input-label { margin: 10px 0 0; order: 1; } .asi-image-chooser.label-bottom-center, asi-image-chooser.label-bottom-center { flex-direction: column; align-items: center; } .asi-image-chooser.label-bottom-center .input-label, asi-image-chooser.label-bottom-center .input-label { margin: 10px 0 0; order: 1; } .asi-image-chooser.label-right, asi-image-chooser.label-right { flex-direction: row; align-items: center; } .asi-image-chooser.label-right .input-label, asi-image-chooser.label-right .input-label { margin: 0 0 0 10px; order: 1; } .asi-image-chooser button, asi-image-chooser button { border: 1px solid transparent; color: inherit; text-decoration: none; text-align: left; user-select: none; padding: 0; } .asi-image-chooser button::-moz-focus-inner, asi-image-chooser button::-moz-focus-inner { padding: 0; border: 0; } .asi-image-chooser button:not([disabled]), asi-image-chooser button:not([disabled]) { background: none; line-height: initial; } .asi-image-chooser button:enabled:hover, asi-image-chooser button:enabled:hover { cursor: pointer; } .asi-image-chooser label.input-label, asi-image-chooser label.input-label { color: #3d3e3f; } .asi-image-chooser .asi-image-chooser-container, asi-image-chooser .asi-image-chooser-container { display: flex; align-items: center; justify-content: center; background-color: white; border: 1px dashed #b8b7b7; width: 100px; height: 100px; cursor: pointer; } .asi-image-chooser .asi-image-chooser-container input, asi-image-chooser .asi-image-chooser-container input { display: none; } .asi-image-chooser .asi-image-chooser-container img, asi-image-chooser .asi-image-chooser-container img { pointer-events: none; max-width: 100px; max-height: 100px; } asi-file-chooser, .asi-file-chooser { display: flex; margin: 5px; flex: 1 0 auto; } asi-file-chooser.label-top, .asi-file-chooser.label-top { flex-direction: column; } asi-file-chooser.label-top .input-label, .asi-file-chooser.label-top .input-label { margin: 0 0 5px; } asi-file-chooser.label-top-center, .asi-file-chooser.label-top-center { flex-direction: column; align-items: center; } asi-file-chooser.label-top-center .input-label, .asi-file-chooser.label-top-center .input-label { margin: 0 0 5px; } asi-file-chooser.label-left, .asi-file-chooser.label-left { flex-direction: row; align-items: center; } asi-file-chooser.label-left .input-label, .asi-file-chooser.label-left .input-label { margin: 0 10px 0 0; } asi-file-chooser.label-bottom, .asi-file-chooser.label-bottom { flex-direction: column; } asi-file-chooser.label-bottom .input-label, .asi-file-chooser.label-bottom .input-label { margin: 10px 0 0; order: 1; } asi-file-chooser.label-bottom-center, .asi-file-chooser.label-bottom-center { flex-direction: column; align-items: center; } asi-file-chooser.label-bottom-center .input-label, .asi-file-chooser.label-bottom-center .input-label { margin: 10px 0 0; order: 1; } asi-file-chooser.label-right, .asi-file-chooser.label-right { flex-direction: row; align-items: center; } asi-file-chooser.label-right .input-label, .asi-file-chooser.label-right .input-label { margin: 0 0 0 10px; order: 1; } asi-file-chooser button, .asi-file-chooser button { border: 1px solid transparent; color: inherit; text-decoration: none; text-align: left; user-select: none; padding: 0; } asi-file-chooser button::-moz-focus-inner, .asi-file-chooser button::-moz-focus-inner { padding: 0; border: 0; } asi-file-chooser button:not([disabled]), .asi-file-chooser button:not([disabled]) { background: none; line-height: initial; } asi-file-chooser button:enabled:hover, .asi-file-chooser button:enabled:hover { cursor: pointer; } asi-file-chooser label.input-label, .asi-file-chooser label.input-label { color: #3d3e3f; } asi-file-chooser .asi-file-chooser-container, .asi-file-chooser .asi-file-chooser-container { display: flex; flex-direction: row; align-items: center; } asi-file-chooser .asi-file-chooser-container label, .asi-file-chooser .asi-file-chooser-container label { display: flex; align-items: center; justify-content: center; border: none; width: 40px; height: 40px; cursor: pointer; } asi-file-chooser .asi-file-chooser-container label input, .asi-file-chooser .asi-file-chooser-container label input { display: none; } asi-file-chooser .asi-file-chooser-container asi-button asi-fa-icon button, .asi-file-chooser .asi-file-chooser-container asi-button asi-fa-icon button { color: white; } asi-file-chooser .asi-file-chooser-container .file-link, .asi-file-chooser .asi-file-chooser-container .file-link { display: flex; flex-direction: row; align-content: center; margin-left: 5px; } asi-file-chooser .asi-file-chooser-container .file-link asi-fa-icon, .asi-file-chooser .asi-file-chooser-container .file-link asi-fa-icon { margin: 0px; } asi-file-chooser .asi-file-chooser-container .file-link asi-fa-icon button, .asi-file-chooser .asi-file-chooser-container .file-link asi-fa-icon button { color: white; } asi-file-chooser .asi-file-chooser-container .file-link a, .asi-file-chooser .asi-file-chooser-container .file-link a { max-width: 250px; text-decoration: underline; padding-right: 10px; cursor: pointer; margin: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } asi-file-chooser .asi-file-chooser-container .file-link a:hover, .asi-file-chooser .asi-file-chooser-container .file-link a:hover { text-decoration: none; } asi-menu, .asi-menu { display: flex; flex-direction: column; flex: 0 0 auto; } asi-menu button, .asi-menu button { border: 1px solid transparent; color: inherit; text-decoration: none; text-align: left; user-select: none; padding: 0; } asi-menu button::-moz-focus-inner, .asi-menu button::-moz-focus-inner { padding: 0; border: 0; } asi-menu button:not([disabled]), .asi-menu button:not([disabled]) { background: none; line-height: initial; } asi-menu button:enabled:hover, .asi-menu button:enabled:hover { cursor: pointer; } asi-menu a, .asi-menu a { text-decoration: none; } asi-menu .asi-menu-container, .asi-menu .asi-menu-container { display: flex; flex-direction: column; } asi-menu .asi-menu-container .asi-menu-panel, .asi-menu .asi-menu-container .asi-menu-panel { display: flex; flex-direction: column; position: relative; list-style: none; padding-left: 0px; } asi-menu .asi-menu-container .asi-menu-panel .items-container, .asi-menu .asi-menu-container .asi-menu-panel .items-container { display: flex; flex-direction: row; overflow: auto; list-style: none; background-color: white; } asi-menu .asi-menu-container .asi-menu-panel .items-container.vertical, .asi-menu .asi-menu-container .asi-menu-panel .items-container.vertical { flex-direction: column; } asi-menu .asi-menu-container .asi-menu-panel .items-container.vertical .item-container, .asi-menu .asi-menu-container .asi-menu-panel .items-container.vertical .item-container { justify-content: flex-start; } asi-menu .asi-menu-container .asi-menu-panel .items-container .item-container, .asi-menu .asi-menu-container .asi-menu-panel .items-container .item-container { color: black; display: flex; justify-content: center; align-items: center; text-align: center; padding: 5px; min-height: 40px; min-width: 100px; border-bottom: 2px solid transparent; transition: background-color 0.1s easea-in; outline: none; } asi-menu .asi-menu-container .asi-menu-panel .items-container .item-container.active, .asi-menu .asi-menu-container .asi-menu-panel .items-container .item-container.active { background-color: #3d566f; color: white; border-bottom: 2px solid #3eaaaf; } asi-menu .asi-menu-container .asi-menu-panel .items-container .item-container:hover, .asi-menu .asi-menu-container .asi-menu-panel .items-container .item-container:hover { background-color: #3d566f; color: white; } asi-menu .asi-menu-container .asi-menu-panel .items-container .item-container:focus, .asi-menu .asi-menu-container .asi-menu-panel .items-container .item-container:focus { border-bottom: 2px solid #3eaaaf; } asi-menu .asi-menu-container .asi-menu-panel .items-container.burger, .asi-menu .asi-menu-container .asi-menu-panel .items-container.burger { position: absolute; z-index: 25; right: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } asi-menu .asi-menu-container .asi-menu-panel .items-container.burger .item-container, .asi-menu .asi-menu-container .asi-menu-panel .items-container.burger .item-container { width: 250px; } asi-error-messages, .asi-error-messages { display: none; margin-left: 5px; margin-bottom: 3px; } asi-error-messages.active, .asi-error-messages.active { display: flex; } asi-error-messages .asi-error-message, .asi-error-messages .asi-error-message { color: red; font-size: 0.75em; } .asi-required .asi-component .input-label::after { content: ' *'; } .asi-has-error .asi-focus-error:not(.asi-fa-icon):not(.asi-button) { border: 1px solid red !important; } .asi-has-error .asi-focus-error.asi-fa-icon > button, .asi-has-error .asi-focus-error.asi-button > button { border: 1px solid red !important; } asi-dialog-container, .asi-dialog-container { z-index: 50; position: fixed; top: 0; left: 0; height: 100%; width: 100%; display: flex; flex-direction: row; flex: 1 0 auto; } asi-dialog-container .dialog-backdrop, .asi-dialog-container .dialog-backdrop { background-color: grey; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; position: absolute; transition: opacity 0.2s ease-in-out; } asi-dialog-container .dialog-container, .asi-dialog-container .dialog-container { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; align-items: center; } asi-dialog-container .dialog-container asi-dialog, .asi-dialog-container .dialog-container asi-dialog, asi-dialog-container .dialog-container .asi-dialog, .asi-dialog-container .dialog-container .asi-dialog { background-color: white; box-shadow: 0 0 1px lightgrey; border-radius: 2px; z-index: 1; display: none; flex-direction: column; flex: 0 1 auto; min-height: 0px; margin: 15px; } asi-dialog-container .dialog-container asi-dialog .dialog-panel, .asi-dialog-container .dialog-container asi-dialog .dialog-panel, asi-dialog-container .dialog-container .asi-dialog .dialog-panel, .asi-dialog-container .dialog-container .asi-dialog .dialog-panel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0px; } asi-dialog-container .dialog-container asi-dialog .dialog-panel .dialog-header, .asi-dialog-container .dialog-container asi-dialog .dialog-panel .dialog-header, asi-dialog-container .dialog-container .asi-dialog .dialog-panel .dialog-header, .asi-dialog-container .dialog-container .asi-dialog .dialog-panel .dialog-header { padding: 10px; border-bottom: 1px solid lightgrey; } asi-dialog-container .dialog-container asi-dialog .dialog-panel .dialog-content, .asi-dialog-container .dialog-container asi-dialog .dialog-panel .dialog-content, asi-dialog-container .dialog-container .asi-dialog .dialog-panel .dialog-content, .asi-dialog-container .dialog-container .asi-dialog .dialog-panel .dialog-content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0px; padding: 10px; } asi-dialog-container .dialog-container asi-dialog .dialog-panel .dialog-action, .asi-dialog-container .dialog-container asi-dialog .dialog-panel .dialog-action, asi-dialog-container .dialog-container .asi-dialog .dialog-panel .dialog-action, .asi-dialog-container .dialog-container .asi-dialog .dialog-panel .dialog-action { border-top: 1px solid lightgrey; display: flex; flex-direction: row; padding: 10px; } asi-notification-container, .asi-notification-container { position: fixed; padding: 5px; z-index: 75; } asi-notification-container.top_center, .asi-notification-container.top_center { top: 10px; width: 100%; text-align: center; display: flex; flex-direction: row; justify-content: center; } asi-notification-container.top_right, .asi-notification-container.top_right { top: 10px; right: 10px; } asi-notification-container.top_left, .asi-notification-container.top_left { top: 10px; left: 5px; } asi-notification-container.bottom_center, .asi-notification-container.bottom_center { bottom: 10px; width: 100%; text-align: center; display: flex; flex-direction: row; justify-content: center; } asi-notification-container.bottom_right, .asi-notification-container.bottom_right { bottom: 10px; right: 10px; } asi-notification-container.bottom_left, .asi-notification-container.bottom_left { bottom: 10px; left: 5px; } asi-notification-container .asi-notification-container-panel, .asi-notification-container .asi-notification-container-panel { min-width: 255px; position: relative; } asi-notification-container .asi-notification-container-panel .asi-notification, .asi-notification-container .asi-notification-container-panel .asi-notification { position: absolute; min-height: 45px; min-width: 250px; color: white; border-radius: 1px; box-shadow: 1px 1px 1px grey; display: flex; flex-direction: row; align-items: center; text-align: left; transition: top 0.3s ease-in-out, bottom 0.3s ease-in-out, opacity 0.3s ease-in-out; } asi-notification-container .asi-notification-container-panel .asi-notification .icon-container, .asi-notification-container .asi-notification-container-panel .asi-notification .icon-container { display: flex; flex-direction: row; align-items: center; justify-content: center; background-color: white; min-height: 45px; width: 45px; } asi-notification-container .asi-notification-container-panel .asi-notification > :not(.icon-container), .asi-notification-container .asi-notification-container-panel .asi-notification > :not(.icon-container) { padding: 5px 5px 5px 10px; } asi-notification-container .asi-notification-container-panel .asi-notification.success, .asi-notification-container .asi-notification-container-panel .asi-notification.success { background-color: #5CB85C; } asi-notification-container .asi-notification-container-panel .asi-notification.success .icon-container, .asi-notification-container .asi-notification-container-panel .asi-notification.success .icon-container { color: #5CB85C; } asi-notification-container .asi-notification-container-panel .asi-notification.warning, .asi-notification-container .asi-notification-container-panel .asi-notification.warning { background-color: #F0AD4E; } asi-notification-container .asi-notification-container-panel .asi-notification.warning .icon-container, .asi-notification-container .asi-notification-container-panel .asi-notification.warning .icon-container { color: #F0AD4E; } asi-notification-container .asi-notification-container-panel .asi-notification.error, .asi-notification-container .asi-notification-container-panel .asi-notification.error { background-color: #D9534F; } asi-notification-container .asi-notification-container-panel .asi-notification.error .icon-container, .asi-notification-container .asi-notification-container-panel .asi-notification.error .icon-container { color: #D9534F; } asi-notification-container .asi-notification-container-panel .asi-notification.info, .asi-notification-container .asi-notification-container-panel .asi-notification.info { background-color: #337AB7; } asi-notification-container .asi-notification-container-panel .asi-notification.info .icon-container, .asi-notification-container .asi-notification-container-panel .asi-notification.info .icon-container { color: #337AB7; } asi-notification-container .asi-notification-container-panel .asi-notification.top_center, .asi-notification-container .asi-notification-container-panel .asi-notification.top_center, asi-notification-container .asi-notification-container-panel .asi-notification.top_left, .asi-notification-container .asi-notification-container-panel .asi-notification.top_left, asi-notification-container .asi-notification-container-panel .asi-notification.top_right, .asi-notification-container .asi-notification-container-panel .asi-notification.top_right { top: 0; } asi-notification-container .asi-notification-container-panel .asi-notification.bottom_center, .asi-notification-container .asi-notification-container-panel .asi-notification.bottom_center, asi-notification-container .asi-notification-container-panel .asi-notification.bottom_left, .asi-notification-container .asi-notification-container-panel .asi-notification.bottom_left, asi-notification-container .asi-notification-container-panel .asi-notification.bottom_right, .asi-notification-container .asi-notification-container-panel .asi-notification.bottom_right { bottom: 0; } asi-pagination, .asi-pagination { display: flex; flex: 1 1 auto; flex-direction: row; justify-content: center; margin: 10px; } asi-pagination .action-panel, .asi-pagination .action-panel { display: flex; flex-direction: row; height: 30px; } asi-pagination .action-panel .disabled .paginate-boutton, .asi-pagination .action-panel .disabled .paginate-boutton { background-color: lightgrey; box-shadow: none; } asi-pagination .action-panel > div, .asi-pagination .action-panel > div { display: flex; flex-direction: row; } asi-pagination .paginate-boutton, .asi-pagination .paginate-boutton { height: 20px; width: 17px; box-sizing: content-box; background-color: white; border: none; text-align: center; padding: 6px 7px 3px; margin: 0px 3px 0px 3px; box-shadow: 1px 1px 1px #91c4c7; display: flex; flex-direction: row; justify-content: center; align-items: center; } asi-pagination .paginate-boutton:hover, .asi-pagination .paginate-boutton:hover { cursor: pointer; } asi-pagination .paginate-boutton.selected, .asi-pagination .paginate-boutton.selected { background-color: #3eaaaf; color: white; } asi-pagination .paginate-boutton.action, .asi-pagination .paginate-boutton.action { height: 20px; box-sizing: content-box; padding: 6px 7px 3px; } asi-table table, .asi-table table { width: 100%; border: none; border-collapse: collapse; } asi-table table thead tr, .asi-table table thead tr { height: 40px; border: 1px solid #b8b7b7; background-color: white; box-shadow: 0 0 1px #b8b7b7; } asi-table table thead tr th, .asi-table table thead tr th { padding: 0; border-bottom: 2px solid #3eaaaf; color: #3eaaaf; text-align: left; padding-left: 3px; } asi-table table thead tr th .header, .asi-table table thead tr th .header { display: flex; flex-direction: row; justify-content: space-between; } asi-table table thead tr th .sortItem, .asi-table table thead tr th .sortItem { width: 10px; } asi-table table thead tr th .sortIconAsc, .asi-table table thead tr th .sortIconAsc { display: none; } asi-table table thead tr th .sortIconDesc, .asi-table table thead tr th .sortIconDesc { display: none; } asi-table table thead tr th .sortIconUndefined, .asi-table table thead tr th .sortIconUndefined { display: none; } asi-table table thead tr th.sortable:hover, .asi-table table thead tr th.sortable:hover { cursor: pointer; } asi-table table thead tr th.sortable.asc .sortIconAsc, .asi-table table thead tr th.sortable.asc .sortIconAsc { display: block; } asi-table table thead tr th.sortable.asc .sortIconDesc, .asi-table table thead tr th.sortable.asc .sortIconDesc { display: none; } asi-table table thead tr th.sortable.desc .sortIconAsc, .asi-table table thead tr th.sortable.desc .sortIconAsc { display: none; } asi-table table thead tr th.sortable.desc .sortIconDesc, .asi-table table thead tr th.sortable.desc .sortIconDesc { display: block; } asi-table table tbody, .asi-table table tbody { background-color: transparent; } asi-table table tbody:nth-child(2n-1), .asi-table table tbody:nth-child(2n-1) { background-color: transparent; } asi-table table tbody tr, .asi-table table tbody tr { height: 35px; border: 1px solid #b8b7b7; background-color: white; } asi-table table tbody tr:nth-child(2n-1), .asi-table table tbody tr:nth-child(2n-1) { background-color: #f6f6f6; } asi-table table tbody tr td, .asi-table table tbody tr td { border: none; color: inherit; padding: 3px 3px 3px 6px; height: 20px; } asi-table table tbody.collapsed tr.inlined, .asi-table table tbody.collapsed tr.inlined { display: none; } .asi-code-viewer, asi-code-viewer { display: block; flex: 1 0 auto; flex-direction: column; min-height: 0; } .asi-tab-group, asi-tab-group { position: relative; display: flex; flex: 1 1 auto; min-width: 0; } .asi-tab-group .asi-tab-group, asi-tab-group .asi-tab-group { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; } .asi-tab-group .asi-tab-group .tab-header, asi-tab-group .asi-tab-group .tab-header { display: flex; flex: 1 1 auto; min-width: 0; min-height: 41px; max-height: 41px; height: auto; background-color: white; border-bottom: 1px solid #3d566f; margin: 0px 2px 0px 2px; } .asi-tab-group .asi-tab-group .tab-header button, asi-tab-group .asi-tab-group .tab-header button { outline: none; background: none; border: none; color: #3d3e3f; text-decoration: none; min-height: 41px; min-width: 100px; box-shadow: 0 0 1px #3d566f; } .asi-tab-group .asi-tab-group .tab-header button:focus, asi-tab-group .asi-tab-group .tab-header button:focus { border: 1px solid #3eaaaf; } .asi-tab-group .asi-tab-group .tab-header button:not(:disabled), asi-tab-group .asi-tab-group .tab-header button:not(:disabled) { cursor: pointer; } .asi-tab-group .asi-tab-group .tab-header button.active, asi-tab-group .asi-tab-group .tab-header button.active { background-color: white; border-bottom: 1px solid #3d566f; box-shadow: 0 0 1px #3d566f; color: #3d566f; font-weight: bold; } .asi-tab-group .asi-tab-group .tab-content, asi-tab-group .asi-tab-group .tab-content { background-color: white; display: flex; flex: inherit; min-width: inherit; } .asi-tab-group .asi-tab-group .tab-content asi-tab-content, asi-tab-group .asi-tab-group .tab-content asi-tab-content { display: flex; flex: inherit; min-width: inherit; } .asi-tab-group .asi-tab-group .tab-content asi-tab-content asi-tab-element, asi-tab-group .asi-tab-group .tab-content asi-tab-content asi-tab-element { display: flex; flex: inherit; min-width: inherit; } .asi-tab-group .asi-tab-group .tab-content asi-tab-content asi-tab-element .tab-element, asi-tab-group .asi-tab-group .tab-content asi-tab-content asi-tab-element .tab-element { display: flex; flex: inherit; min-width: inherit; overflow-y: auto; height: auto; flex-direction: column; } .asi-nav-group, asi-nav-group { position: relative; display: flex; flex: 0 0 auto; min-width: 0; } .asi-nav-group .asi-nav-group-container, asi-nav-group .asi-nav-group-container { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; } .asi-nav-group .asi-nav-group-container .asi-nav-header, asi-nav-group .asi-nav-group-container .asi-nav-header { display: flex; flex: 1 1 auto; min-width: 0; min-height: 41px; max-height: 41px; height: auto; background-color: white; border-bottom: 1px solid #3d566f; margin: 0px 2px 0px 2px; } .asi-nav-group .asi-nav-group-container .asi-nav-header button, asi-nav-group .asi-nav-group-container .asi-nav-header button { outline: none; background: none; border: none; color: #3d3e3f; text-decoration: none; min-height: 41px; min-width: 100px; box-shadow: 0 0 1px #3d566f; } .asi-nav-group .asi-nav-group-container .asi-nav-header button:focus, asi-nav-group .asi-nav-group-container .asi-nav-header button:focus { border: 1px solid #3eaaaf; } .asi-nav-group .asi-nav-group-container .asi-nav-header button:not(:disabled), asi-nav-group .asi-nav-group-container .asi-nav-header button:not(:disabled) { cursor: pointer; } .asi-nav-group .asi-nav-group-container .asi-nav-header button.active, asi-nav-group .asi-nav-group-container .asi-nav-header button.active { background-color: white; border-bottom: 1px solid #3d566f; box-shadow: 0 0 1px #3d566f; color: #3d566f; font-weight: bold; } asi-tinymce, .asi-tinymce { margin: 5px; flex: 1 0 auto; display: flex; flex: 1 1 auto; } asi-tinymce.label-top, .asi-tinymce.label-top { flex-direction: column; } asi-tinymce.label-top .input-label, .asi-tinymce.label-top .input-label { margin: 0 0 5px; } asi-tinymce.label-top-center, .asi-tinymce.label-top-center { flex-direction: column; align-items: center; } asi-tinymce.label-top-center .input-label, .asi-tinymce.label-top-center .input-label { margin: 0 0 5px; } asi-tinymce.label-left, .asi-tinymce.label-left { flex-direction: row; align-items: center; } asi-tinymce.label-left .input-label, .asi-tinymce.label-left .input-label { margin: 0 10px 0 0; } asi-tinymce.label-bottom, .asi-tinymce.label-bottom { flex-direction: column; } asi-tinymce.label-bottom .input-label, .asi-tinymce.label-bottom .input-label { margin: 10px 0 0; order: 1; } asi-tinymce.label-bottom-center, .asi-tinymce.label-bottom-center { flex-direction: column; align-items: center; } asi-tinymce.label-bottom-center .input-label, .asi-tinymce.label-bottom-center .input-label { margin: 10px 0 0; order: 1; } asi-tinymce.label-right, .asi-tinymce.label-right { flex-direction: row; align-items: center; } asi-tinymce.label-right .input-label, .asi-tinymce.label-right .input-label { margin: 0 0 0 10px; order: 1; } asi-tinymce button, .asi-tinymce button { border: 1px solid transparent; color: inherit; text-decoration: none; text-align: left; user-select: none; padding: 0; } asi-tinymce button::-moz-focus-inner, .asi-tinymce button::-moz-focus-inner { padding: 0; border: 0; } asi-tinymce button:not([disabled]), .asi-tinymce button:not([disabled]) { background: none; line-height: initial; } asi-tinymce button:enabled:hover, .asi-tinymce button:enabled:hover { cursor: pointer; } asi-bind-html { display: block; flex: 1 0 auto; } asi-collapse, .asi-collapse { display: flex; flex-direction: column; flex: 0 0 auto; } asi-collapse .collapse-header, .asi-collapse .collapse-header { border: 1px solid transparent; color: inherit; text-decoration: none; text-align: left; user-select: none; padding: 0; outline: none; min-height: 40px; font-size: 20px; background-color: transparent; box-shadow: 0px 0px 1px white; padding-left: 10px; margin-bottom: 1px; } asi-collapse .collapse-header::-moz-focus-inner, .asi-collapse .collapse-header::-moz-focus-inner { padding: 0; border: 0; } asi-collapse .collapse-header:not([disabled]), .asi-collapse .collapse-header:not([disabled]) { background: none; line-height: initial; } asi-collapse .collapse-header:enabled:hover, .asi-collapse .collapse-header:enabled:hover { cursor: pointer; } asi-collapse .collapse-header:focus, .asi-collapse .collapse-header:focus { border-bottom: 1px solid #3eaaaf; } asi-collapse .collapse-header:hover, .asi-collapse .collapse-header:hover { background-color: #3d566f; } asi-collapse .collapse-header:hover:not([disabled]), .asi-collapse .collapse-header:hover:not([disabled]) { color: white; } asi-collapse .collapse-header:not([disabled]), .asi-collapse .collapse-header:not([disabled]) { color: black; } asi-collapse .collapse-panel, .asi-collapse .collapse-panel { border: 1px solid transparent; background-color: transparent; padding-top: 5px; overflow: hidden; padding-left: 10px; margin-top: 5px; margin-bottom: 5px; } asi-fa-icon, .asi-fa-icon { display: flex; margin: 5px; flex: 1 0 auto; flex: 0 0 auto; border: none; } asi-fa-icon.label-top, .asi-fa-icon.label-top { flex-direction: column; } asi-fa-icon.label-top .input-label, .asi-fa-icon.label-top .input-label { margin: 0 0 5px; } asi-fa-icon.label-top-center, .asi-fa-icon.label-top-center { flex-direction: column; align-items: center; } asi-fa-icon.label-top-center .input-label, .asi-fa-icon.label-top-center .input-label { margin: 0 0 5px; } asi-fa-icon.label-left, .asi-fa-icon.label-left { flex-direction: row; align-items: center; } asi-fa-icon.label-left .input-label, .asi-fa-icon.label-left .input-label { margin: 0 10px 0 0; } asi-fa-icon.label-bottom, .asi-fa-icon.label-bottom { flex-direction: column; } asi-fa-icon.label-bottom .input-label, .asi-fa-icon.label-bottom .input-label { margin: 10px 0 0; order: 1; } asi-fa-icon.label-bottom-center, .asi-fa-icon.label-bottom-center { flex-direction: column; align-items: center; } asi-fa-icon.label-bottom-center .input-label, .asi-fa-icon.label-bottom-center .input-label { margin: 10px 0 0; order: 1; } asi-fa-icon.label-right, .asi-fa-icon.label-right { flex-dir