design2 – 7-1 problem set

Rework the bootstrap button solution into a 7-1 architecture. At the bottom is the main.scss code you might use from the button solution. Be sure to do the following:

• Separate parts of your scss code from main.scss into appropriate folders and files. I’m not going to name which are which as I think it’s good for you to sort through the 7-1 architecture’s structure for practice.
• Make sure your main.scss file only @include statements to include all your partial files.
• Upload and link the follow files and folders. Note I’m not naming the partial filenames and where they should be organized intentionally. That’s part of the assignment to figure out!
  • buttons-v2/index.html
  • buttons-v2/package.json
  • buttons-v2/css/style.css
  • buttons-v2/sass/main.scss
  • buttons-v2/sass/all-the-different-7-1-folders/and-the-partials
• And remember to make sure that everything works! Follow the node sass setup cheat sheet to help!

$color-primary: #007bff;
$color-secondary: #6c757d;
$color-success: #28a745;
$color-info: #17a2b8;
$color-warning: #ffc107;
$color-danger: #dc3545;
$color-light: #f8f9fa;
$color-dark: #343a40;

$color-white: #ffffff;
$color-black: #212529;

$colors: (primary: $color-primary,
    secondary: $color-secondary,
    success: $color-success,
    info: $color-info,
    warning: $color-warning,
    danger: $color-danger,
    light: $color-light,
    dark: $color-dark,
);

@function color-yiq($color) {
    $r: red($color);
    $g: green($color);
    $b: blue($color);

    $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;

    @if ($yiq >=150) {
        @return $color-black;
    }

    @else {
        @return $color-white;
    }
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

html {
    font-size: 100%;
}

body {
    font-family: sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    color: $color-black;
    line-height: 1.7;
    padding: 3rem;
    box-sizing: border-box;
}

button {
    cursor: pointer;
}

.btn {
    display: inline-block;
    font-weight: 400;
    color: $color-black;
    text-align: center;
    vertical-align: middle;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

    @each $colorName,
    $hex in $colors {
        &-outline-#{$colorName} {
            color: $hex;
            border-color: $hex;

            &:hover {
                color: color-yiq($hex);
                background-color: $hex;
                border-color: $hex;
            }
        }
    }

    // &-outline {
    //     &-danger {
    //         color: $color-danger;
    //         border-color: $color-danger;

    //         &:hover {
    //             color: $color-white;
    //             background-color: $color-danger;
    //             border-color: $color-danger;
    //         }
    //     }

    //     &-primary {
    //         color: $color-primary;
    //         border-color: $color-primary;


    //         &:hover {
    //             color: $color-white;
    //             background-color: $color-primary;
    //             border-color: $color-primary;
    //         }
    //     }
    // }
}