Skip to content

Instantly share code, notes, and snippets.

View vugar005's full-sized avatar
🏝️

Vugar vugar005

🏝️
View GitHub Profile
@vugar005
vugar005 / generate-material-classes-optimized-version.scss
Created April 24, 2022 14:12
generate angular material classes and css variables: optimized version
@use '../palette';
@mixin generateColors($prefix, $palette) {
$colors-map: ();
@each $key, $value in $palette {
@if $key !=contrast {
.app-#{$prefix}-#{$key} {
color: map-get($palette, $key);
}
@vugar005
vugar005 / generate-material-classes-v1.scss
Created April 24, 2022 13:58
generate angular material classes version 1
@use '../palette';
@mixin app-primary-colors {
$colors-map: ();
@each $key, $value in $app-primary {
@if $key !=contrast {
.app-primary-#{$key} {
color: map-get($app-primary, $key);
}
@vugar005
vugar005 / sample-palette.scss
Last active April 24, 2022 14:17
Sample palette for blog
@use 'sass:map';
@import '@angular/material/theming';
$app-primary: (
10: #c5e4ff,
20: #9fd2ff,
30: #78c0ff,
40: #5bb3ff,
50: #3ea5ff,
60: #389dff,
@vugar005
vugar005 / button-loading.scss
Created April 22, 2022 16:57
Button loading mode
button.is-loading {
color: rgba(0,0,0,.26)!important;
background-color: #ffffff!important;
box-shadow: none;
cursor: not-allowed;
&:after {
content: "";
font-family: sans-serif;
font-weight: 100;
-webkit-animation: 1.25s linear infinite three-quarters;
@vugar005
vugar005 / devtools.ts
Created July 12, 2021 13:37
Debug RxJS events with Redux DevTools
import { environment } from 'src/environments/environment';
import { DebugStreamActionType } from './debug-stream.constants';
export type DevtoolsOptions = {
/** instance name visible in devtools */
name: string;
/** maximum allowed actions to be stored in the history tree */
maxAge: number;
latency: number;
actionsBlacklist: string[];
@vugar005
vugar005 / debug-stream-operator.ts
Created July 12, 2021 13:35
Debug RxJS events with Redux DevTools
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { DebugStreamActionType } from './debug-stream.constants';
import { DevToolsEvent } from './dev-tools';
/**
* Shows log on dev mode.
* @usageNotes
* @params message => message to log. Should be [Component Name] Event Name
* Example : of(100).pipe(debugStream('[Component Name] Event name'))
*/
@vugar005
vugar005 / forms
Created April 5, 2021 19:27
Angular notes
* `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
* `valueChanges` observables emit events with the latest status and value when the control value
* is updated.