sebastiano-guerriero

@include breakpoint(md) {
  .block--md {
    display: block;
  }
  
  .inline-block--md {
    display: inline-block;
  }
  
  .inline--md {

sebastiano-guerriero

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;

sebastiano-guerriero

.display {
  display: block;
}

.hide {
  display: none;
}

sebastiano-guerriero

// clearfix
@mixin clearfix {
	&::after {
        content: "";
        display: block;
        clear: both;
    }
}

// edit font rendering -> tip: use for light text on dark backgrounds

sebastiano-guerriero

/* -------------------------------- 

Buttons

-------------------------------- */

:root {
    --btn-font-size: 1em;
    --btn-sm: calc(var(--btn-font-size) - 0.2em);
    --btn-md: calc(var(--btn-font-size) + 0.2em);

sebastiano-guerriero

/* buttons group */
.btns {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: calc(-1 * var(--space-xs));

    > * {
        margin-right: var(--space-xs);
        margin-bottom: var(--space-xs);

sebastiano-guerriero

.btn {
    display: inline-flex;
    position: relative;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1;

    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--btn-radius);
    font-size: var(--btn-font-size);

sebastiano-guerriero

<button class="btn btn--primary icon-text-aligner">
    <span>Button</span>
    <svg class="icon"><use href="#icon-arrow-right" xlink:href="#icon-arrow-right"/></svg>
</button>

sebastiano-guerriero

:root {
    --btn-font-size: 1em;
    --btn-sm: calc(var(--btn-font-size) - 0.2em);
    --btn-md: calc(var(--btn-font-size) + 0.2em);
    --btn-lg: calc(var(--btn-font-size) + 0.4em);

    --btn-radius: var(--radius);
}

/* button size */

sebastiano-guerriero

// edit font rendering -> tip: use for light text on dark backgrounds
@mixin fontSmooth {
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}