UNPKG

@ishitatsuyuki/oruga-next

Version:

UI components for Vue.js and CSS framework agnostic

2,166 lines (2,112 loc) 46.3 kB
/*! Oruga v0.5.5 | MIT License | github.com/oruga-ui/oruga */ @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { animation-name: fadeOut; } @keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; transform: translate3d(0, 100%, 0); } } .fadeOutDown { animation-name: fadeOutDown; } @keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; transform: translate3d(0, -100%, 0); } } .fadeOutUp { animation-name: fadeOutUp; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { animation-name: fadeIn; } @keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: none; } } .fadeInDown { animation-name: fadeInDown; } @keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } } .fadeInUp { animation-name: fadeInUp; } @keyframes append-animate { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } /** * Vue Transitions */ .fade-enter-active, .fade-leave-active { transition: opacity 150ms ease-out; } .fade-enter, .fade-enter-from, .fade-leave-to { opacity: 0; } .zoom-in-enter-active, .zoom-in-leave-active { transition: opacity 150ms ease-out; } .zoom-in-enter-active .animation-content, .zoom-in-enter-active .animation-content, .zoom-in-leave-active .animation-content, .zoom-in-leave-active .animation-content { transition: transform 150ms ease-out; } .zoom-in-enter, .zoom-in-enter-from, .zoom-in-leave-active { opacity: 0; } .zoom-in-enter .animation-content, .zoom-in-enter .animation-content, .zoom-in-enter-from .animation-content, .zoom-in-enter-from .animation-content, .zoom-in-leave-active .animation-content, .zoom-in-leave-active .animation-content { transform: scale(0.95); } .zoom-out-enter-active, .zoom-out-leave-active { transition: opacity 150ms ease-out; } .zoom-out-enter-active .animation-content, .zoom-out-enter-active .animation-content, .zoom-out-leave-active .animation-content, .zoom-out-leave-active .animation-content { transition: transform 150ms ease-out; } .zoom-out-enter, .zoom-out-enter-from, .zoom-out-leave-active { opacity: 0; } .zoom-out-enter .animation-content, .zoom-out-enter .animation-content, .zoom-out-enter-from .animation-content, .zoom-out-enter-from .animation-content, .zoom-out-leave-active .animation-content, .zoom-out-leave-active .animation-content { transform: scale(1.05); } .slide-next-enter-active, .slide-next-leave-active, .slide-prev-enter-active, .slide-prev-leave-active { transition: transform 250ms cubic-bezier(0.785, 0.135, 0.15, 0.86); } .slide-prev-leave-to, .slide-next-enter { transform: translate3d(-100%, 0, 0); position: absolute; width: 100%; } .slide-prev-enter, .slide-prev-enter-from, .slide-next-leave-to { transform: translate3d(100%, 0, 0); position: absolute; width: 100%; } .slide-down-enter-active, .slide-down-leave-active, .slide-up-enter-active, .slide-up-leave-active { transition: transform 250ms cubic-bezier(0.785, 0.135, 0.15, 0.86); } .slide-up-leave-to, .slide-down-enter { transform: translate3d(0, -100%, 0); position: absolute; height: 100%; } .slide-up-enter, .slide-up-enter-from, .slide-down-leave-to { transform: translate3d(0, 100%, 0); position: absolute; height: 100%; } .slide-enter-active { transition: 150ms ease-out; } .slide-leave-active { transition: 150ms ease-out; transition-timing-function: cubic-bezier(0, 1, 0.5, 1); } .slide-enter-to, .slide-leave { max-height: 100px; overflow: hidden; } .slide-enter, .slide-leave-to { overflow: hidden; max-height: 0; } *, :after, :before { box-sizing: inherit; } html { box-sizing: border-box; } .o-noscroll { position: fixed; overflow-y: hidden; width: 100%; bottom: 0; overflow-x: hidden; overflow-y: scroll; } .o-clipped { overflow: hidden; } /* @docs */ /* @docs */ .o-acp { position: relative; } .o-acp__menu { display: block; width: 100%; position: absolute; left: 0; top: 100%; overflow: auto; z-index: 20; background-color: #ffffff; } .o-acp__menu--top { top: auto; bottom: 100%; } .o-acp__item { display: block; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .o-acp__item-group-title, .o-acp__item--empty { pointer-events: none; } .o-acp--expanded { width: 100%; } /* @docs */ /* @docs */ .o-btn { -moz-appearance: none; -webkit-appearance: none; position: relative; display: inline-flex; cursor: pointer; text-align: center; white-space: nowrap; align-items: center; justify-content: center; vertical-align: top; text-decoration: none; outline: none; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: #445e00; color: #ffffff; } .o-btn__wrapper { margin-left: -0.1875em; margin-right: -0.1875em; display: inline-flex; align-items: center; justify-content: center; position: relative; width: 100%; } .o-btn__wrapper > * { margin-left: 0.1875em; margin-right: 0.1875em; } .o-btn__label { width: 100%; } .o-btn--expanded { width: 100%; } .o-btn--disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .o-btn--outlined { background-color: transparent; border-color: #445e00; color: #445e00; } .o-btn--outlined:hover { border-color: transparent; background-color: #445e00; color: #ffffff; } .o-btn--inverted { background-color: #ffffff; border-color: #ffffff; color: #445e00; } .o-btn--inverted:hover { filter: brightness(95%); } /* @docs */ /* @docs */ .o-car { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; overflow: hidden; width: 100%; } .o-car__overlay { bottom: 0; left: 0; right: 0; top: 0; align-items: center; flex-direction: column; justify-content: center; display: flex; max-height: 100vh; position: fixed; z-index: 40; } .o-car__scene { position: relative; width: 100%; } .o-car__items { display: flex; width: 100%; } .o-car__item { flex-shrink: 0; } .o-car__indicators { width: 100%; display: flex; align-items: center; justify-content: center; } .o-car__indicators--inside { position: absolute; } .o-car__indicators--inside--bottom { bottom: 0; } .o-car__indicators--inside--top { top: 0; } .o-car__indicator__item { display: block; outline: none; border: 1px solid #445e00; background: #ffffff; } .o-car__indicator__item--active, .o-car__indicator__item :hover { background: #445e00; border: 1px solid #445e00; } .o-car__indicator__item--boxes { width: 10px; height: 10px; } .o-car__indicator__item--dots { border-radius: 4px; width: 10px; height: 10px; } .o-car__arrow__icon { cursor: pointer; outline: 0; background: #ffffff; color: #445e00; width: 1.5rem; height: 1.5rem; } .o-car__arrow__icon-prev, .o-car__arrow__icon-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; } .o-car__arrow__icon-prev { left: 1.5rem; } .o-car__arrow__icon-next { right: 1.5rem; } /* @docs */ /* @docs */ .o-chk { outline: none; display: inline-flex; align-items: center; cursor: pointer; position: relative; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .o-chk__check { width: 1rem; height: 1rem; outline: none; margin: 0; vertical-align: top; background-position: center; background-size: contain; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-print-color-adjust: exact; color-adjust: exact; flex-shrink: 0; cursor: pointer; background-repeat: no-repeat; border-color: #445e00; border-style: solid; transition-property: background; } .o-chk__check--checked { background-color: #445e00; border-color: #445e00; background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 234 225' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;'%3E%3Cg transform='matrix(4.16667,0,0,4.16667,0,0)'%3E%3Cg transform='matrix(3.13817,0,0,3.13817,-69.2796,-49.5156)'%3E%3Cpath style='fill:%23ffffff' d='M22.504,26.219L28.637,32.386L39.494,18.284L37.348,16.379L28,27.725L24.46,24.196L22.504,26.219Z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .o-chk__check--indeterminate { background-color: #445e00; border-color: #445e00; background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 417 417' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg transform='matrix(4.16667,0,0,4.16667,0,0)'%3E%3Cg transform='matrix(6.96176,0,0,20.5682,-118.661,-806.753)'%3E%3Cpath style='fill:%23ffffff' d='M31.265,41.654C31.265,41.324 30.474,41.057 29.5,41.057L18.953,41.057C17.979,41.057 17.188,41.324 17.188,41.654C17.188,41.984 17.979,42.252 18.953,42.252L29.5,42.252C30.474,42.252 31.265,41.984 31.265,41.654Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .o-chk--disabled { opacity: 0.5; } /* @docs */ /* @docs */ .o-clps__trigger { cursor: pointer; } .o-clps__content { display: inherit; } /* @docs */ /* @docs */ .o-dpck__dropdown { width: 100%; } .o-dpck__box { display: block; position: relative; outline: none; } .o-dpck__header__buttons { align-items: center; display: flex; justify-content: center; text-align: center; } .o-dpck__header__previous, .o-dpck__header__next { justify-content: center; text-align: center; text-decoration: none; cursor: pointer; -moz-appearance: none; -webkit-appearance: none; align-items: center; box-shadow: none; display: inline-flex; position: relative; vertical-align: top; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-color: #dbdbdb; color: #363636; } .o-dpck__header__previous:hover, .o-dpck__header__next:hover { text-decoration: none; } .o-dpck__header__previous { order: 1; } .o-dpck__header__next { order: 3; } .o-dpck__header__list { order: 2; align-items: center; display: flex; justify-content: center; text-align: center; list-style: none; flex-wrap: wrap; margin: 0; padding: 0; margin-left: -0.125rem; margin-right: -0.125rem; } .o-dpck__header__list > * { margin-left: 0.125rem; margin-right: 0.125rem; } .o-dpck__table, .o-dpck__month { display: table; margin: 0 auto 0 auto; } .o-dpck__table__head, .o-dpck__month__head { display: table-header-group; } .o-dpck__table__body, .o-dpck__month__body { display: table-row-group; } .o-dpck__table__row, .o-dpck__month__row { display: table-row; } .o-dpck__table__cell, .o-dpck__month__cell { text-align: center; vertical-align: middle; display: table-cell; text-decoration: none; } .o-dpck__table__cell--unselectable, .o-dpck__month__cell--unselectable { color: #b5b5b5; } .o-dpck__table__cell--selectable, .o-dpck__month__cell--selectable { color: #4a4a4a; } .o-dpck__table__cell--first-hovered, .o-dpck__month__cell--first-hovered { background-color: #7a7a7a; color: #dbdbdb; } .o-dpck__table__cell--within-hovered, .o-dpck__month__cell--within-hovered { color: #dbdbdb; } .o-dpck__table__cell--last-hovered, .o-dpck__month__cell--last-hovered { background-color: #7a7a7a; color: #dbdbdb; } .o-dpck__table__cell--selected:not(.o-dpck__table__cell--first-hovered, .o-dpck__month__cell--first-hovered):not(.o-dpck__table__cell--within-hovered, .o-dpck__month__cell--within-hovered):not(.o-dpck__table__cell--last-hovered, .o-dpck__month__cell--last-hovered), .o-dpck__month__cell--selected:not(.o-dpck__table__cell--first-hovered, .o-dpck__month__cell--first-hovered):not(.o-dpck__table__cell--within-hovered, .o-dpck__month__cell--within-hovered):not(.o-dpck__table__cell--last-hovered, .o-dpck__month__cell--last-hovered) { background-color: #445e00; color: #ffffff; } .o-dpck__table__cell--first-selected:not(.o-dpck__table__cell--first-hovered, .o-dpck__month__cell--first-hovered):not(.o-dpck__table__cell--within-hovered, .o-dpck__month__cell--within-hovered):not(.o-dpck__table__cell--last-hovered, .o-dpck__month__cell--last-hovered), .o-dpck__month__cell--first-selected:not(.o-dpck__table__cell--first-hovered, .o-dpck__month__cell--first-hovered):not(.o-dpck__table__cell--within-hovered, .o-dpck__month__cell--within-hovered):not(.o-dpck__table__cell--last-hovered, .o-dpck__month__cell--last-hovered) { background-color: #445e00; color: #ffffff; } .o-dpck__table__cell--within-selected:not(.o-dpck__table__cell--first-hovered, .o-dpck__month__cell--first-hovered):not(.o-dpck__table__cell--within-hovered, .o-dpck__month__cell--within-hovered):not(.o-dpck__table__cell--last-hovered, .o-dpck__month__cell--last-hovered), .o-dpck__month__cell--within-selected:not(.o-dpck__table__cell--first-hovered, .o-dpck__month__cell--first-hovered):not(.o-dpck__table__cell--within-hovered, .o-dpck__month__cell--within-hovered):not(.o-dpck__table__cell--last-hovered, .o-dpck__month__cell--last-hovered) { background-color: rgba(68, 94, 0, 0.5); } .o-dpck__table__cell--last-selected:not(.o-dpck__table__cell--first-hovered, .o-dpck__month__cell--first-hovered):not(.o-dpck__table__cell--within-hovered, .o-dpck__month__cell--within-hovered):not(.o-dpck__table__cell--last-hovered, .o-dpck__month__cell--last-hovered), .o-dpck__month__cell--last-selected:not(.o-dpck__table__cell--first-hovered, .o-dpck__month__cell--first-hovered):not(.o-dpck__table__cell--within-hovered, .o-dpck__month__cell--within-hovered):not(.o-dpck__table__cell--last-hovered, .o-dpck__month__cell--last-hovered) { background-color: #445e00; color: #ffffff; } .o-dpck__table__cell--invisible, .o-dpck__month__cell--invisible { visibility: hidden; } .o-dpck__table__cell--events, .o-dpck__month__cell--events { position: relative; } .o-dpck__table__events, .o-dpck__month__events { display: flex; justify-content: center; position: absolute; width: 100%; left: 0; bottom: 15%; } .o-dpck__table__event, .o-dpck__month__event { background-color: #b5b5b5; } .o-dpck__table__event--dots, .o-dpck__month__event--dots { border-radius: 50%; } .o-dpck__table__event--bars, .o-dpck__month__event--bars { width: 100%; } .o-dpck__month__table { display: inline-flex; flex-wrap: wrap; flex-direction: row; width: 17rem; } .o-dpck__month__cell { display: flex; align-items: center; justify-content: center; width: 33.33%; height: 2.5rem; } .o-dpck--mobile .o-dpck__header__previous { order: 1; flex-grow: 1; flex-shrink: 1; } .o-dpck--mobile .o-dpck__header__next { order: 3; flex-grow: 1; flex-shrink: 1; } .o-dpck--mobile .o-dpck__header__list { order: 2; flex-grow: 1; flex-shrink: 1; } /* @docs */ /* @docs */ .o-dtpck__time { display: flex; justify-content: center; align-items: center; } /* @docs */ /* @docs */ .o-drop { display: inline-flex; position: relative; vertical-align: top; } .o-drop--inline { display: inline; } .o-drop--inline .o-drop__menu { position: static; display: inline-block; padding: 0; } .o-drop__overlay { position: fixed; bottom: 0; left: 0; right: 0; top: 0; cursor: pointer; display: none; background-color: rgba(0, 0, 0, 0.86); z-index: 40; } .o-drop__trigger { width: 100%; } .o-drop__menu { position: absolute; left: 0; top: 100%; display: block; z-index: 20; background-color: #ffffff; } .o-drop__menu--top-left { top: auto; bottom: 100%; right: 0; left: auto; } .o-drop__menu--bottom-left { right: 0; left: auto; } .o-drop__menu--top-right { top: auto; bottom: 100%; } .o-drop__item { display: block; position: relative; outline: none; cursor: pointer; } .o-drop__item--disabled { opacity: 0.5; pointer-events: none; } .o-drop__item--active { background-color: #445e00; color: #ffffff; } .o-drop--expanded { width: 100%; } .o-drop--expanded .o-drop__menu { width: 100%; } .o-drop--disabled { opacity: 0.5; pointer-events: none; } .o-drop--mobile > .o-drop__menu { position: fixed; top: 25%; left: 50%; bottom: auto; right: auto; transform: translate3d(-50%, -25%, 0); overflow-y: auto; z-index: 50; } .o-drop--mobile > .o-drop__overlay { display: block; } /* @docs */ /* @docs */ .o-field { flex-grow: 1; } .o-field__label { display: block; } .o-field__message { display: block; } .o-field--addons { display: flex; justify-content: flex-start; } .o-field--addons > *:first-child:not(:only-child) button, .o-field--addons > button:first-child, .o-field--addons > *:first-child:not(:only-child) input, .o-field--addons > input:first-child, .o-field--addons > *:first-child:not(:only-child) select, .o-field--addons > select:first-child { border-bottom-right-radius: 0; border-top-right-radius: 0; } .o-field--addons > *:last-child:not(:only-child) button, .o-field--addons > button:last-child, .o-field--addons > *:last-child:not(:only-child) input, .o-field--addons > input:last-child, .o-field--addons > *:last-child:not(:only-child) select, .o-field--addons > select:last-child { border-bottom-left-radius: 0; border-top-left-radius: 0; } .o-field--addons > *:not(:first-child):not(:last-child) button, .o-field--addons > button:not(:first-child):not(:last-child), .o-field--addons > *:not(:first-child):not(:last-child) input, .o-field--addons > input:not(:first-child):not(:last-child), .o-field--addons > *:not(:first-child):not(:last-child) select, .o-field--addons > select:not(:first-child):not(:last-child) { border-radius: 0; } .o-field--grouped { display: flex; margin-left: -0.37rem; margin-right: -0.37rem; } .o-field--grouped > * { margin-left: 0.37rem; margin-right: 0.37rem; } .o-field--grouped-multiline { flex-wrap: wrap; } .o-field__horizontal-body { display: flex; flex-basis: 0; flex-grow: 5; flex-shrink: 1; margin-left: -0.37rem; margin-right: -0.37rem; } .o-field__horizontal-body > * { margin-left: 0.37rem; margin-right: 0.37rem; } .o-field--horizontal { display: flex; } .o-field__horizontal-label { flex-basis: 0; flex-grow: 1; flex-shrink: 0; margin: 0 1.5rem 0 0; text-align: right; } .o-field--mobile .o-field__horizontal-body { all: unset; } .o-field--mobile.o-field--horizontal { all: unset; } .o-field--mobile .o-field__horizontal-label { all: unset; } /* @docs */ /* @docs */ @keyframes icon-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } .o-icon { align-items: center; display: inline-flex; justify-content: center; transition: transform 150ms ease-out, opacity 300ms ease-out; } .o-icon--clickable { pointer-events: auto; cursor: pointer; } .o-icon--spin { animation-name: icon-spin; animation-iteration-count: infinite; animation-timing-function: linear; animation-duration: 2s; } /* @docs */ /* @docs */ .o-ctrl-input { display: block; position: relative; } .o-ctrl-input--expanded { width: 100%; flex-grow: 1; flex-shrink: 1; } .o-input { -moz-appearance: none; -webkit-appearance: none; display: inline-flex; position: relative; vertical-align: top; outline: none; width: 100%; } .o-input__textarea { display: block; max-width: 100%; min-width: 100%; height: auto; resize: vertical; } .o-input__counter { display: block; float: right; } .o-input__icon-left, .o-input__icon-right { position: absolute; top: 0; height: 100%; } .o-input__icon-right { right: 0; } .o-input__icon-left { left: 0; } /* @docs */ /* @docs */ .o-inputit { display: block; } .o-inputit__container { display: flex; align-items: center; justify-content: flex-start; position: relative; vertical-align: top; flex-wrap: wrap; border-color: #dbdbdb; border-style: solid; border-width: 1px; color: #363636; } .o-inputit__autocomplete { position: static; flex: 1; } .o-inputit__input { border: none; box-shadow: none; } .o-inputit__input:focus { box-shadow: none; } .o-inputit__item { display: inline-flex; justify-content: center; align-items: center; position: relative; margin-left: -0.1875em; margin-right: -0.1875em; background-color: #445e00; color: #ffffff; } .o-inputit__item > * { margin-left: 0.1875em; margin-right: 0.1875em; } .o-inputit__counter { display: block; float: right; } .o-inputit--expanded { width: 100%; flex-grow: 1; flex-shrink: 1; } /* @docs */ /* @docs */ .o-load { position: absolute; bottom: 0; left: 0; right: 0; top: 0; align-items: center; display: flex; justify-content: center; overflow: hidden; } .o-load--fullpage { position: fixed; } .o-load__overlay { position: absolute; bottom: 0; left: 0; right: 0; top: 0; } /* @docs */ /* @docs */ .o-modal { display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; position: fixed; bottom: 0; left: 0; right: 0; top: 0; z-index: 40; } .o-modal__overlay { bottom: 0; left: 0; position: absolute; right: 0; top: 0; background-color: rgba(10, 10, 10, 0.86); } .o-modal__content { position: relative; max-height: calc(100vh - 160px); overflow: auto; background-color: #ffffff; } .o-modal__content--full-screen { width: 100%; height: 100%; max-height: 100vh; margin: 0; } .o-modal__close { background: none; position: fixed; border: none; display: inline-block; outline: none; vertical-align: top; right: 20px; top: 20px; } .o-modal--mobile .o-modal__content { width: 100%; } /* @docs */ /* @docs */ .o-notification { background-color: #445e00; color: #ffffff; position: relative; transform-origin: 50% 0; } .o-notification__content { flex-basis: auto; flex-grow: 1; flex-shrink: 1; text-align: inherit; overflow-y: hidden; overflow-x: auto; } .o-notification__wrapper { align-items: flex-start; display: flex; text-align: inherit; padding-top: 0; border: 0; } .o-notification__icon { flex-basis: auto; flex-grow: 0; flex-shrink: 0; } .o-notification__close { position: absolute; border: none; cursor: pointer; pointer-events: auto; display: flex; justify-content: center; align-items: center; flex-grow: 0; flex-shrink: 0; outline: none; vertical-align: top; right: 0.5rem; top: 0.5rem; } .o-notices { position: fixed; display: flex; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; pointer-events: none; padding: 2em; z-index: 1000; } .o-notices .o-notification { pointer-events: stroke; max-width: 600px; } .o-notices .o-notification--top, .o-notices .o-notification--bottom { align-self: center; } .o-notices .o-notification--top-right, .o-notices .o-notification--bottom-right { align-self: flex-end; } .o-notices .o-notification--top-left, .o-notices .o-notification--bottom-left { align-self: flex-start; } .o-notices--top { flex-direction: column; } .o-notices--bottom { flex-direction: column-reverse; } .o-notices--bottom .o-notification { margin-bottom: 0; } .o-notices--bottom .o-notification:not(:first-child) { margin-bottom: 1.5rem; } .o-notices.has-custom-container { position: absolute; } /* @docs */ /* @docs */ .o-pag { align-items: center; display: flex; justify-content: center; text-align: center; justify-content: space-between; } .o-pag__link { -moz-appearance: none; -webkit-appearance: none; align-items: center; box-shadow: none; display: inline-flex; position: relative; vertical-align: top; justify-content: center; text-align: center; text-decoration: none; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .o-pag__link:hover { text-decoration: none; } .o-pag__link--disabled { pointer-events: none; } .o-pag__link--current { pointer-events: none; background-color: #445e00; border-color: #445e00; color: #fff; } .o-pag__ellipsis { justify-content: center; text-align: center; pointer-events: none; } .o-pag--simple { justify-content: normal; } .o-pag--centered { justify-content: center; } .o-pag--centered .o-pag__previous { order: 1; } .o-pag--centered .o-pag__next { order: 3; } .o-pag--centered .o-pag__list { justify-content: center; order: 2; } .o-pag--right { justify-content: flex-end; } .o-pag--right .o-pag__previous { order: 1; } .o-pag--right .o-pag__next { order: 2; } .o-pag--right .o-pag__list { justify-content: flex-end; order: 2; } .o-pag__next { order: 3; } .o-pag__previous { order: 2; } .o-pag__list { align-items: center; display: flex; justify-content: center; text-align: center; list-style: none; flex-wrap: wrap; margin: 0; padding: 0; flex-grow: 1; flex-shrink: 1; justify-content: flex-start; order: 1; } .o-pag--mobile { justify-content: flex-start; flex-wrap: wrap; } .o-pag--mobile .o-pag__link { flex-grow: 1; flex-shrink: 1; } .o-pag--mobile .o-pag__previous { flex-grow: 1; flex-shrink: 1; order: 0; } .o-pag--mobile .o-pag__next { flex-grow: 1; flex-shrink: 1; order: 0; } .o-pag--mobile .o-pag__ellipsis { flex-grow: 1; flex-shrink: 1; } .o-pag--mobile .o-pag__list { order: 0; } /* @docs */ /* @docs */ .o-radio { outline: none; display: inline-flex; align-items: center; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .o-radio__check { width: 1rem; height: 1rem; margin: 0; vertical-align: top; outline: none; background-position: center; background-size: contain; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-print-color-adjust: exact; color-adjust: exact; border-radius: 50%; cursor: pointer; background-repeat: no-repeat; transition-property: background; background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 100 100' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg transform='matrix(10.1032,0,0,10.1032,-255.068,-313.298)'%3E%3Ccircle cx='30.195' cy='35.959' r='4.85' style='fill:%23445e00;'/%3E%3C/g%3E%3C/svg%3E"); } .o-radio__check--checked { background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 100 100' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg transform='matrix(4.38544,0,0,4.38544,-94.4336,-58.9876)'%3E%3Cpath d='M32.935,13.679C39.102,13.679 44.108,18.685 44.108,24.852C44.108,31.019 39.102,36.025 32.935,36.025C26.768,36.025 21.761,31.019 21.761,24.852C21.761,18.685 26.768,13.679 32.935,13.679ZM32.798,17.05C37.105,17.05 40.601,20.546 40.601,24.852C40.601,29.158 37.105,32.655 32.798,32.655C28.492,32.655 24.996,29.158 24.996,24.852C24.996,20.546 28.492,17.05 32.798,17.05Z' style='fill:%23445e00;'/%3E%3Ccircle cx='32.84' cy='24.8' r='7.9' style='fill:transparent;'/%3E%3C/g%3E%3C/svg%3E"); } .o-radio--disabled { opacity: 0.5; } /* @docs */ /* @docs */ .o-ctrl-sel { display: inline-flex; position: relative; } .o-ctrl-sel--expanded { width: 100%; flex-grow: 1; flex-shrink: 1; } .o-sel { -moz-appearance: none; -webkit-appearance: none; display: inline-block; position: relative; vertical-align: top; cursor: pointer; justify-content: flex-start; align-items: center; outline: none; } .o-sel-arrow { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:serif='http://www.serif.com/' width='100%25' height='100%25' viewBox='0 0 100 100' version='1.1' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;'%3E%3Cg transform='matrix(5.70052,0,0,5.70052,-1329.79,-547.054)'%3E%3Cpath d='M233.451,101.749L235.617,99.422L242.013,105.565L248.463,99.422L250.642,101.749L242.013,110.052L233.451,101.749Z' style='fill:;stroke:white;stroke-width:0.18px;'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 1rem; background-position: calc(100% - 1rem * 0.5) center; padding-right: calc(1rem * 2); } .o-sel--multiple { height: auto; padding: 0; } .o-sel__icon-left, .o-sel__icon-right { position: absolute; top: 0; height: 100%; } .o-sel__icon-right { right: 0; } .o-sel__icon-left { left: 0; } /* @docs */ /* @docs */ @keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .o-sklt { display: inline-flex; flex-direction: column; vertical-align: middle; width: 100%; } .o-sklt__item { width: 100%; background: linear-gradient(90deg, #dbdbdb 25%, rgba(219, 219, 219, 0.5) 50%, #dbdbdb 75%); } .o-sklt__item--animated { background-size: 400% 100%; animation-name: skeleton-loading; animation-iteration-count: infinite; animation-duration: 1.5s; } .o-sklt__item::after { content: " "; } .o-sklt--centered { align-items: center; } .o-sklt--right { align-items: flex-end; } /* @docs */ /* @docs */ .o-side__content { background-color: #dbdbdb; z-index: calc(38 + 1); } .o-side__content--fixed { position: fixed; left: 0; top: 0; } .o-side__content--absolute { position: absolute; left: 0; top: 0; } .o-side__content--right { left: auto; right: 0; } .o-side__content--mini-expand:hover { transition: width; } .o-side__content--static { position: static; } .o-side__content--absolute, .o-side__content--static { transition: width 150ms ease-out; } .o-side__content--fullwidth { width: 100%; max-width: 100%; } .o-side__content--fullheight { height: 100%; max-height: 100%; overflow: hidden; overflow-y: auto; display: flex; flex-direction: column; align-content: stretch; } .o-side__overlay { bottom: 0; left: 0; right: 0; top: 0; position: fixed; background: rgba(10, 10, 10, 0.86); z-index: 38; } /* @docs */ /* @docs */ .o-slide { background: transparent; width: 100%; } .o-slide__thumb { border: 1px solid #b5b5b5; background: #ffffff; } .o-slide__thumb--dragging { cursor: grabbing; filter: brightness(0.8); } .o-slide__track { display: flex; align-items: center; position: relative; cursor: pointer; background: #dbdbdb; } .o-slide__fill { position: absolute; height: 100%; background: #445e00; top: 50%; transform: translateY(-50%); } .o-slide .o-slide__track { height: 0.5rem; } .o-slide .o-slide__thumb { height: 1rem; width: 1rem; } .o-slide .o-slide__tick-label { position: absolute; left: 50%; transform: translateX(-50%); } .o-slide__tick { position: absolute; transform: translate(-50%, -50%); top: 50%; width: 3px; background: #445e00; } .o-slide__tick--hidden { background: transparent; } .o-slide__thumb-wrapper { display: inline-flex; align-items: center; position: absolute; cursor: grab; transform: translate(-50%, -50%); top: 50%; flex-direction: column; } .o-slide--disabled { cursor: not-allowed; pointer-events: none; } /* @docs */ /* @docs */ .o-steps { display: flex; flex-wrap: wrap; margin: 0; padding: 0; } .o-steps .o-steps__title { background-color: white; text-align: center; z-index: 1; } .o-steps .o-steps__wrapper-vertical .o-steps--label-left .o-steps__divider { left: auto; } .o-steps .o-steps__wrapper-vertical.o-steps__wrapper-position-right .o-steps--label-left .o-steps__divider { left: auto; } .o-steps__nav-item { margin: 0; padding: 0; margin-top: 0; position: relative; flex-grow: 1; flex-basis: 1em; } .o-steps__divider { background: linear-gradient(to left, #dbdbdb 50%, #445e00 50%); background-size: 200% 100%; background-position: right bottom; content: " "; display: block; position: absolute; bottom: 0; left: -50%; width: 100%; } .o-steps__content { position: relative; overflow: visible; display: flex; flex-direction: column; } .o-steps__content-transitioning { overflow: hidden; } .o-steps--animated .o-steps__divider { transition-property: background; } .o-steps__link { display: flex; align-items: center; justify-content: center; flex-direction: column; cursor: pointer; text-decoration: none; } .o-steps__link-label-right { flex-direction: row; } .o-steps__link-label-left { flex-direction: row-reverse; } .o-steps__link:hover { text-decoration: none; } .o-steps__link:not(.o-steps__link-clickable) { cursor: not-allowed; } .o-steps__marker { align-items: center; display: flex; justify-content: center; background: #b5b5b5; color: #ffffff; border: 0.2em solid #fff; z-index: 1; overflow: hidden; } .o-steps__details { background-color: white; text-align: center; z-index: 1; } .o-steps__nav-item-active .o-steps__link { cursor: default; } .o-steps__nav-item-active .o-steps__marker { background-color: #ffffff; border-color: #445e00; color: #445e00; } .o-steps__nav-item-active .o-steps__divider { background-position: left bottom; } .o-steps__nav-item-previous .o-steps__marker { color: #ffffff; background-color: #445e00; } .o-steps__nav-item-previous .o-steps__divider { background-position: left bottom; } .o-steps__item { flex-shrink: 0; flex-basis: auto; } .o-steps__wrapper-vertical { display: flex; flex-direction: row; flex-wrap: wrap; } .o-steps__wrapper-vertical .o-steps { height: 100%; flex-direction: column; } .o-steps__wrapper-vertical .o-steps__divider { height: 100%; top: -50%; left: calc(50% - 0.1em); } .o-steps__wrapper-vertical .o-steps__item-active .o-steps__divider, .o-steps__wrapper-vertical .o-steps__item-previous .o-steps__divider { background-position: right top; } .o-steps__wrapper-vertical .o-steps__nav-item { width: 100%; display: flex; align-items: center; justify-content: center; } .o-steps__wrapper-vertical .o-steps__content { flex-grow: 1; flex-basis: 70%; } .o-steps__wrapper-vertical .o-steps__navigation { flex-basis: 100%; } .o-steps__wrapper-vertical.o-steps__wrapper-position-right { flex-direction: row-reverse; } .o-steps--mobile .o-steps__title { display: none; padding: 0; } /* @docs */ /* @docs */ .o-switch { cursor: pointer; display: inline-flex; align-items: center; position: relative; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .o-switch--left { flex-direction: row-reverse; } .o-switch--left .o-switch__label { margin-left: 0; } .o-switch__check-switch { content: ""; display: block; height: calc((2.75em - 0.2em * 2) * 0.5); width: calc((2.75em - 0.2em * 2) * 0.5); background: #f5f5f5; transition-property: transform; will-change: transform; transform-origin: left; } .o-switch__check { display: flex; align-items: center; flex-shrink: 0; width: 2.75em; height: calc(2.75em * 0.5 + 0.2em); padding: 0.2em; background: #b5b5b5; transition-property: background; } .o-switch__check--checked { background: #445e00; } .o-switch__check--checked .o-switch__check-switch { transform: translate3d(100%, 0, 0); } .o-switch__input { position: absolute; left: 0; opacity: 0; outline: none; z-index: -1; } .o-switch--rounded { border-radius: 9999px; } .o-switch--disabled { opacity: 0.5; } /* @docs */ /* @docs */ .o-table { display: table; width: 100%; border-collapse: separate; border-spacing: 0; } .o-table__root { position: relative; } .o-table__wrapper { transition: opacity 300ms ease-out; position: relative; } .o-table__wrapper--sticky-header { overflow-y: auto; } .o-table__wrapper--sticky-header th { position: -webkit-sticky; position: sticky; left: 0; top: 0; } .o-table__wrapper--scrollable { -webkit-overflow-scrolling: touch; overflow-x: auto; max-width: 100%; } .o-table__wrapper--mobile { overflow-x: auto; } .o-table__wrapper--mobile .o-table__mobile-sort { display: block; } .o-table__wrapper--mobile .o-table { background-color: transparent; } .o-table__wrapper--mobile thead tr { box-shadow: none; border-width: 0; } .o-table__wrapper--mobile thead tr th { display: none; } .o-table__wrapper--mobile thead tr .o-table-th-checkbox { display: block; width: 100%; text-align: right; border: 0; } .o-table__wrapper--mobile tfoot th { border: 0; display: inherit; } .o-table__wrapper--mobile tr { max-width: 100%; position: relative; display: block; } .o-table__wrapper--mobile tr td { border: 0; display: inherit; } .o-table__wrapper--mobile tr td:last-child { border-bottom: 0; } .o-table__wrapper--mobile tr:not(.o-table__tr--selected) { background: inherit; background: #fff; } .o-table__wrapper--mobile tr:not(.o-table__tr--selected):hover { background-color: inherit; background-color: #fff; } .o-table__wrapper--mobile tr:not(.o-table--detailed):not(.o-table--empty):not(.o-table__footer) td { display: flex; width: auto; justify-content: space-between; text-align: right; } .o-table__wrapper--mobile tr:not(.o-table--detailed):not(.o-table--empty):not(.o-table__footer) td:before { content: attr(data-label); } .o-table__mobile-sort { display: none; } .o-table__th { vertical-align: top; text-align: left; position: relative; } .o-table__th--centered { text-align: center; } .o-table__th--right { text-align: right; } .o-table__th__sort-icon { position: absolute; right: 0; } .o-table__th--sortable { cursor: pointer; } .o-table__th--sticky { position: -webkit-sticky; position: sticky; left: 0; top: 0; } .o-table__th--unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .o-table__td { vertical-align: top; text-align: left; } .o-table__td--sticky { position: -webkit-sticky; position: sticky; left: 0; } .o-table__td--right { text-align: right; } .o-table__td--centered { text-align: center; } .o-table__td-chevron { vertical-align: middle; } .o-table__tr--selected { background-color: #445e00; color: #ffffff; } .o-table__pagination { align-items: center; justify-content: space-between; display: flex; } .o-table__pagination > div:first-child { align-items: center; justify-content: flex-start; } .o-table__pagination > div:last-child { align-items: center; justify-content: flex-end; } .o-table__pagination > div:last-child > div { align-items: center; display: flex; flex-basis: auto; flex-grow: 0; flex-shrink: 0; justify-content: center; } .o-table__pagination > div { flex-basis: auto; flex-grow: 0; flex-shrink: 0; } /* @docs */ /* @docs */ .o-tabs--fullwidth { width: 100%; } .o-tabs--fullwidth .o-tabs__nav-item-wrapper { flex-grow: 1; flex-shrink: 0; } .o-tabs--fullwidth .o-tabs__nav-item-default, .o-tabs--fullwidth .o-tabs__nav-item-boxed, .o-tabs--fullwidth .o-tabs__nav-item-toggle { height: 100%; } .o-tabs--vertical { display: flex; flex-direction: row; } .o-tabs--vertical .o-tabs__nav { flex-direction: column; align-items: stretch; flex-grow: 0; border-bottom: none; } .o-tabs--vertical .o-tabs__nav-item-boxed { border-bottom-color: transparent; } .o-tabs--vertical .o-tabs__nav-item-boxed--active { border-right-color: transparent; } .o-tabs--right { flex-direction: row-reverse; } .o-tabs--right .o-tabs__nav-item-boxed { border-bottom-color: transparent; border-right-color: transparent; } .o-tabs--right .o-tabs__nav-item-boxed--active { border-left-color: transparent; } .o-tabs__nav { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin: 0; padding: 0; align-items: center; display: flex; flex-grow: 1; flex-shrink: 0; justify-content: flex-start; overflow-x: auto; } .o-tabs__nav--centered { justify-content: center; } .o-tabs__nav--right { justify-content: flex-end; } .o-tabs__nav-item-default { -moz-appearance: none; -webkit-appearance: none; outline: none; width: 100%; margin: 0; padding: 0; border: 1px solid transparent; background-color: transparent; align-items: center; line-height: 1.5; color: #4a4a4a; display: flex; justify-content: center; margin-bottom: -1px; vertical-align: top; cursor: pointer; text-decoration: none; } .o-tabs__nav-item-default--active { border-bottom-color: #445e00; color: #445e00; } .o-tabs__nav-item-default--disabled { pointer-events: none; cursor: not-allowed; opacity: 0.5; } .o-tabs__nav-item-boxed { -moz-appearance: none; -webkit-appearance: none; outline: none; width: 100%; margin: 0; padding: 0; border: 1px solid transparent; background-color: transparent; align-items: center; line-height: 1.5; color: #4a4a4a; display: flex; justify-content: center; margin-bottom: -1px; vertical-align: top; cursor: pointer; text-decoration: none; border-bottom-color: transparent; } .o-tabs__nav-item-boxed--active { border-bottom-color: #445e00; color: #445e00; } .o-tabs__nav-item-boxed--disabled { pointer-events: none; cursor: not-allowed; opacity: 0.5; } .o-tabs__nav-item-toggle { -moz-appearance: none; -webkit-appearance: none; outline: none; width: 100%; margin: 0; padding: 0; border: 1px solid transparent; background-color: transparent; align-items: center; line-height: 1.5; color: #4a4a4a; display: flex; justify-content: center; margin-bottom: -1px; vertical-align: top; cursor: pointer; text-decoration: none; margin-bottom: 0; position: relative; } .o-tabs__nav-item-toggle--disabled { pointer-events: none; cursor: not-allowed; opacity: 0.5; } .o-tabs__content { position: relative; overflow: visible; display: flex; flex-direction: column; flex-grow: 1; } .o-tabs__content--transitioning { overflow: hidden; } /* @docs */ /* @docs */ .o-tpck__dropdown { width: 100%; } .o-tpck__box { display: flex; justify-content: center; align-items: center; } .o-tpck__select { -moz-appearance: none; -webkit-appearance: none; display: inline-block; position: relative; vertical-align: top; cursor: pointer; justify-content: flex-start; align-items: center; outline: none; border: 0; font-size: inherit; } .o-tpck__select-placeholder { opacity: 0.5; } /* @docs */ /* @docs */ .o-tip { position: relative; display: inline-flex; } .o-tip__arrow--top { top: 100%; right: auto; bottom: auto; left: 50%; transform: translateX(-50%); border-top-style: solid; border-top-width: 5px; border-right-style: solid; border-right-color: transparent; border-left-style: solid; border-left-color: transparent; border-right-width: 5px; border-left-width: 5px; } .o-tip__content--top { top: auto; right: auto; bottom: calc((5px + 2px) + 100%); left: 50%; transform: translateX(-50%); } .o-tip__arrow--right { top: 50%; right: 100%; bottom: auto; left: auto; transform: translateY(-50%); border-right-style: solid; border-right-width: 5px; border-top-style: solid; border-top-color: transparent; border-bottom-style: solid; border-bottom-color: transparent; border-top-width: 5px; border-bottom-width: 5px; } .o-tip__content--right { top: 50%; right: auto; bottom: auto; left: calc((5px + 2px) + 100%); transform: translateY(-50%); } .o-tip__arrow--bottom { top: auto; right: auto; bottom: 100%; left: 50%; transform: translateX(-50%); border-bottom-style: solid; border-bottom-width: 5px; border-right-style: solid; border-right-color: transparent; border-left-style: solid; border-left-color: transparent; border-right-width: 5px; border-left-width: 5px; } .o-tip__content--bottom { top: calc((5px + 2px) + 100%); right: auto; bottom: auto; left: 50%; transform: translateX(-50%); } .o-tip__arrow--left { top: 50%; right: auto; bottom: auto; left: 100%; transform: translateY(-50%); border-left-style: solid; border-left-width: 5px; border-top-style: solid; border-top-color: transparent; border-bottom-style: solid; border-bottom-color: transparent; border-top-width: 5px; border-bottom-width: 5px; } .o-tip__content--left { top: 50%; right: calc((5px + 2px) + 100%); bottom: auto; left: auto; transform: translateY(-50%); } .o-tip__arrow { position: absolute; content: ""; pointer-events: none; z-index: 38; color: #445e00; } .o-tip__content { position: absolute; white-space: nowrap; z-index: 38; background-color: #445e00; } .o-tip__content--always { opacity: 1; visibility: visible; } .o-tip__content--multiline { text-align: center; white-space: normal; } .o-tip__trigger { width: 100%; } /* @docs */ /* @docs */ .o-upl { position: relative; display: inline-flex; } .o-upl--disabled { cursor: not-allowed; } .o-upl--expanded { width: 100%; } .o-upl__draggable { cursor: pointer; width: 100%; } .o-upl input[type=file] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; outline: none; cursor: pointer; z-index: -1; }