working on it ...

Filters

Explore Public Snippets

Sort by

Found 3,703 snippets

    public by maholtz  1427  0  5  0

    Wert einer Zelle relativ zur aktuellen Zelle

    Mit der folgenden Formel kann in Google Tabellen ein Wert aus einer anderen Zelle verwendet werden, die um X-Zeilen und Y-Spalten von der aktuellen Zelle versetzt sind.
    // ROW() Gibt die aktuelle Zeile zurück
    // COLUMN() die aktuelle Spalte zurück, allerdings als Zahl, nicht als Buchstaben
    //
    // Der Wert der gewünschten Zelle, die also eine bestimmte Anzahl
    // an Zeilen und Spalten versetzt ist, kann entsprechend mit 
    // ROW()-2 und COLUMN()-4 gewählt werden
    // 
    // via concatenate wird ein Sting in der Form "R41C4" erzeugt,
    // die Schreibweise kann dann an die Funktion indirect übergeben 
    // werden (Parameter FALSE!) und gibt dann den Wert aus.
    //
    // Der Wert kann dann weiter verarbeitet werden.
    indirect(concatenate("R";ROW()-2;"C";COLUMN()-4);FALSE)

    public by JKCPR  2195  2  5  1

    Matching Height - using CSS @element query

    A simple elegant solution to matching element heights using the @element query.
    //  Some html setup required
    /*
        <div id=thing1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, temporibus consequuntur velit dolor! Eos animi molestias  found here <a href="http://codepen.io/tomhodgins/pen/yadeXV"> thanks Tommy </a>aliquid eum error officiis vel et saepe a facilis, voluptate dignissimos nam assumenda, deleniti.</div>
        <div id=thing2>This one doesn't have as much text as id=thing1… so it's set to 100eh, or 100 element height units for #thing1, which makes it the same height.</div>
    */
    
    div {
      margin: 1em 0;
      width: 50%;
      float: left;
      color: black;
      background: lime;
    }
    #thing2 {
      background: red;
    }
    @element '#thing1' {
      #thing2 {
        height: 100eh;
      }
    }

    public by JKCPR  2938  1  5  1

    @each Sass Directive - processing icons

    A nice DRY approach to writing your huge icon collection into stylesheets
    // @each Sass Directive
    $icon-names: (twitter '\e004' ), (facebook '\e005' ), (gplus '\e006' );
    
    %ico-font-base {
        font-family: 'ico-fonts';
        speak: none;
        font-style: normal;
        font-weight: normal;
        line-height: 1;
        text-transform: none;
        
        //Better Font Rendering
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    
    @each $icon-name in $icon-names {
        .icon-#{nth($icon-name, 1)}:after {
            @extend %ico-font-base;
            content: nth($icon-name, 2);
        }
    }        

    public by JKCPR  3041  5  5  1

    SCSS button power @mixin

    one $color variable generates all buttons by @mixin and color @functions also leverages %placeholders and %placeholder-selectors
    //core values
    $font-size:16;
    $primary: #0085B7;
    $success: adjust_hue($primary, 260);
    $warning: saturate(adjust_hue($primary, 188), 43);
    $alert: lighten(saturate(adjust_hue($primary, 162), 12), 1);
    
    // function
    @function em($target, $context:$font-size){
      @return ($target/$context) * 1em;
    }
    
    //!default values
    $button-colour: $primary !default;
    $button-text-color: white !default;
    $button-line-height: 32 !default;
    $button-border-radius: 3 !default;
    $button-padding: 30 !default;
    $button-font-size: 24 !default;
    $button-weight: bold !default;
    
    //the btn mixin
    @mixin default-button($color: $button-text-color,
      $line-height: $button-line-height,
      $radius: $button-border-radius,
      $padding: $button-padding,
      $font-size: $button-font-size,
      $weight: $button-weight){
      
      color: $color;
      line-height: em($line-height);
      border-radius: em($radius);
      padding: 0 em($padding);
      font-size: em($font-size);
      font-weight: $weight;
    }
    
    @mixin flat-button($color: $button-color){
      $highlight-color: lighten($color, 50%);
      $shadow-color: grayscale(transparentize($color, 0.1));
    
      background-color: $color;
      border: 1px solid darken($color, 10%);
      text-shadow: 0px 1px 1px darken($color, 20%);
      box-shadow: 0 em(2) em(6) 0 $shadow-color;
      &:hover{
        background-color: darken($color, 5%);
        text-shadow: 1px 1px 1px darken($highlight-color, 5%);
      }
    }
    
    //placeholder selector
    %default-button{
      @include default-button;
    }
    .primary{
      @extend %default-button;
      @include flat-button($primary);  
    }
    .success{
      @extend %default-button;
      @include flat-button($success);
    }
    .warning{
      @extend %default-button;
      @include flat-button($warning);
    }
    .alert{
      @extend %default-button;
      @include flat-button($alert);
    }

    public by ivanov-yordan  2371  0  3  0

    Font-Face

    Font-Face: font-face.scss
    / Mixin
    @mixin font-face($name, $url) {
      @font-face {
    	font-family: #{$name};
    	src: url("#{$url}.eot");
    	src: url("#{$url}.eot#iefix") format("embedded-opentype"),
    		url("#{$url}.ttf") format("truetype"),
    		url("#{$url}.svg##{$name}") format("svg"),
    		url("#{$url}.woff") format("woff");
     
    	@content;
      }
    }
     
    // Usage
    @include font-face("icons", "../fonts/icons/iconfont");
     
    // Result
    @font-face {
    	font-family: icons;
    	src: url("../fonts/icons/iconfont.eot");
    	src: url("../fonts/icons/iconfont.eot#iefix") format("embedded-opentype"), 
    		url("../fonts/icons/iconfont.ttf") format("truetype"), 
    		url("../fonts/icons/iconfont.svg#icons") format("svg"), 
    		url("../fonts/icons/iconfont.woff") format("woff");
    }
    
    

    external by jrodl3r  2  0  1  0

    Angular Search Styles

    Angular Search Styles: search.component.scss
    .searchbox {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      max-width: 480px;
      margin: 0 auto;
      padding: 15px;
    
      input {
        padding: 5px 10px;
        border: 1px solid #999;
        border-radius: 4px;
    
        &:focus { outline: none; }
      }
    
      .search-icon {
        position: absolute;
        top: 25px;
        right: 25px;
        color: #DDD;
        cursor: text;
      }
    
      .clear-icon {
        position: absolute;
        top: 14px;
        right: 27px;
        font-size: 26px;
        color: #DDD;
        cursor: pointer;
      }
    }
    
    .results {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      min-height: 70px;
      margin: 10px 0;
      padding: 10px;
      background: #FFF;
      border: 1px solid #FAFAFA;
      border-radius: 4px;
      box-shadow: 0 0 3px rgba(0,0,0, .25);
      animation: fade-in .15s ease-in-out forwards;
    
      li {
        margin-bottom: 5px;
    
        &:last-of-type { margin-bottom: 0; }
      }
    
      a {
        display: flex;
        flex-direction: row;
        padding: 5px 5px 5px 0;
        color: #212529;
        overflow: hidden;
        user-select: none;
    
        @media (min-width: 768px) {
          padding: 5px;
        }
    
        &:hover {
          color: #555;
          background: #FAFAFA;
          border-radius: 3px;
        }
    
        i { margin: 3px 10px 0 5px; }
      }
    }
    
    .no-results {
      padding: 15px;
      font-size: .85rem;
      text-align: center;
    }
    
    .loading {
      top: 18px;
      right: 20px;
      left: initial;
      height: 30px;
      width: 30px;
      color: #DDD;
      font-size: 16px;
    }
    
    

    external by Tom Hart  3  0  1  0

    SASS @each for <h3>aders

    SASS @each for aders: sass-each-h3adings.scss
    // Playing around with SASS @each
    // To define a related rule set
    // For HTML headings using destructuring 
    $aitches: 1, 2, 3, 4, 5, 6;
    @each $h in $aitches {
      h#{$h} {
        font-size: 3em - ($h / 3);
      }
    }
    
    

    external by wesselej  3  0  1  0

    PG Flexbox Grid

    PG Flexbox Grid: _flexboxgrid.scss
    @function rem($values, $base: null) {
    	$rem-values: ();
    	$count: length($values);
    	$base: 16px;
    
    	@if $count==1 {
    		@return -zf-to-rem($values, $base);
    	}
    
    	@for $i from 1 through $count {
    		$rem-values: append($rem-values, -zf-to-rem(nth($values, $i), $base));
    	}
    
    	@return $rem-values;
    }
    
    @function strip-unit($num) {
    	@return $num / ($num * 0 + 1);
    }
    
    @function -zf-to-rem($value, $base: null) {
    
    	// Check if the value is a number
    	@if type-of($value) !='number' {
    		@warn inspect($value)+' was passed to rem(), which is not a number.';
    		@return $value;
    	}
    
    	// Transform em into rem if someone hands over 'em's
    	@if unit($value)=='em' {
    		$value: strip-unit($value) * 1rem;
    	}
    
    	// Calculate rem if units for $value is not rem or em
    	@if unit($value) !='rem' {
    		$value: strip-unit($value) / strip-unit($base) * 1rem;
    	}
    
    	// Turn 0rem into 0
    	@if $value==0rem {
    		$value: 0;
    	}
    
    	@return $value;
    }
    
    /* Grid sizes: */
    /* http://gridcalculator.dk/#/1176/12/20/10 -- 78px col */
    $max-width: rem(1176);
    $mobile: rem(1030);
    $mobile-height: rem(86);
    $md: rem(700);
    $lg: rem(1000);
    $gap: rem(20);
    $col: rem(78);
    
    $media-mobile: "only screen and (max-width : #{$mobile})";
    $media-desktop: "only screen and (min-width : #{$mobile})";
    $media-md: "only screen and (min-width : #{$md})";
    $media-lg: "only screen and (min-width : #{$lg})";
    
    $media-md-only: "only screen and (min-width : #{$md}) and (max-width : #{$lg})";
    $media-sm-down: "only screen and (max-width : #{$md})";
    
    $media-md-down: "only screen and (max-width : #{$lg})";
    
    /* Colors */
    /*****************
    $green: #97c100; 
    $green: #3b7d2f; 
    $ltgreen: #41b864;
    $blue: #182f77;
    $gray: #545456;
    $ltgray: #f4f4f4;
    $formgray: #8d9092;
    $red: #cc0000;
    *******************/
    
    $text: #000000;
    $maroon: #5E0F0B; /* this color from style tile */ 
    /* $maroon: #660000; This color from web site */
    $red: #900202;
    $black: #000000;
    $gray: #1e1e1e;
    $lightgray: lighten($gray, 75%);
    $lightred: #C33027;
    
    $imgroot: '/wp-content/themes/fiore/_images/';
    
    
    
    @mixin button() {
    	background: none;
    	color: $lightred;
    	border: 2px solid $lightred;
    	font-size: rem(18);
    	line-height: 1em;
    	display: inline-block;
    	padding: rem(6 6 8);
    	text-decoration: none;
    	text-transform: uppercase;
    	position: relative;
    	min-width: rem(155);
    	text-align: center;
    	transition: all 300ms ease-out;
    	background-color: $gray;
    	z-index: 1;
    
    	&:after {
    		content: '';
    		display: block;
    		position: absolute;
    		z-index: -1;
    		transition: width 300ms ease-out, color 300ms ease-out;
    		width: 0%;
    		height: 100%;
    		top: 0;
    		left: 0;
    		background: $lightred;
    	}
    
    	&:hover,
    	&:focus {
    		color: white;
    
    		&:after {
    			width: 100%;
    		}
    	}
    }
    
    @mixin box-shadow(){
    	box-shadow: 0px 5px 10px 0 rgba(0, 0, 0, .25);
    }
    
    @mixin clearfix() {
    
    	&::before,
    	&::after {
    		display: table;
    		content: ' ';
    	}
    
    	&::after {
    		clear: both;
    	}
    }
    
    @mixin centercols($colcount) {
    	margin-right: auto;
    	margin-left: auto;
    	position: relative;
    	max-width: rem($col*$colcount + $gap*$colcount);
    	padding-right: $gap/2;
    	padding-left: $gap/2;
    }
    
    @mixin screen-reader-text() {
    	clip: rect(1px, 1px, 1px, 1px);
    	position: absolute !important;
    	height: 1px;
    	width: 1px;
    	overflow: hidden;
    	word-wrap: normal !important;
    
    	&:focus {
    		background-color: #f1f1f1;
    		clip: auto !important;
    		color: #21759b;
    		display: block;
    		font-size: rem(14);
    		height: auto;
    		left: 5px;
    		line-height: normal;
    		padding: 15px 23px 14px;
    		text-decoration: none;
    		top: 5px;
    		width: auto;
    		z-index: 100000;
    		/* Above WP toolbar. */
    	}
    }
    
    @mixin block-padding() {
    	padding-top: rem(60);
    	padding-bottom: rem(60);
    }
    
    @mixin block-margin() {
    	margin-top: rem(60);
    	margin-bottom: rem(60);
    }
    
    /* 
    From: http://flexboxgrid.com/
    
    Uncomment and set these variables to customize the grid.
    
    Note - set xs size for start and then go up for changes 
     */
    
    /* if more than gap around whole container - add it to .max-container */
    
    .flex-column{
    	display: flex;
    	flex-wrap: wrap;
    	flex-direction: column;
    }
    
    .fill-extra-space{
    	flex-grow: 1;
    }
    
    .max-container {
      margin-right: auto;
      margin-left: auto;
      position: relative;
      max-width: $max-width + $gap; /* BW: always set this on grid - .row has negative margins to pull out and then columns add back in padding. Do this so can nest rows, this is site width + 1 gutter so padding on first row makes content width 1032-20 = 1012  */
      width: 100%;
      padding: 0;
      @media #{$media-md}{  	
      	padding: rem(0 10); /* extra padding so 20px around whole design on large screens */
      }
    
      &.no-padding{
      	padding: 0;
      }  
    }
    
    .row {
      display: -ms-flexbox;
      display: -webkit-box;
      display: flex;
      -ms-flex-direction: row;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      flex-direction: row;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      .row{
      	margin-right: -$gap/2;
      	margin-left: -$gap/2;
      }
    }
    
    .col{
    	padding-right: $gap/2;
      padding-left: $gap/2;
      position: relative;
    }
    
    .row-no-wrap{
    	flex-wrap: nowrap;
    }
    
    .vertical-center{ /* old way*/
    	position: relative;
    	top: 50%;
    	transform: translateY(-50%);
    }
    
    .flex-end{
    	justify-content: flex-end;
    }
    
    .row.reverse { 
      -ms-flex-direction: row-reverse;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
      flex-direction: row-reverse;
    }
    
    .col.reverse {
      -ms-flex-direction: column-reverse;
      -webkit-box-orient: vertical;
      -webkit-box-direction: reverse;
      flex-direction: column-reverse;
    }
    
    /*.flex-img { responsive images inside a col -- doesn't seem to do anything
      display: block;
      -ms-flex: 0 0 auto;
      -webkit-flex: 0 0 auto;
      flex: 0 0 auto;
      max-width: 100%;
      height: auto;
      width: 100%;
    }*/
    
    .align-bottom{
    	align-self: flex-end;
    }
    
    .align-center {
    	align-self: center;
    }
    
    .align-right{
    	display: flex;
    	justify-content: flex-end;
    }
    
    .col-8-block-wrapper>* {
    	@include centercols(8);
    }
    
    .col-10{ /* no bigger than 10 col - center with .center-sm on parent .row */
    	width: 100%;
    	max-width: rem( $col*10 + $gap*10);
    }
    
    .col-9{
    	width: 100%;
    	max-width: rem( $col*9 + $gap*9);
    }
    
    .col-8{ /* no bigger than 8 col - center with .center-sm on parent .row */
    	width: 100%;
    	max-width: rem( $col*8 + $gap*8);
    }
    
    .col-6{
    	width: 100%;
    	max-width: rem( $col*6 + $gap*6);
    }
    
    .md-down-hide{
    	@media only screen and (max-width : #{$lg}){
    		display: none;
    	} 
    }
    
    .md-up-show{ 
    	display: none;
    	@media only screen and (max-width : #{$lg}){
    		display: block;
    	} 
    }
    
    
    /* theme specific columns */
    
    /* theme specific columns */
    
      .col-sm,
      .col-sm-1,
      .col-sm-2,
      .col-sm-3,
      .col-sm-4,
      .col-sm-5,
      .col-sm-6,
      .col-sm-7,
      .col-sm-8,
      .col-sm-9,
      .col-sm-10,
      .col-sm-11,
      .col-sm-12 {
        -ms-flex: 0 0 auto;
        -webkit-box-flex: 0;
        flex: 0 0 auto;
      }
    
      .row-no-wrap-sm{
    		flex-wrap: nowrap;
    	}
    
      .col-sm {
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        -webkit-box-flex: 1;
        flex-grow: 1;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        max-width: 100%;
      }
    
      .col-sm-1 {
        -ms-flex-preferred-size: 8.333%;
        flex-basis: 8.333%;
        max-width: 8.333%;
      }
    
      .col-sm-2 {
        -ms-flex-preferred-size: 16.667%;
        flex-basis: 16.667%;
        max-width: 16.667%;
      }
    
      .col-sm-3 {
        -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
        max-width: 25%;
      }
    
      .col-sm-4 {
        -ms-flex-preferred-size: 33.333%;
        flex-basis: 33.333%;
        max-width: 33.333%;
      }
    
      .col-sm-5 {
        -ms-flex-preferred-size: 41.667%;
        flex-basis: 41.667%;
        max-width: 41.667%;
      }
    
      .col-sm-6 {
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        max-width: 50%;
      }
    
      .col-sm-7 {
        -ms-flex-preferred-size: 58.333%;
        flex-basis: 58.333%;
        max-width: 58.333%;
      }
    
      .col-sm-8 {
        -ms-flex-preferred-size: 66.667%;
        flex-basis: 66.667%;
        max-width: 66.667%;
      }
    
      .col-sm-9 {
        -ms-flex-preferred-size: 75%;
        flex-basis: 75%;
        max-width: 75%;
      }
    
      .col-sm-10 {
        -ms-flex-preferred-size: 83.333%;
        flex-basis: 83.333%;
        max-width: 83.333%;
      }
    
      .col-sm-11 {
        -ms-flex-preferred-size: 91.667%;
        flex-basis: 91.667%;
        max-width: 91.667%;
      }
    
      .col-sm-12 {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
      }
    
      .col-sm-offset-1 {
        margin-left: 8.333%;
      }
    
      .col-sm-offset-2 {
        margin-left: 16.667%;
      }
    
      .col-sm-offset-3 {
        margin-left: 25%;
      }
    
      .col-sm-offset-4 {
        margin-left: 33.333%;
      }
    
      .col-sm-offset-5 {
        margin-left: 41.667%;
      }
    
      .col-sm-offset-6 {
        margin-left: 50%;
      }
    
      .col-sm-offset-7 {
        margin-left: 58.333%;
      }
    
      .col-sm-offset-8 {
        margin-left: 66.667%;
      }
    
      .col-sm-offset-9 {
        margin-left: 75%;
      }
    
      .col-sm-offset-10 {
        margin-left: 83.333%;
      }
    
      .col-sm-offset-11 {
        margin-left: 91.667%;
      }
    
      .start-sm {
        justify-content: flex-start;
      }
    
      .center-sm {
        -ms-flex-pack: center;
      	-webkit-box-pack: center;
      	justify-content: center;
      }
    
      .end-sm {
        justify-content: flex-end;
      }
    
      .top-sm {
        align-items: flex-start;
      }
    
      .middle-sm {
        -ms-flex-align: center;
        -webkit-box-align: center;
        align-items: center;
      }
    
      .bottom-sm {
        -ms-flex-align: end;
        -webkit-box-align: end;
        align-items: flex-end;
      }
    
      .around-sm {
        -ms-flex-pack: distribute;
        justify-content: space-around;
      }
    
      .between-sm {
        -ms-flex-pack: justify;
        -webkit-box-pack: justify;
        justify-content: space-between;
      }
    
      .first-sm {
        -ms-flex-order: -1;
        -webkit-box-ordinal-group: 0;
        order: -1;
      }
    
      .last-sm {
        -ms-flex-order: 1;
        -webkit-box-ordinal-group: 2;
        order: 1;
      }
    
    @media #{$media-md} {
    
      .col-md,
      .col-md-1,
      .col-md-2,
      .col-md-3,
      .col-md-4,
      .col-md-5,
      .col-md-6,
      .col-md-7,
      .col-md-8,
      .col-md-9,
      .col-md-10,
      .col-md-11,
      .col-md-12 {
        -ms-flex: 0 0 auto;
        -webkit-box-flex: 0;
        flex: 0 0 auto;
      }
    
      .row-no-wrap-md{
    		flex-wrap: nowrap;
    	}
    
      .col-md {
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        -webkit-box-flex: 1;
        flex-grow: 1;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        max-width: 100%;
      }
    
      .col-md-1 {
        -ms-flex-preferred-size: 8.333%;
        flex-basis: 8.333%;
        max-width: 8.333%;
      }
    
      .col-md-2 {
        -ms-flex-preferred-size: 16.667%;
        flex-basis: 16.667%;
        max-width: 16.667%;
      }
    
      .col-md-3 {
        -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
        max-width: 25%;
      }
    
      .col-md-4-of-9{
    		-ms-flex-preferred-size: percentage(4/9);
        flex-basis: percentage(4/9);
        max-width: percentage(4/9); 
    	}
    
    	.col-md-5-of-9{
    		-ms-flex-preferred-size: percentage(5/9);
        flex-basis: percentage(5/9);
        max-width: percentage(5/9);
      }
      
      .col-1-of-6{
        -ms-flex-preferred-size: percentage(1/6);
        flex-basis: percentage(1/6);
        max-width: percentage(1/6);
      }
    
      .col-5-of-6{
        -ms-flex-preferred-size: percentage(5/6);
        flex-basis: percentage(5/6);
        max-width: percentage(5/6);
      }
    
      .col-md-4 {
        -ms-flex-preferred-size: 33.333%;
        flex-basis: 33.333%;
        max-width: 33.333%;
      }
    
      .col-md-5 {
        -ms-flex-preferred-size: 41.667%;
        flex-basis: 41.667%;
        max-width: 41.667%;
      }
    
      .col-md-6 {
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        max-width: 50%;
      }
    
      .col-md-7 {
        -ms-flex-preferred-size: 58.333%;
        flex-basis: 58.333%;
        max-width: 58.333%;
      }
    
      .col-md-8 {
        -ms-flex-preferred-size: 66.667%;
        flex-basis: 66.667%;
        max-width: 66.667%;
      }
    
      .col-md-9 {
        -ms-flex-preferred-size: 75%;
        flex-basis: 75%;
        max-width: 75%;
      }
    
      .col-md-10 {
        -ms-flex-preferred-size: 83.333%;
        flex-basis: 83.333%;
        max-width: 83.333%;
      }
    
      .col-md-11 {
        -ms-flex-preferred-size: 91.667%;
        flex-basis: 91.667%;
        max-width: 91.667%;
      }
    
      .col-md-12 {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
      }
    
      .col-md-offset-1 {
        margin-left: 8.333%;
      }
    
      .col-md-offset-2 {
        margin-left: 16.667%;
      }
    
      .col-md-offset-3 {
        margin-left: 25%;
      }
    
      .col-md-offset-4 {
        margin-left: 33.333%;
      }
    
      .col-md-offset-5 {
        margin-left: 41.667%;
      }
    
      .col-md-offset-6 {
        margin-left: 50%;
      }
    
      .col-md-offset-7 {
        margin-left: 58.333%;
      }
    
      .col-md-offset-8 {
        margin-left: 66.667%;
      }
    
      .col-md-offset-9 {
        margin-left: 75%;
      }
    
      .col-md-offset-10 {
        margin-left: 83.333%;
      }
    
      .col-md-offset-11 {
        margin-left: 91.667%;
      }
    
      .start-md {
        -ms-flex-pack: start;
        -webkit-box-pack: start;
        justify-content: flex-start;
        text-align: start;
      }
    
      .center-md {
        -ms-flex-pack: center;
        -webkit-box-pack: center;
        justify-content: center;
        text-align: center;
      }
    
      .end-md {
        -ms-flex-pack: end;
        -webkit-box-pack: end;
        justify-content: flex-end;
        text-align: end;
      }
    
      .top-md {
        -ms-flex-align: start;
        -webkit-box-align: start;
        align-items: flex-start;
      }
    
      .middle-md {
        -ms-flex-align: center;
        -webkit-box-align: center;
        align-items: center;
      }
    
      .bottom-md {
        -ms-flex-align: end;
        -webkit-box-align: end;
        align-items: flex-end;
      }
    
      .around-md {
        -ms-flex-pack: distribute;
        justify-content: space-around;
      }
    
      .between-md {
        -ms-flex-pack: justify;
        -webkit-box-pack: justify;
        justify-content: space-between;
      }
    
      .first-md {
        -ms-flex-order: -1;
        -webkit-box-ordinal-group: 0;
        order: -1;
      }
    
      .last-md {
        -ms-flex-order: 1;
        -webkit-box-ordinal-group: 2;
        order: 1;
      }
    }
    
    @media #{$media-lg} {
    
      .col-lg,
      .col-lg-1,
      .col-lg-2,
      .col-lg-3,
      .col-lg-4,
      .col-lg-5,
      .col-lg-6,
      .col-lg-7,
      .col-lg-8,
      .col-lg-9,
      .col-lg-10,
      .col-lg-11,
      .col-lg-12 {
        -ms-flex: 0 0 auto;
        -webkit-box-flex: 0;
        flex: 0 0 auto;
      }
    
      .col-lg {
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        -webkit-box-flex: 1;
        flex-grow: 1;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        max-width: 100%;
      }
    
      .col-lg-1 {
        -ms-flex-preferred-size: 8.333%;
        flex-basis: 8.333%;
        max-width: 8.333%;
      }
    
      .col-lg-2 {
        -ms-flex-preferred-size: 16.667%;
        flex-basis: 16.667%;
        max-width: 16.667%;
      }
    
      .col-lg-3 {
        -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
        max-width: 25%;
      }
    
      .col-lg-4 {
        -ms-flex-preferred-size: 33.333%;
        flex-basis: 33.333%;
        max-width: 33.333%;
      }
    
      .col-lg-5 {
        -ms-flex-preferred-size: 41.667%;
        flex-basis: 41.667%;
        max-width: 41.667%;
      }
    
      .col-lg-6 {
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        max-width: 50%;
      }
    
      .col-lg-7 {
        -ms-flex-preferred-size: 58.333%;
        flex-basis: 58.333%;
        max-width: 58.333%;
      }
    
      .col-lg-8 {
        -ms-flex-preferred-size: 66.667%;
        flex-basis: 66.667%;
        max-width: 66.667%;
      }
    
      .col-lg-9 {
        -ms-flex-preferred-size: 75%;
        flex-basis: 75%;
        max-width: 75%;
      }
    
      .col-lg-10 {
        -ms-flex-preferred-size: 83.333%;
        flex-basis: 83.333%;
        max-width: 83.333%;
      }
    
      .col-lg-11 {
        -ms-flex-preferred-size: 91.667%;
        flex-basis: 91.667%;
        max-width: 91.667%;
      }
    
      .col-lg-12 {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
      }
    
      .col-lg-offset-1 {
        margin-left: 8.333%;
      }
    
      .col-lg-offset-2 {
        margin-left: 16.667%;
      }
    
      .col-lg-offset-3 {
        margin-left: 25%;
      }
    
      .col-lg-offset-4 {
        margin-left: 33.333%;
      }
    
      .col-lg-offset-5 {
        margin-left: 41.667%;
      }
    
      .col-lg-offset-6 {
        margin-left: 50%;
      }
    
      .col-lg-offset-7 {
        margin-left: 58.333%;
      }
    
      .col-lg-offset-8 {
        margin-left: 66.667%;
      }
    
      .col-lg-offset-9 {
        margin-left: 75%;
      }
    
      .col-lg-offset-10 {
        margin-left: 83.333%;
      }
    
      .col-lg-offset-11 {
        margin-left: 91.667%;
      }
    
      .start-lg {
        -ms-flex-pack: start;
        -webkit-box-pack: start;
        justify-content: flex-start;
        text-align: start;
      }
    
      .center-lg {
        -ms-flex-pack: center;
        -webkit-box-pack: center;
        justify-content: center;
        text-align: center;
      }
    
      .end-lg {
        -ms-flex-pack: end;
        -webkit-box-pack: end;
        justify-content: flex-end;
        text-align: end;
      }
    
      .top-lg {
        -ms-flex-align: start;
        -webkit-box-align: start;
        align-items: flex-start;
      }
    
      .middle-lg {
        -ms-flex-align: center;
        -webkit-box-align: center;
        align-items: center;
      }
    
      .bottom-lg {
        -ms-flex-align: end;
        -webkit-box-align: end;
        align-items: flex-end;
      }
    
      .around-lg {
        -ms-flex-pack: distribute;
        justify-content: space-around;
      }
    
      .between-lg {
        -ms-flex-pack: justify;
        -webkit-box-pack: justify;
        justify-content: space-between;
      }
    
      .first-lg {
        -ms-flex-order: -1;
        -webkit-box-ordinal-group: 0;
        order: -1;
      }
    
      .last-lg {
        -ms-flex-order: 1;
        -webkit-box-ordinal-group: 2;
        order: 1;
      }
    }
    
    .grid{
      width: 100%;
      display: grid;
      grid-auto-columns: 1fr;
    }
    
    

    external by Christopher Robert Van Wiemeersch  4  0  1  0

    tailwindcss-like SASS helpers

    tailwindcss-like SASS helpers: spacing-helpers.scss
    $spacings: (
      xxl: 110,
      xl: 80,
      l: 60,
      m: 40,
      s: 20,
      xs: 10,
      xx: 8,
    );
    
    
    $sides: (top, right, bottom, left);
    
    @each $sizeName, $value in $spacings {
      @each $side in $sides {
        .p#{str-slice($side, 0, 1)}-#{$sizeName} {
          padding-#{$side}: #{$value};
        }
    
        .-m#{str-slice($side, 0, 1)}-#{$sizeName} {
          margin-#{$side}: -#{$value};
        }
    
        .m#{str-slice($side, 0, 1)}-#{$sizeName} {
          margin-#{$side}: #{$value};
        }
      }
    
      .px-#{$sizeName} {
        padding-left: #{$value};
        padding-right: #{$value};
      }
      .py-#{$sizeName} {
        padding-top: #{$value};
        padding-bottom: #{$value};
      }
    
      .-mx-#{$sizeName} {
        margin-left: -#{$value};
        margin-right: -#{$value};
      }
      .-my-#{$sizeName} {
        margin-top: -#{$value};
        margin-bottom: -#{$value};
      }
    
      .mx-#{$sizeName} {
        margin-left: #{$value};
        margin-right: #{$value};
      }
      .my-#{$sizeName} {
        margin-top: #{$value};
        margin-bottom: #{$value};
      }
    }
    
    
    

    external by rafaortman  4  0  1  0

    Flex center menu items and expand its children to the parents' height

    Flex center menu items and expand its children to the parents' height: center_menu_items.scss
    ul {
        list-style: none;
        margin: 0;
        padding-left: 0;
        display: flex;
    
        li {
            display: flex;
            flex-direction: column;
            
            a {
              display: flex;
              justify-content: center;
              flex-direction: column;
              flex-grow: 1;
          }
        }
    }
    
    
    • Public Snippets
    • Channels Snippets