openstapps/src/theme/util/_mixins.scss

/*!
 * Copyright (C) 2023 StApps
 * This program 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, version 3.
 *
 * This program 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
 * this program. If not, see <https://www.gnu.org/licenses/>.
 */

/**
 * Breakpoints copied from node_modules/@ionic/angular/css/display.css
 */

@mixin ion-sm-up {
  @media (min-width: 576px) {
    @content;
  }
}

@mixin ion-sm-down {
  @media (max-width: 575.98px) {
    @content;
  }
}

@mixin ion-md-up {
  @media (min-width: 768px) {
    @content;
  }
}

@mixin ion-md-down {
  @media (max-width: 767.98px) {
    @content;
  }
}

@mixin ion-lg-up {
  @media (min-width: 992px) {
    @content;
  }
}

@mixin ion-lg-down {
  @media (max-width: 991.98px) {
    @content;
  }
}

@mixin ion-xl-up {
  @media (min-width: 1200px) {
    @content;
  }
}

@mixin ion-xl-down {
  @media (max-width: 1199.98px) {
    @content;
  }
}

@mixin phoneLandscape {
  @media (max-height: 500px) and (orientation: landscape) {
    @content;
  }
}

@mixin phonePortraitSmall {
  @media (max-height: 700px) and (orientation: portrait) {
    @content;
  }
}

@mixin auto-grid($item-width) {
  // fit as many items on the page while keeping items >$item-width,
  // but also ensure items get shrunk on small screens
  grid-template-columns: repeat(auto-fit, minmax(calc(min($item-width, 100%)), 1fr));
}

@mixin border-radius-in-parallax($border-radius) {
  border-radius: $border-radius;
  // explicitly place element in 3D space
  // Safari seems to sometimes get confused
  // and disregard border radius in some cases
  transform: translateZ(0);
}

@mixin content-padding {
  margin-inline-start: calc(
    clamp(0px, (100% - var(--preferred-content-width)) / 2, var(--content-inline-start-padding-bias))
  );
}