@yoobic/yobi 8.4.0-0 → 8.4.0-3

package/dist/collection/components/3.organisms/modal/modal.css

@@ -1,644 +0,0 @@
-/* app direction */
-/* border-radius */
-/* border-width */
-/* font family */
-/* font-size */
-/* font weights */
-/* icon size */
-/* used for logos */
-/* spacing for padding, margin, etc... */
-/* shadow */
-/* Z-Index (Ionic)
---------------------------------------------------
-Grouped by elements which would be siblings */
-/* Hairlines width */
-/* Default Colors
----------------------------------- */
-/* Private color variables */
-/* #3880ff; */
-/* #3880ff; */
-/* #3880ff; */
-/* #3880ff; */
-/* #3880ff;*/
-/* #3880ff; */
-/* #3880ff; */
-/* #3880ff; */
-/* #3880ff; */
-/* Color map should provide
-- base: main color to be used.
-- contrast: Color that will provide readable text against the base color
-- shade: 12% darker version of the base color (mix with black)
-- tint: 10% lighter version of the base color (mix with white) */
-/* Themed Colors
-
- Default Foreground and Background Colors values
- Allows users to override an foreground / background colors
- $background-color-value:            $light !default;
- $background-color-rgb:              255, 255, 255 !default; */
-/* Default Foreground and Background Colors
--------------------------------------------------- */
-/* Default General Colors
--------------------------------------------------- */
-/* Default List & List Items
--------------------------------------------------- */
-/* Item Divider */
-/* iOS List & List Items
--------------------------------------------------- */
-/* Default Toolbar
---------------------------------------------------*/
-/* iOS Toolbar
---------------------------------------------------*/
-/* Default Tabs & Tab bar
---------------------------------------------------*/
-/* iOS Tabs & Tab bar
---------------------------------------------------*/
-/* Function related variables
---------------------------------------------------*/
-/* Gets the active color's css variable from a variation. Alpha is optional.
---------------------------------------------------------------------------------------------
-Example usage:
-current-color(base) => var(--ion-color-base)
-current-color(contrast, 0.1) => rgba(var(--ion-color-contrast-rgb), 0.1)
---------------------------------------------------------------------------------------------*/
-/* Gets the specific color's css variable from the name and variation. Alpha/rgb are optional.
---------------------------------------------------------------------------------------------
-Example usage:
-ion-color(primary, base) => var(--ion-color-primary, #3880ff)
-ion-color(secondary, contrast) => var(--ion-color-secondary-contrast)
-ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5)
---------------------------------------------------------------------------------------------*/
-/* Mixes a color with black to create its shade.
---------------------------------------------------------------------------------------------*/
-/*Mixes a color with white to create its tint.
---------------------------------------------------------------------------------------------*/
-/* Converts a color to a comma separated rgb.
---------------------------------------------------------------------------------------------*/
-/* Str functions.
-___________________________________________________________________________________________*/
-/* Creates a pulse animation.
-  @param {color} $begin-color [stable-20] - starting color for pulse.
-  @param {color} $end-color [stable-20] - ending color for pulse.
-  @author Ben Morgan
-  @author Damien Arondel 
-*/
-/* Execute a content if the hover state is supported.
-
- @content the content to execute if relevant
- @author Ben Morgan
- @author Damien Arondel
-*/
-/* Properly hide overflow on rounded corner elements for Webkit based browsers.
- This mixin must be used at the same level as `overflow: hidden` and `border-radius: ...`.
-
- @link https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7
- @author Ben Morgan
- @author Damien Arondel
-*/
-/* Truncate every overflown elements with an ellipsis.
- This mixin does not work with flex box on the same level.
-
- @author Ben Morgan
- @author Damien Arondel
-*/
-/* Truncate text at a specific number of lines.
- */
-/* app direction */
-/* border-radius */
-/* border-width */
-/* font family */
-/* font-size */
-/* font weights */
-/* icon size */
-/* used for logos */
-/* spacing for padding, margin, etc... */
-/* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
-/* Text Direction - ltr / rtl
-$app-direction: multi | rtl | ltr | null (default)
-multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.
-rtl: Always assumes rtl and only includes rtl css. No [dir] selectors.
-ltr: Always assumes ltr and only includes ltr css. No [dir] selectors.
-null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override ltr defaults.
----------------------------------------------------------- */
-/* Add property horizontal
- @param {string} $start
- @param {string} $end
-----------------------------------------------------------*/
-/* Add property for all directions
-  @param {string} $prop
-  @param {string} $top
-  @param {string} $end
-  @param {string} $bottom
-  @param {string} $start
-  @param {boolean} $content include content or use default
-----------------------------------------------------------*/
-/* Add margin for all directions
-  @param {string} $top
-  @param {string} $end
-  @param {string} $bottom
-  @param {string} $start
-----------------------------------------------------------*/
-/* Add padding for all directions
-  @param {string} $top
-  @param {string} $end
-  @param {string} $bottom
-  @param {string} $start
-----------------------------------------------------------*/
-/*Font smoothing
---------------------------------------------------*/
-/* SVG Background Image Mixin
-  @param {string} $svg
-----------------------------------------------------------*/
-/* Add padding horizontal
-  @param {string} $start
-  @param {string} $end
-----------------------------------------------------------*/
-/* Add margin horizontal
- @param {string} $start
- @param {string} $end
-----------------------------------------------------------*/
-/* Add safe area padding horizontal
-  @param {string} $start
-  @param {string} $end
-----------------------------------------------------------*/
-/* Add border radius for all directions
-  @param {string} $top-start
-  @param {string} $top-end
-  @param {string} $bottom-end
-  @param {string} $bottom-start
-----------------------------------------------------------*/
-/* Sets correct text align with support for old browsers
-  @param {string} $direction - text direction
-  @param {string} $decorator - !important
-----------------------------------------------------------*/
-/* Add position for all directions
-  @param {string} $top
-  @param {string} $end
-  @param {string} $bottom
-  @param {string} $start
-----------------------------------------------------------*/
-/* Add position horizontal
-  @param {string} $start - amount to position start
-  @param {string} $end - amount to left: 0; end
-----------------------------------------------------------*/
-/**
- * NOTE DO NOT USE FOR NEW COMPONENTS
- * LEGACY CODE -- Styles maintained only to prevent breaking changes
- * For all Font Sizes please use the appropreate font-size-XX Variables.
- */
-/**
-* Global style mixin for being able to change the background / font-color and border-color
-* programmatically using global classes
-*/
-/* app direction */
-/* border-radius */
-/* border-width */
-/* font family */
-/* font-size */
-/* font weights */
-/* icon size */
-/* used for logos */
-/* spacing for padding, margin, etc... */
-/* shadow */
-:host.padding .outer-container .modal-body {
-  padding: 1rem;
-}
-:host .outer-container {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  background: var(--light, #ffffff);
-  border-radius: 0.3125rem;
-}
-:host .outer-container .modal-header {
-  background-clip: padding-box;
-  -webkit-border-top-left-radius: 0.3125rem;
-  border-top-left-radius: 0.3125rem;
-  -webkit-border-top-right-radius: 0.3125rem;
-  border-top-right-radius: 0.3125rem;
-  z-index: 10;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.75rem;
-  color: var(--dark, #000000);
-  border-bottom: var(--border-width-01, 0.0625rem) solid var(--stable-40, rgba(173, 173, 173, 0.4));
-}
-:host .outer-container .modal-header .inner-header {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  flex: 1;
-  padding: 0 1rem;
-  text-align: center;
-}
-:host .outer-container .modal-header .modal-heading {
-  font-weight: var(--font-weight-400, 400);
-  font-size: var(--font-size-18, 1.125rem);
-}
-:host .outer-container .modal-header .icon {
-  padding: 0.5rem;
-  cursor: pointer;
-}
-:host .outer-container .modal-header .close-icon {
-  padding-right: 0.5rem;
-  cursor: pointer;
-}
-:host .outer-container .modal-header .hide-icon {
-  color: transparent;
-}
-:host .outer-container .modal-body {
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  min-height: 10.9375rem;
-}
-:host .outer-container .modal-body .modal-scroll-container {
-  width: 100%;
-  height: 100%;
-}
-:host .outer-container .modal-body .modal-scroll-container .bg-stable-ultralight {
-  background: var(--stable-ultralight, #fafafa);
-}
-:host .outer-container .modal-body .modal-content {
-  width: 100%;
-}
-:host .outer-container .modal-footer {
-  z-index: 1;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 1rem;
-  box-shadow: var(--input-bar-shadow, 0 0.0625rem 0.625rem 0 rgba(0, 0, 0, 0.15));
-}
-:host .outer-container .modal-footer .footer-buttons {
-  display: flex;
-  flex: 1 1 33%;
-  flex-direction: row;
-  align-content: center;
-  align-items: center;
-  justify-content: flex-end;
-}
-:host .outer-container .modal-footer .footer-buttons .primary-button,
-:host .outer-container .modal-footer .footer-buttons .secondary-button {
-  padding-top: 0.5rem;
-  padding-right: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-
-:host(.custom-controller) {
-  position: relative;
-  z-index: 2000;
-}
-:host(.custom-controller) .outer-container {
-  height: auto;
-}
-
-:host(.fullscreen) {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  margin-top: 0;
-  margin-left: 0;
-}
-:host(.fullscreen) .outer-container {
-  width: 100%;
-  height: 100%;
-  border-radius: 0rem;
-}
-:host(.fullscreen) .outer-container .modal-header {
-  position: absolute;
-  width: 100%;
-  border-radius: 0rem;
-}
-:host(.fullscreen) .outer-container .modal-body {
-  padding-top: 5.0625rem;
-}
-:host(.fullscreen) .outer-container .modal-footer {
-  position: absolute;
-  bottom: 0rem;
-  width: 100%;
-}
-
-:host(.drawer) {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 66.66%;
-  margin-top: 0;
-  margin-left: 0;
-}
-:host(.drawer) .outer-container {
-  width: 100%;
-  height: 100%;
-  border-radius: 0rem;
-}
-:host(.drawer) .outer-container .modal-header {
-  position: absolute;
-  width: 100%;
-  border-radius: 0rem;
-}
-:host(.drawer) .outer-container .modal-body {
-  padding-top: 5.0625rem;
-}
-:host(.drawer) .outer-container .modal-footer {
-  position: absolute;
-  bottom: 0rem;
-  width: 100%;
-}
-:host(.drawer) .outer-container .modal-header {
-  flex-direction: row-reverse;
-}
-
-:host(.menu) {
-  position: relative;
-  top: 0rem;
-  left: 0rem;
-  width: 100%;
-  height: 100%;
-  margin-top: 0;
-  margin-left: 0;
-}
-:host(.menu) .outer-container {
-  width: 100%;
-  height: 100%;
-  border-radius: 0rem;
-}
-:host(.menu) .outer-container .modal-header {
-  position: absolute;
-  width: 100%;
-  border-radius: 0rem;
-}
-:host(.menu) .outer-container .modal-body {
-  padding-top: 5.0625rem;
-}
-:host(.menu) .outer-container .modal-footer {
-  position: absolute;
-  bottom: 0rem;
-  width: 100%;
-}
-:host(.menu) .outer-container .modal-header {
-  position: relative;
-  flex-direction: row;
-}
-:host(.menu) .outer-container .modal-body {
-  padding-top: 0 !important;
-}
-
-:host(.action-sheet) {
-  position: absolute;
-  top: auto;
-  bottom: 0rem;
-  left: 0rem;
-  width: 100%;
-  margin-top: 0;
-  margin-left: 0;
-}
-:host(.action-sheet) .outer-container {
-  width: 100%;
-  height: 100%;
-  border-radius: 0rem;
-}
-:host(.action-sheet) .outer-container .modal-header {
-  position: absolute;
-  width: 100%;
-  border-radius: 0rem;
-}
-:host(.action-sheet) .outer-container .modal-body {
-  padding-top: 5.0625rem;
-}
-:host(.action-sheet) .outer-container .modal-footer {
-  position: absolute;
-  bottom: 0rem;
-  width: 100%;
-}
-:host(.action-sheet) .outer-container {
-  background-color: transparent;
-  border: none;
-}
-:host(.action-sheet) .outer-container .modal-body {
-  justify-content: center;
-  width: 100%;
-}
-:host(.action-sheet) .outer-container .modal-body > div {
-  width: 100%;
-}
-:host(.action-sheet) .outer-container .modal-body > div div[slot="[modal-content"] {
-  width: 100%;
-}
-
-:host(.language-selector) .outer-container {
-  width: 250px;
-  min-height: 475px;
-  color: var(--text-color, #807f83);
-  border: 0 solid;
-  border-radius: 0.78125rem;
-  box-shadow: var(--attachment-icon-shadow, 0 0.375rem 1.125rem 0 rgba(40, 47, 54, 0.08));
-}
-:host(.language-selector) .outer-container .modal-body {
-  height: 100%;
-  background-color: var(--light, #ffffff);
-  border-radius: 0.78125rem;
-}
-
-:host(.simple) .outer-container .modal-header {
-  background-color: var(--light, #ffffff) !important;
-  border: none;
-}
-:host(.simple) .outer-container .modal-header .modal-heading {
-  font-weight: var(--font-weight-400, 400);
-}
-
-:host(.vertical-menu) .outer-container {
-  background: var(--dark, #000000) !important;
-  border: none !important;
-}
-:host(.vertical-menu) .outer-container .modal-body {
-  width: 100%;
-  color: var(--light, #ffffff);
-  background-color: var(--dark, #000000);
-  padding: 0 !important;
-  padding-top: 5.0625rem !important;
-}
-:host(.vertical-menu) .outer-container .modal-body .row {
-  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-:host(.vertical-menu) .outer-container .modal-body .row a {
-  flex-grow: 1;
-  color: var(--light, #ffffff);
-  text-decoration: none;
-}
-:host(.vertical-menu) .outer-container .modal-body .row a.active {
-  padding-left: 0.75rem;
-  border-left: var(--border-width-04, 0.25rem) solid var(--accent, #276ef1);
-}
-:host(.vertical-menu) .outer-container .modal-body .row a:hover {
-  text-decoration: none;
-  background-color: var(--anthracite, #1a1a1a);
-}
-:host(.vertical-menu) .outer-container .modal-body .row a .item {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding-top: 0.4rem;
-  padding-bottom: 0.4rem;
-  padding-left: 1rem;
-}
-:host(.vertical-menu) .outer-container .modal-body .row a .item img {
-  max-width: 1.5rem;
-  max-height: 1.5rem;
-  margin-right: 1rem;
-}
-:host(.vertical-menu) .outer-container .modal-body .row a .item yoo-icon {
-  margin-right: 1rem;
-  margin-left: auto;
-  transition: all 0.3s;
-}
-:host(.vertical-menu) .outer-container .modal-body .row a .item yoo-icon.chevron-active {
-  transform: rotate(-90deg);
-}
-:host(.vertical-menu) .outer-container .modal-body .row a .item.active {
-  padding-left: 0.75rem;
-  background-color: var(--anthracite, #1a1a1a);
-  border-left: var(--border-width-04, 0.25rem) solid var(--accent, #276ef1);
-}
-:host(.vertical-menu) .outer-container .modal-body .row .sub-container {
-  width: 100%;
-  overflow: hidden;
-  background: var(--dark, #000000);
-}
-:host(.vertical-menu) .outer-container .modal-body .row .sub-container .row-subitems {
-  overflow: hidden;
-  animation: sub-item-appear 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
-}
-:host(.vertical-menu) .outer-container .modal-body .row .sub-container .row-subitems .item {
-  padding-left: 2rem;
-}
-:host(.vertical-menu) .outer-container .modal-body .row .sub-container .row-subitems .item.active {
-  padding-left: 1.75rem;
-  background-color: var(--dark-60, rgba(0, 0, 0, 0.6));
-}
-:host(.vertical-menu) .outer-container .modal-body .row .sub-container .row-subitems .item:hover {
-  background-color: var(--dark-60, rgba(0, 0, 0, 0.6));
-}
-:host(.vertical-menu) .outer-container .modal-body .row.hidden .row-subitems {
-  display: none;
-}
-:host(.vertical-menu) .outer-container .modal-body .row.sub-display {
-  background: var(--anthracite, #1a1a1a);
-}
-:host(.vertical-menu) .outer-container .modal-body .column {
-  display: flex;
-  flex-direction: column;
-}
-
-:host(.modal-input) yoo-input-bar {
-  --padding-input-container: 0;
-  width: 100%;
-}
-:host(.modal-input) .outer-container .modal-footer {
-  height: unset !important;
-  padding: 0.5rem 1rem;
-}
-
-:host(.web) .outer-container .modal-footer {
-  padding: 0;
-  border-top: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
-  box-shadow: none;
-}
-
-:host(.app-color) .outer-container {
-  color: var(--dark, #000000);
-}
-:host(.app-color) .outer-container .modal-header {
-  color: var(--app-color, #5a30f4);
-  background-color: var(--app-color-20, rgba(90, 48, 244, 0.2));
-  border-bottom-color: var(--app-color, #5a30f4);
-}
-:host(.app-color):not(.fullscreen):not(.drawer):not(.menu) .outer-container {
-  border: var(--border-width-01, 0.0625rem) solid var(--app-color, #5a30f4);
-}
-
-:host(.accent) .outer-container {
-  color: var(--dark, #000000);
-}
-:host(.accent) .outer-container .modal-header {
-  color: var(--accent, #276ef1);
-  background-color: var(--accent-20, rgba(39, 110, 241, 0.2));
-  border-bottom-color: var(--accent, #276ef1);
-}
-:host(.accent):not(.fullscreen):not(.drawer):not(.menu) .outer-container {
-  border: var(--border-width-01, 0.0625rem) solid var(--accent, #276ef1);
-}
-
-:host(.success) .outer-container {
-  color: var(--dark, #000000);
-}
-:host(.success) .outer-container .modal-header {
-  color: var(--success, #3aa76d);
-  background-color: var(--success-20, rgba(58, 167, 109, 0.2));
-  border-bottom-color: var(--success, #3aa76d);
-}
-:host(.success):not(.fullscreen):not(.drawer):not(.menu) .outer-container {
-  border: var(--border-width-01, 0.0625rem) solid var(--success, #3aa76d);
-}
-
-:host(.danger) .outer-container {
-  color: var(--dark, #000000);
-}
-:host(.danger) .outer-container .modal-header {
-  color: var(--danger, #d44333);
-  background-color: var(--danger-20, rgba(212, 67, 51, 0.2));
-  border-bottom-color: var(--danger, #d44333);
-}
-:host(.danger):not(.fullscreen):not(.drawer):not(.menu) .outer-container {
-  border: var(--border-width-01, 0.0625rem) solid var(--danger, #d44333);
-}
-
-:host(.info) .outer-container {
-  color: var(--dark, #000000);
-}
-:host(.info) .outer-container .modal-header {
-  color: var(--info, #d84c96);
-  background-color: var(--info-20, rgba(216, 76, 150, 0.2));
-  border-bottom-color: var(--info, #d84c96);
-}
-:host(.info):not(.fullscreen):not(.drawer):not(.menu) .outer-container {
-  border: var(--border-width-01, 0.0625rem) solid var(--info, #d84c96);
-}
-
-:host(.warning) .outer-container {
-  color: var(--dark, #000000);
-}
-:host(.warning) .outer-container .modal-header {
-  color: var(--warning, #ed6e33);
-  background-color: var(--warning-20, rgba(237, 110, 51, 0.2));
-  border-bottom-color: var(--warning, #ed6e33);
-}
-:host(.warning):not(.fullscreen):not(.drawer):not(.menu) .outer-container {
-  border: var(--border-width-01, 0.0625rem) solid var(--warning, #ed6e33);
-}
-
-:host(.dark) .outer-container {
-  color: var(--dark, #000000);
-}
-:host(.dark) .outer-container .modal-header {
-  color: var(--dark, #000000);
-  background-color: var(--stable-40, rgba(173, 173, 173, 0.4));
-  border-bottom-color: var(--dark, #000000);
-}
-:host(.dark):not(.fullscreen):not(.drawer):not(.menu) .outer-container {
-  border: var(--border-width-01, 0.0625rem) solid var(--dark, #000000);
-}