commonStyles.scss

/*
Copyright 2005 - 2021 Advantage Solutions, s. r. o.

This file is part of ORIGAM (http://www.origam.org).

ORIGAM is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

ORIGAM is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
*/

@mixin hoverItemAnimation {
  transition: all 300ms linear;
}

@mixin popoverShadow {
  -webkit-box-shadow: -1px 3px 7px -2px rgba(var(--background8-rgb), 0.801);
  -moz-box-shadow: -1px 3px 7px -2px rgba(var(--background8-rgb), 0.801);
  box-shadow: -1px 3px 7px -2px rgba(var(--background8-rgb), 0.801);
  border: 1px solid var(--background4);
}

@mixin progressIndicator {
  position: absolute;
  width: 100%;
  height: 4px;
  bottom: 0;
  left: 0;
  overflow: hidden;

  $indefiniteMarkerWidth: 200%;

  @keyframes slideright {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(50%);
    }
  }

  .indefinite {
    animation-name: slideright;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: steps(20);
    width: $indefiniteMarkerWidth;
    height: 100%;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,73b1e7+34,0a77d5+50,73b1e7+66,73b1e7+66,ffffff+100 */
    background: var(--background1); /* Old browsers */
    background: -moz-linear-gradient(
      left,
      var(--background1) 0%,
      var(--foreground2) 34%,
      var(--foreground3) 50%,
      var(--foreground2) 66%,
      var(--foreground2) 66%,
      var(--background1) 100%
    ); /* FF3.6-15 */
    background: -webkit-linear-gradient(
      left,
      var(--background1) 0%,
      var(--foreground2) 34%,
      var(--foreground3) 50%,
      var(--foreground2) 66%,
      var(--foreground2) 66%,
      var(--background1) 100%
    ); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(
      to right,
      var(--background1) 0%,
      var(--foreground2) 34%,
      var(--foreground3) 50%,
      var(--foreground2) 66%,
      var(--foreground2) 66%,
      var(--background1) 100%
    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
  }
}

$textColorNoHover: var(--background7);
$textColorHover: var(--background8);

@mixin dialogButton {
  height: 30px;
  border-radius: 15px;
  font-size: 12px;
  color: var(--background7);
  border: 1px solid var(--background5);
  background-color: var(--background3);
  padding: 5px 8px 5px 8px;
  cursor: pointer;
  margin-right: 5px;
  margin-left: 5px;
  @include hoverItemAnimation;
  &:hover {
    background: var(--background5);
    color: var(--background8);
  }
  &:focus,&:global(.isPrimary) {
    background: var(--foreground1);
    border-color: var(--foreground1);
    color: var(--background1);

    &:hover {
      background: var(--background1);
      color: var(--foreground1);
    }
  }
}