@slite/style/src/misc.css

Slite shared style

.opacity-null {
  opacity: 0;
}
.opacity-smaller {
  opacity: var(--opacity-smaller);
}
.opacity-small {
  opacity: var(--opacity-small);
}
.opacity-normal {
  opacity: var(--opacity-normal);
}
.opacity-large {
  opacity: var(--opacity-large);
}

.opacity-smaller-on-hover:hover {
  opacity: var(--opacity-smaller);
}
.opacity-small-on-hover:hover {
  opacity: var(--opacity-small);
}
.opacity-normal-on-hover:hover {
  opacity: var(--opacity-normal);
}
.opacity-large-on-hover:hover {
  opacity: var(--opacity-large);
}
.opacity-full-on-hover:hover {
  opacity: 1;
}

.placeholder-opacity-half::placeholder {
  opacity: var(--opacity-half);
}
.placeholder-opacity-smaller::placeholder {
  opacity: var(--opacity-smaller);
}
.placeholder-opacity-small::placeholder {
  opacity: var(--opacity-small);
}
.placeholder-opacity-normal::placeholder {
  opacity: var(--opacity-normal);
}
.placeholder-opacity-large::placeholder {
  opacity: var(--opacity-large);
}

.placeholder-bold::placeholder {
  font-weight: bold;
}

.zindex-null {
  z-index: var(--z-index-null);
}
.zindex-small {
  z-index: var(--z-index-small);
}
.zindex-medium {
  z-index: var(--z-index-medium);
}
.zindex-large {
  z-index: var(--z-index-large);
}
.zindex-huge {
  z-index: var(--z-index-huge);
}
.zindex-mega {
  z-index: var(--z-index-mega);
}

/* Design v4 */
.shadow-hovering {
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05), 0 0 20px 0 rgba(0, 0, 0, 0.15);
}

/* legacy below */
.shadow-bottom--small {
  box-shadow: var(--box-shadow-bottom-small);
}
.shadow-right--small {
  box-shadow: var(--box-shadow-right-small);
}
.shadow {
  box-shadow: -1px 1px 0 0 rgba(44, 44, 44, 0.05),
    0 2px 4px 0 rgba(44, 44, 44, 0.15), 0 0 0 1px rgba(44, 44, 44, 0.05);
}
.shadow-on-hover:hover {
  box-shadow: 0 10px 20px 0 rgba(44, 44, 44, 0.05),
    0 2px 4px 0 rgba(44, 44, 44, 0.15), 0 0 0 1px rgba(44, 44, 44, 0.05);
}
.shadow--small,
.shadow-small,
.shadow-small-on-hover:hover {
  box-shadow: var(--box-shadow-small);
}
.shadow-null {
  box-shadow: none;
}
.shadow-smaller,
.shadow-smaller-on-hover:hover {
  box-shadow: var(--box-shadow-smaller);
}
.shadow-medium,
.shadow-medium-on-hover:hover {
  box-shadow: var(--box-shadow-medium);
}
.shadow--normal,
.shadow-normal,
.shadow-normal-on-hover:hover {
  box-shadow: var(--box-shadow-normal);
}
.shadow--large,
.shadow-large,
.shadow-large-on-hover:hover {
  box-shadow: var(--box-shadow-large);
}
.inset-shadow-on-hover:hover {
  box-shadow: inset 0px -12px 14px var(--primary-dark);
}

.pointer {
  cursor: pointer;
}
.cursor-forbidden {
  cursor: no-drop;
}

.transition {
  transition: var(--transition);
}
.transition-medium {
  transition: var(--transition-medium);
}
.ellipsis {
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ellipsis-left {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: rtl;
  text-align: left;
}
.center-text {
  text-align: center;
}
.text-align-left {
  text-align: left;
}
.text-align-right {
  text-align: right;
}
.text-underline {
  text-decoration: underline;
}
.overflow-hidden {
  overflow: hidden;
}
.nowrap {
  white-space: nowrap;
}

@media print {
  .no-print {
    display: none !important;
  }
}

.no-outline {
  outline: 0;
}

.hr {
  height: 1px;
  border: 0;
}

.no-selection {
  user-select: none;
}

.no-break-word {
  white-space: nowrap;
}

.background-cover {
  background-size: cover;
}
.background-center {
  background-position: center;
}
.background-no-repeat {
  background-repeat: no-repeat;
}

.transparent {
  opacity: 0;
}
.opaque {
  opacity: 1;
}

.rotate-clockwise {
  transform: rotate(90deg);
}

.child-effects-on-hover:hover .transparent-child-effect,
.child-effects-on-focus:focus .transparent-child-effect {
  opacity: 0;
}

.child-effects-on-hover:hover .opaque-child-effect,
.child-effects-on-focus:focus .opaque-child-effect {
  opacity: 1;
}

.child-effects-on-hover:hover .block-child-effect,
.child-effects-on-focus:focus .block-child-effect {
  display: block;
}

.child-effects-on-hover:hover .flexbox-child-effect,
.child-effects-on-focus:focus .flexbox-child-effect {
  display: flex;
}