angelovcom.net

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

mixins.scss (2285B)

      1 // Responsive breakpoints mixin
      2 @mixin add_variables( $view: frontend ) {
      3 
      4 	@if frontend == $view {
      5 
      6 		:root {
      7 			@content;
      8 		}
      9 	}
     10 
     11 	@if editor == $view {
     12 
     13 		:root,
     14 		body {
     15 			@content;
     16 		}
     17 	}
     18 }
     19 
     20 // Button style
     21 // - Applies button styles to blocks and elements that share them.
     22 @mixin button-style() {
     23 	border: var(--button--border-width) solid transparent;
     24 	border-radius: var(--button--border-radius);
     25 	cursor: pointer;
     26 	font-weight: var(--button--font-weight);
     27 	font-family: var(--button--font-family);
     28 	font-size: var(--button--font-size);
     29 	line-height: var(--button--line-height);
     30 	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
     31 	text-decoration: none;
     32 
     33 	// Standard Button Color Relationship Logic
     34 	&:not(:hover):not(:active) {
     35 
     36 		// Text colors
     37 		&:not(.has-text-color) {
     38 			color: var(--global--color-background);
     39 
     40 			// Nested
     41 			.has-background & {
     42 				color: var(--local--color-background, var(--global--color-primary));
     43 
     44 				&.has-background {
     45 					color: var(--global--color-primary);
     46 				}
     47 			}
     48 		}
     49 
     50 		// Background-colors
     51 		&:not(.has-background) {
     52 			background-color: var(--global--color-primary);
     53 
     54 			// Nested
     55 			.has-background & {
     56 				background-color: var(--local--color-primary, var(--global--color-primary));
     57 			}
     58 		}
     59 	}
     60 
     61 	// Hover Button color should match parent element foreground color
     62 	&:hover,
     63 	&:active {
     64 		background-color: transparent;
     65 		border-color: currentColor;
     66 		color: inherit;
     67 	}
     68 
     69 	// Focus Button outline color should always match the current text color
     70 	&:focus {
     71 		outline-offset: -6px;
     72 		outline: 2px dotted currentColor;
     73 	}
     74 
     75 	// Disabled Button colors
     76 	&:disabled {
     77 		background-color: var(--global--color-white-50);
     78 		border-color: var(--global--color-white-50);
     79 		color: var(--button--color-text-active);
     80 	}
     81 }
     82 
     83 @mixin innerblock-margin-clear($container) {
     84 
     85 	// Clear the top margin for the first-child.
     86 	> #{$container} > *:first-child {
     87 		margin-top: 0;
     88 	}
     89 
     90 	// Last child that is not the appender.
     91 	> #{$container} > *:last-child:not(.block-list-appender) {
     92 		margin-bottom: 0;
     93 	}
     94 
     95 	// When selected, the last item becomes the second last because of the appender.
     96 	&.has-child-selected > #{$container} > *:nth-last-child(2),
     97 	&.is-selected > #{$container} > *:nth-last-child(2) {
     98 		margin-bottom: 0;
     99 	}
    100 }