| import { useEffect, useState } from 'react'; | |
| import { Observable } from 'rxjs'; | |
| /** | |
| * A React hook that manages the subscription of a source Observable, and calls event handlers | |
| * when source emits 'next' and 'error' events. | |
| * | |
| * @param source$ an Observable of type T | |
| * @param nextHandler a function to be called when source$ emits next value | |
| * @param errorHandler a function to be called if source$ emits error |
| export class NgLetContext<T = any> { | |
| $implicit: T = null!; | |
| ngLet: T = null!; | |
| } | |
| @Directive({ | |
| selector: '[ngLet]', | |
| }) | |
| export class NgLetDirective<T> implements OnInit { | |
| private _context = new NgLetContext<T>(); |
| // For an aspect ratio of 16:9 use like this: | |
| // .wrapper-element { | |
| // @include aspect-ratio(16, 9); | |
| // } | |
| @mixin aspect-ratio($width, $height) { | |
| position: relative; | |
| overflow: hidden; | |
| height: 0; | |
| padding-top: calc(#{$height} / #{$width} * 100%); |
| // Easing function variables - SEE EXAMPLES: http://easings.net/en# | |
| // SINE | |
| $ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715); | |
| $ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1); | |
| $ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95); | |
| // QUAD | |
| $ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); | |
| $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); |
| @mixin flex($direction: row, $justify: center, $align: center) { | |
| display: flex; | |
| flex-direction: $direction; | |
| justify-content: $justify; | |
| align-items: $align; | |
| } |
| @mixin shadow($height: 'lowest', $color: #000, $darkness: 1, $inset: false) { | |
| @if $height == 'lowest' { | |
| box-shadow: 0 1px 3px rgba($color, 0.12 * $darkness), | |
| 0 1px 2px rgba($color, 0.24 * $darkness); | |
| @if $inset { | |
| box-shadow: inset 0 1px 3px rgba($color, 0.12 * $darkness), | |
| inset 0 1px 2px rgba($color, 0.24 * $darkness); | |
| } | |
| } | |
| import { Pipe, PipeTransform } from '@angular/core'; | |
| import { DomSanitizer } from '@angular/platform-browser'; | |
| @Pipe({ | |
| name: 'safe' | |
| }) | |
| export class SafePipe implements PipeTransform { | |
| transform(value: string, type?: 'style' | 'html' | 'url'): any { | |
| if (value) { |
| import { tap } from 'rxjs/operators'; | |
| import { environment as ENV } from '../../environments/environment'; // NOTE: adjust path to environment files | |
| const normalStyle = [ | |
| 'display: block', | |
| 'color: mediumVioletRed', | |
| 'font-weight: normal', | |
| 'background: linear-gradient(135deg, #98fb98 66%, #22c1c3 100%)', | |
| 'padding: 3px 9px', |
Electrifying teals and scintillating tangerines pop against dark chocolate-grey windows and menus. Adding these customizations to 'User Settings' will allows you to enjoy the Pop!_OS UI color theme, and still be able to swap in your favourite syntax highlighting theme for improved readability and visual lexing.
File > Preferences > Settings.vscode-color-settings.json into "workbench.colorCustomizations".