Neurolens Design System

Buttons 

<section class="nl-mb-5">
    <h2 class="nl-text-xl nl-font-burin nl-mb-2">Examples</h2>
    <div class="nl-inline-flex nl-flex-col nl-flex-align-start nl-gap-4">
        <button type="button" class="nl-button">Primary Button</button>
        <button type="button" class="nl-button-accent">Accent Button</button>
        <button type="button" class="nl-button nl-button--hollow">Hollow Primary Button</button>
        <button type="button" class="nl-button-accent nl-button--hollow">Hollow Accent Button</button>
        <a href="#" class="nl-button">
            Primary Button
        </a>
        <div class="nl-p-4 nl-bg-black">
            <button type="button" class="nl-button-ghost">Ghost Button</button>
        </div>
    </div>
</section>
<section class="nl-mb-5">
    <h2 class="nl-text-xl nl-font-burin nl-mt-4 nl-mb-2">Sizes</h2>
    <div class="nl-inline-flex nl-flex-col nl-flex-align-start nl-gap-4">
        <button type="button" class="nl-button nl-button--sm">Small Button</button>
        <button type="button" class="nl-button">Default Button</button>
        <button type="button" class="nl-button nl-button--lg">Large Button</button>
    </div>
</section>

<section class="nl-mb-5">
    <h2 class="nl-text-lg nl-font-burin nl-mt-4 nl-mb-2">Responsive Sizing</h2>
    <div class="nl-inline-flex nl-flex-col nl-flex-align-start">
        <button type="button" class="nl-button nl-button--sm md:nl-button--md xl:nl-button--lg">
            Resizing Button
        </button>
    </div>
</section>
<section class="nl-mb-5">
    <h2 class="nl-font-burin nl-mt-4 nl-mb-2">Icons</h2>
    <button type="button" class="nl-button nl-flex-justify-between">
        Button With Icon
        <svg class="nl-ml-2 nl-block nl-w-3" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" class="svg-inline--fa fa-arrow-right fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
            <path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path>
        </svg>
    </button>
</section>
 
<section class="nl-mb-5">
<h2 class="nl-text-xl nl-font-burin nl-mb-2">Examples</h2>
<div class="nl-inline-flex nl-flex-col nl-flex-align-start nl-gap-4">
    <button type="button" class="nl-button">Primary Button</button>
    <button type="button" class="nl-button-accent">Accent Button</button>
    <button type="button" class="nl-button nl-button--hollow">Hollow Primary Button</button>
    <button type="button" class="nl-button-accent nl-button--hollow">Hollow Accent Button</button>
    <a href="#" class="nl-button">
        Primary Button
    </a>
    <div class="nl-p-4 nl-bg-black">
        <button type="button" class="nl-button-ghost">Ghost Button</button>
    </div>
</div>
</section>
<section class="nl-mb-5">
<h2 class="nl-text-xl nl-font-burin nl-mt-4 nl-mb-2">Sizes</h2>
<div class="nl-inline-flex nl-flex-col nl-flex-align-start nl-gap-4">
    <button type="button" class="nl-button nl-button--sm">Small Button</button>
    <button type="button" class="nl-button">Default Button</button>
    <button type="button" class="nl-button nl-button--lg">Large Button</button>
</div>
</section>

<section class="nl-mb-5">
<h2 class="nl-text-lg nl-font-burin nl-mt-4 nl-mb-2">Responsive Sizing</h2>
<div class="nl-inline-flex nl-flex-col nl-flex-align-start">
    <button type="button" class="nl-button nl-button--sm md:nl-button--md xl:nl-button--lg">
        Resizing Button
    </button>
</div>    
</section>
<section class="nl-mb-5">
<h2 class="nl-font-burin nl-mt-4 nl-mb-2">Icons</h2>
<button type="button" class="nl-button nl-flex-justify-between">
    Button With Icon        
    <svg class="nl-ml-2 nl-block nl-w-3" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" class="svg-inline--fa fa-arrow-right fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg>
</button>
</section>
 
{
  "title": "Buttons"
}
  • Content: 
    $default-button: map-get($button-sizes, md);

// Includes nested form elements we cannot use @extends for
.nl-button,
.nl-button-accent,
.nl-button-ghost,
.nl-form input[type="submit"],
form.hs-form input[type="submit"] {
    @extend .nl-font-museo, .nl-rounded, .nl-no-underline;
    --font-size: #{map-get($default-button, font-size)};
    --padding-x: #{map-get($default-button, padding-x)};
    --padding-y: #{map-get($default-button, padding-y)};
    align-items: center;
    background: var(--background);
    border: 1px solid var(--border-color);
    color: var(--color);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--font-size);
    font-weight: map-get($text-weights, 'normal');
    justify-content: center;
    padding: var(--padding-y) var(--padding-x);
    transition-property: border-color, color, background-color;
    transition-duration: 200ms;
    transition-timing-function: ease-in;
    
    @media (prefers-reduced-motion: reduce) {
        transition: none !important;
    }
    
    &:hover,
    &:focus {
        background: var(--color);
        color: var(--background);
    }
    
    svg, 
    img {
        display: block; // All SVG's or img tags need to be blocks
    }
}

.nl-button {
    --background: var(--nl-blue);
    --border-color: var(--background);
    --color: var(--nl-white);
}

.nl-button-accent {
    --background: var(--nl-green);
    --border-color: var(--background);
    --color: var(--nl-white);    
}

.nl-button-ghost {
    --background: transparent;
    --color: var(--nl-white);
    --border-color: var(--nl-white);
    
    &:hover,
    &:focus {
        background: var(--nl-white);
        color: var(--nl-blue);
    }
}

.nl-button--hollow {
    background: var(--color);
    color: var(--background);
    
    &:hover {
        background: var(--background);
        color: var(--color);
    }
}

// Sizing

@each $size, $values in $button-sizes {
    @if $size != 'md' {        
        $padding-x: map-get($values, padding-x);
        $padding-y: map-get($values, padding-y);
        $font-size: map-get($values, font-size);
        
        .nl-button--#{$size} {
            --font-size: #{$font-size};
            --padding-x: #{$padding-x};
            --padding-y: #{$padding-y};
        }
    }
}

@each $bp-label, $bp-value in $breakpoints {
    @media (min-width: #{$bp-value}) {        
        @each $size, $values in $button-sizes {      
            $padding-x: map-get($values, padding-x);
            $padding-y: map-get($values, padding-y);
            $font-size: map-get($values, font-size);
            
            .#{$bp-label}\:nl-button--#{$size} {
                --font-size: #{$font-size};
                --padding-x: #{$padding-x};
                --padding-y: #{$padding-y};            
            }                    
        }        
    }
}
  • URL: /components/raw/buttons/_button.scss
  • Filesystem Path: src/components/03-components/buttons/_button.scss
  • Size: 2.9 KB

No notes defined.