tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

_mixins.scss (2094B)

      1 @use 'sass:map';
      2 
      3 // Shared styling of article images shown as background
      4 @mixin image-as-background {
      5  background-color: var(--newtab-element-secondary-color);
      6  background-position: center;
      7  background-repeat: no-repeat;
      8  background-size: cover;
      9  border-radius: var(--border-radius-small);
     10  box-shadow: $shadow-image-inset;
     11 }
     12 
     13 // Note: lineHeight and fontSize should be unitless but can be derived from pixel values
     14 // Bug 1550624 to clean up / remove this mixin to avoid duplicate styles
     15 @mixin limit-visible-lines($line-count, $line-height, $font-size) {
     16  font-size: $font-size;
     17  -webkit-line-clamp: $line-count;
     18  line-height: $line-height;
     19 }
     20 
     21 @mixin dark-theme-only {
     22  [lwt-newtab-brighttext] & {
     23    @content;
     24  }
     25 }
     26 
     27 @mixin ds-border-top {
     28  @content;
     29 
     30  @include dark-theme-only {
     31    border-block-start: 1px solid $grey-60;
     32  }
     33 
     34  border-block-start: 1px solid $grey-30;
     35 }
     36 
     37 @mixin ds-border-bottom {
     38  @content;
     39 
     40  @include dark-theme-only {
     41    border-block-end: 1px solid $grey-60;
     42  }
     43 
     44  border-block-end: 1px solid $grey-30;
     45 }
     46 
     47 @mixin ds-fade-in($halo-color: $blue-50-30) {
     48  box-shadow: 0 0 0 5px $halo-color;
     49  transition: box-shadow 150ms;
     50  border-radius: var(--border-radius-small);
     51  outline: none;
     52 }
     53 
     54 // Some wallpapers are light/dark, and may not match the user set contrast,
     55 // so some text, icons, etc that are displayed over the wallpaper need a contrast fix.
     56 @mixin wallpaper-contrast-fix {
     57  .lightWallpaper & {
     58    color-scheme: light;
     59  }
     60 
     61  .darkWallpaper & {
     62    color-scheme: dark;
     63  }
     64 }
     65 
     66 // Used to visualize the different breakpoints on an applied element
     67 // See variables.scss for $debug-breakpoints
     68 @mixin debug-breakpoints {
     69  @each $name, $value in $debug-breakpoints {
     70    $color: map.get($debug-breakpoint-colors, $name);
     71 
     72    @media (min-width: $value) {
     73      outline: 1px solid #{$color};
     74    }
     75  }
     76 }
     77 
     78 // Adds transparency and a hover effect to card background.
     79 @mixin newtab-card-style {
     80  background: var(--newtab-background-card);
     81  transition: opacity 0.2s ease;
     82 
     83  &:hover {
     84    background: var(--newtab-background-color-secondary);
     85  }
     86 }