First Commit

3D Components/.gitignore

@@ -0,0 +1,4 @@
+norm.css
+
+Sass/style.css
+Sass/*.css.map

3D Components/Sass/assets/_alert.scss

@@ -0,0 +1,77 @@
+@mixin alert($color, $fg: $color) {
+    background: lighten($color, 10%);
+    border-color: $color;
+    color: darken($fg, 20%);
+
+    a {
+        color: darken($fg, 30%);
+
+        &:hover {
+            color: darken($fg, 40%);
+        }
+    }
+
+    .alert-close {
+        color: darken($fg, 20%);
+    }
+}
+
+.alert {
+    padding: 0.85em;
+    border: 1px solid $black;
+    @if $border-radius <= 0 {
+        border-radius: 3px;
+    } @else {
+        border-radius: $border-radius;
+    }
+    margin-bottom: 1em;
+    position: relative;
+
+    .alert-close {
+        position: absolute;
+        top: 50%;
+        right: 0.5em;
+        font-size: 1.5em;
+        font-weight: bold;
+        line-height: 1;
+        color: $black;
+        text-shadow: 0 1px 0 $black;
+        vertical-align: middle;
+        opacity: 0.2;
+        transition: all 0.2s ease-in-out;
+        transform: translateY(calc(-50% - 3px));
+
+        &:hover {
+            opacity: 0.5;
+            cursor: pointer;
+        }
+
+        &:active {
+            opacity: 0.8;
+        }
+    }
+
+    &.alert-primary {
+        @include alert($accent);
+    }
+
+    &.alert-secondary {
+        @include alert($accent-alt);
+    }
+
+    &.alert-success {
+        @include alert($green);
+    }
+
+    &.alert-danger {
+        @include alert($red);
+    }
+
+    &.alert-warning {
+        @include alert($orange);
+    }
+
+    &.alert-info {
+        @include alert($blue);
+    }
+}

3D Components/Sass/assets/_badge.scss

@@ -0,0 +1,55 @@
+@mixin badge($color, $fg: $color) {
+    background: $color;
+    background-image: linear-gradient(to top, darken($color, 5%), $color);
+    color: darken($fg, 30%);
+}
+
+.badge {
+    display: inline-block;
+    padding: 0.4em 0.6em;
+    background: $black;
+    @if $border-radius <= 0 {
+        border-radius: 3px;
+    } @else {
+        border-radius: $border-radius;
+    }
+    color: $white;
+    font-size: 0.8em;
+    font-weight: bold;
+    line-height: 1;
+    vertical-align: baseline;
+    white-space: nowrap;
+    text-align: center;
+
+    &.badge-primary {
+        @include badge($accent);
+    }
+
+    &.badge-secondary {
+        @include badge($accent-alt);
+    }
+
+    &.badge-success {
+        @include badge($green);
+    }
+
+    &.badge-danger {
+        @include badge($red);
+    }
+
+    &.badge-warning {
+        @include badge($orange);
+    }
+
+    &.badge-info {
+        @include badge($blue);
+    }
+
+    &.badge-dark {
+        @include badge($black, $white);
+    }
+
+    &.badge-light {
+        @include badge($white, $black);
+    }
+}

3D Components/Sass/assets/_banner.scss

@@ -0,0 +1,76 @@
+@mixin page-banner($color, $fg: $color) {
+    background: $color;
+    color: darken($fg, 20%);
+
+    a {
+        color: darken($fg, 30%);
+
+        &:hover {
+            color: darken($fg, 40%);
+        }
+    }
+
+    .alert-close {
+        color: darken($fg, 20%);
+    }
+}
+.page-banner {
+    padding: 0.5rem;
+    background: $accent;
+    color: $white;
+    text-align: center;
+    position: relative;
+
+    > * {
+        margin: 0.2rem 0;
+    }
+
+    .page-banner-close {
+        margin: 0;
+        position: absolute;
+        top: 50%;
+        right: 0.5em;
+        font-size: 1.5em;
+        font-weight: bold;
+        line-height: 1;
+        color: $black;
+        text-shadow: 0 1px 0 $black;
+        vertical-align: middle;
+        opacity: 0.2;
+        transition: all 0.2s ease-in-out;
+        transform: translateY(calc(-50% - 3px));
+
+        &:hover {
+            opacity: 0.5;
+            cursor: pointer;
+        }
+
+        &:active {
+            opacity: 0.8;
+        }
+    }
+
+    &.page-banner-primary {
+        @include page-banner($accent);
+    }
+
+    &.page-banner-secondary {
+        @include page-banner($accent-alt);
+    }
+
+    &.page-banner-success {
+        @include page-banner($green);
+    }
+
+    &.page-banner-danger {
+        @include page-banner($red);
+    }
+
+    &.page-banner-warning {
+        @include page-banner($orange);
+    }
+
+    &.page-banner-info {
+        @include page-banner($blue);
+    }
+}

3D Components/Sass/assets/_button.scss

@@ -0,0 +1,111 @@
+// Buttons
+@mixin btn($color, $fg: $color) {
+    background: $color;
+    background-image: linear-gradient(to top, darken($color, 5%), $color);
+    border-color: $color;
+    text-shadow: 0 1px 0 $color;
+    color: darken($fg, 30%);
+
+    &:hover {
+        background: darken($color, 5%);
+        background-image: linear-gradient(to bottom, darken($color, 5%), $color);
+        border-color: darken($color, 5%);
+    }
+
+    &:active {
+        background: darken($color, 10%);
+        border-color: darken($color, 10%);
+        box-shadow: 0 1px 2px rgba($color, 0.6);
+    }
+
+    &:focus {
+        border-color: darken($color, 5%);
+        box-shadow: 0 0 0 1px rgba($color, 0.2), 0 1px 2px rgba($color, 0.2);
+    }
+
+    &:disabled {
+        background: darken($color, 20%);
+        border-color: darken($color, 25%);
+        text-shadow: none;
+        color: darken($fg, 30%);
+    }
+}
+
+.btn {
+    display: inline-block;
+    padding: 0.5em 1em;
+    background: $black;
+    border: 1px solid $black;
+    @if $border-radius <= 0 {
+        border-radius: 3px;
+    } @else {
+        border-radius: $border-radius;
+    }
+    color: $white;
+    text-decoration: none;
+    text-shadow: 0 1px 0 $black;
+    box-shadow: 0 1px 2px rgba($black, 0.2);
+    transition: all 0.2s ease-in-out;
+
+    &:hover {
+        background: $black;
+        border-color: $black;
+        box-shadow: 0 1px 2px rgba($black, 0.2);
+        cursor: pointer;
+    }
+
+    &:active {
+        background: #000;
+        border-color: $black;
+        box-shadow: inset 0 1px 2px rgba($black, 0.3);
+    }
+
+    &:focus {
+        outline: none;
+        border-color: $black;
+        box-shadow: 0 0 0 1px rgba($black, 0.2), 0 1px 2px rgba($black, 0.2);
+    }
+
+    &:disabled {
+        background: #151515;
+        border-color: $black;
+        color: #333;
+        cursor: default;
+    }
+
+    &.btn-wide {
+        width: 100%;
+    }
+
+    &.btn-primary {
+        @include btn($accent);
+    }
+
+    &.btn-secondary {
+        @include btn($accent-alt);
+    }
+
+    &.btn-success {
+        @include btn($green);
+    }
+
+    &.btn-danger {
+        @include btn($red);
+    }
+
+    &.btn-warning {
+        @include btn($orange);
+    }
+
+    &.btn-info {
+        @include btn($blue);
+    }
+
+    &.btn-dark {
+        @include btn($black, #fefefe);
+    }
+
+    &.btn-light {
+        @include btn($white, #121212);
+    }
+}

3D Components/Sass/assets/_image-container.scss

@@ -0,0 +1,58 @@
+.img-container {
+    position: relative;
+    overflow: hidden;
+    background: $bg-color;
+    border: 0.2rem solid $accent;
+    @if $border-radius <= 0 {
+        border-radius: 3px;
+    } @else {
+        border-radius: $border-radius;
+    }
+    color: $fg-color;
+    margin-bottom: 1em;
+    box-shadow: 0 1px 2px rgba($black, 0.2);
+
+    &.img-container-primary {
+        border-color: $accent;
+    }
+
+    &.img-container-secondary {
+        border-color: $accent-alt;
+    }
+
+    &.img-container-success {
+        border-color: $green;
+    }
+
+    &.img-container-danger {
+        border-color: $red;
+    }
+
+    &.img-container-warning {
+        border-color: $orange;
+    }
+
+    &.img-container-info {
+        border-color: $blue;
+    }
+
+    &.img-container-dark {
+        border-color: $black;
+    }
+
+    &.img-container-light {
+        border-color: $white;
+    }
+
+    &.img-container-transparent {
+        background: transparent;
+        border: none;
+        color: $fg-color;
+    }
+
+    img {
+        display: block;
+        width: 100%;
+        height: auto;
+    }
+}

3D Components/Sass/assets/_tab.scss

@@ -0,0 +1,108 @@
+@mixin tab($color, $fg: $color) {
+    background: $color;
+    background-image: linear-gradient(to top, darken($color, 5%), $color);
+    border-color: $color;
+    text-shadow: 0 1px 0 $color;
+    color: darken($fg, 30%);
+
+    &:hover {
+        background: darken($color, 5%);
+        background-image: linear-gradient(to bottom, darken($color, 5%), $color);
+        border-color: darken($color, 5%);
+    }
+
+    &:active {
+        background: darken($color, 10%);
+        border-color: darken($color, 10%);
+        box-shadow: 0 1px 2px rgba($color, 0.6);
+    }
+
+    &:focus {
+        border-color: darken($color, 5%);
+        box-shadow: 0 0 0 1px rgba($color, 0.2), 0 1px 2px rgba($color, 0.2);
+    }
+
+    &:disabled {
+        background: darken($color, 20%);
+        border-color: darken($color, 25%);
+        text-shadow: none;
+        color: darken($fg, 30%);
+    }
+
+    &.active {
+        background: darken($color, 15%);
+        background-image: linear-gradient(to top, darken($color, 10%), darken($color, 15%));
+        border-color: 1px darken($color, 20%) solid;
+    }
+}
+
+.tabs {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: row;
+
+    .tab {
+        display: block;
+        margin: 0;
+        padding: 0.5em 1em;
+        background: $black;
+        border: 1px solid $black;
+        color: $white;
+        text-decoration: none;
+        text-shadow: 0 1px 0 $black;
+        transition: all 0.2s ease-in-out;
+
+        &:first-child {
+            border-top-left-radius: $border-radius;
+            border-bottom-left-radius: $border-radius;
+        }
+        &:last-child {
+            border-top-right-radius: $border-radius;
+            border-bottom-right-radius: $border-radius;
+        }
+
+        &:hover {
+            background: $black;
+            border-color: $black;
+            cursor: pointer;
+        }
+    
+        &:focus {
+            outline: none;
+            border-color: $black;
+        }
+    }
+
+    .tab-primary {
+        @include tab($accent);
+    }
+
+    .tab-secondary {
+        @include tab($accent-alt);
+    }
+
+    .tab-success {
+        @include tab($green);
+    }
+
+    .tab-danger {
+        @include tab($red);
+    }
+
+    .tab-warning {
+        @include tab($orange);
+    }
+
+    .tab-info {
+        @include tab($blue);
+    }
+
+    .tab-light {
+        @include tab($white, #121212);
+    }
+
+    .tab-dark {
+        @include tab($black, #fefefe);
+    }
+}

3D Components/Sass/style.scss

@@ -0,0 +1,44 @@
+/*
+ |-------------------------------------------------------------
+ | Sass stylesheet
+ |-------------------------------------------------------------
+*/
+
+$red: #B66467;
+$orange: #D8A657;
+$yellow: #D9BC8C;
+$green: #8C977D;
+$blue: #8DA3B9;
+$purple: #A988B0;
+$black: #333333;
+$white: #E8E3E3;
+
+$bg-color: #151515;
+$fg-color: #E8E3E3;
+
+$accent: $green;
+$accent-alt: $purple;
+
+$border-radius: 0.2rem;
+
+@import 'assets/button';
+@import 'assets/badge';
+@import 'assets/alert';
+@import 'assets/banner';
+@import 'assets/image-container';
+@import 'assets/tab';
+
+
+a {
+    color: $accent;
+    text-decoration: none;
+    transition: all 0.2s ease-in-out;
+
+    &:hover {
+        color: darken($accent, 10%);
+    }
+
+    &:active {
+        color: darken($accent, 20%);
+    }
+}

3D Components/index.html

@@ -0,0 +1,194 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sass Template</title>
+
+    <link rel="stylesheet" href="norm.css">
+    <link rel="stylesheet" href="Sass/style.css">
+</head>
+<style>
+    html {
+        background-color: #f5f5f5;
+    }
+    main {
+        margin: 0 auto 1rem auto;
+        padding: 2rem;
+
+        max-width: 1200px;
+    }
+    main > * {
+        max-width: 1200px;
+    }
+    main > *:last-child {
+        margin-bottom: 0;
+    }
+</style>
+<body>
+    <main>
+        <h1>Sass Templates</h1>
+        <p>Planning to use this in some projects, feel free to steal some code from here</p>
+        <hr>
+
+        <div class="tabs">
+            <button class="tab tab-light" onclick="openTab(event, 'Buttons')">Buttons</button>
+            <button class="tab tab-light" onclick="openTab(event, 'Alerts')">Alerts</button>
+            <button class="tab tab-light" onclick="openTab(event, 'Badges')">Badges</button>
+            <button class="tab tab-light" onclick="openTab(event, 'Banners')">Banners</button>
+            <button class="tab tab-light" onclick="openTab(event, 'Image-Containers')">Image Containers</button> 
+            <button class="tab tab-light" onclick="openTab(event, 'Tabs')">Tabs</button>           
+        </div>
+
+        <div id="Buttons" class="tabcontent" style="display: none;">
+            <h2>Buttons</h2>
+
+            <div>
+                <h3>Active</h3>
+                <button class="btn btn-primary">Primary</button>
+                <button class="btn btn-secondary">Secondary</button>
+                <button class="btn btn-success">Success</button>
+                <button class="btn btn-danger">Danger</button>
+                <button class="btn btn-warning">Warning</button>
+                <button class="btn btn-info">Info</button>
+                <button class="btn btn-light">Light</button>
+                <button class="btn btn-dark">Dark</button>
+            </div>
+            <div>
+                <h3>Disabled</h3>
+                <button class="btn btn-primary" disabled>Primary</button>
+                <button class="btn btn-secondary" disabled>Secondary</button>
+                <button class="btn btn-success" disabled>Success</button>
+                <button class="btn btn-danger" disabled>Danger</button>
+                <button class="btn btn-warning" disabled>Warning</button>
+                <button class="btn btn-info" disabled>Info</button>
+                <button class="btn btn-light" disabled>Light</button>
+                <button class="btn btn-dark" disabled>Dark</button>
+            </div>
+        </div>
+
+        <div id="Alerts" class="tabcontent" style="display: none;">
+            <h2>Alerts</h2>
+
+            <div class="alert alert-primary">Primary <a href="">Gwa gwa</a>
+                <span class="alert-close">&times;</span>
+            </div>
+            <div class="alert alert-secondary">Secondary <a href="">Gwa gwa</a>
+                <span class="alert-close">&times;</span>
+            </div>
+            <div class="alert alert-success">Success <a href="">Gwa gwa</a>
+                <span class="alert-close">&times;</span>
+            </div>
+            <div class="alert alert-danger">Danger <a href="">Gwa gwa</a>
+                <span class="alert-close">&times;</span>
+            </div>
+            <div class="alert alert-warning">Warning <a href="">Gwa gwa</a>
+                <span class="alert-close">&times;</span>
+            </div>
+            <div class="alert alert-info">Info <a href="">Gwa gwa</a>
+                <span class="alert-close">&times;</span>
+            </div>
+        </div>
+
+        <div id="Badges" class="tabcontent" style="display: none;">
+            <h2>Badges</h2>
+
+            <span class="badge badge-primary">Primary</span>
+            <span class="badge badge-secondary">Secondary</span>
+            <span class="badge badge-success">Success</span>
+            <span class="badge badge-danger">Danger</span>
+            <span class="badge badge-warning">Warning</span>
+            <span class="badge badge-info">Info</span>
+            <span class="badge badge-light">Light</span>
+            <span class="badge badge-dark">Dark</span>
+        </div>
+
+        <div id="Banners" class="tabcontent" style="display: none;">
+            <h2>Banners</h2>
+
+            <div class="page-banner page-banner-primary">
+                <p>Primary <a href="">link</a></p>
+                <span class="page-banner-close">&times;</span>
+            </div>
+            <div class="page-banner page-banner-secondary">
+                <p>Secondary <a href="">link</a></p>
+                <span class="page-banner-close">&times;</span>
+            </div>
+            <div class="page-banner page-banner-success">
+                <p>Success <a href="">link</a></p>
+                <span class="page-banner-close">&times;</span>
+            </div>
+            <div class="page-banner page-banner-danger">
+                <p>Danger <a href="">link</a></p>
+                <span class="page-banner-close">&times;</span>
+            </div>
+            <div class="page-banner page-banner-warning">
+                <p>Warning <a href="">link</a></p>
+                <span class="page-banner-close">&times;</span>
+            </div>
+            <div class="page-banner page-banner-info">
+                <p>Info <a href="">link</a></p>
+                <span class="page-banner-close">&times;</span>
+            </div>
+        </div>
+
+        <div id="Image-Containers" class="tabcontent" style="display: none;">
+            <h2>Image container</h2>
+
+            <div class="img-container" style="width: 250px;">
+                <img src="racc.jpg" alt="Image">
+                <div class="div div-transparent">
+                    <p>Racc ooon</p>
+                </div>
+            </div>
+        </div>
+
+        <div id="Tabs" class="tabcontent" style="display: none;">
+            <h2>Tabs</h2>
+
+            <div class="tabs">
+                <button class="tab tab-primary">Primary</button>
+                <button class="tab tab-secondary">Secondary</button>
+                <button class="tab tab-warning">Warning</button>
+                <button class="tab tab-info">Info</button>
+                <button class="tab tab-danger">Danger</button>
+                <button class="tab tab-light">Light</button>
+                <button class="tab tab-dark">Dark</button>
+            </div>
+        </div>
+    </main>
+    <script>
+        // Tabs
+        function openTab(evt, tabName) {
+            var i, tabcontent, tablinks;
+            tabcontent = document.getElementsByClassName("tabcontent");
+            for (i = 0; i < tabcontent.length; i++) {
+                tabcontent[i].style.display = "none";
+            }
+            tablinks = document.getElementsByClassName("tab");
+            for (i = 0; i < tablinks.length; i++) {
+                tablinks[i].className = tablinks[i].className.replace(" active", "");
+            }
+            document.getElementById(tabName).style.display = "block";
+            evt.currentTarget.className += " active";
+        }
+
+        // Alerts
+        const alertClose = document.querySelectorAll('.alert-close');
+        alertClose.forEach((close) => {
+            close.addEventListener('click', (e) => {
+                e.target.parentElement.style.display = 'none';
+            });
+        });
+
+        // Banners
+        const pageBannerClose = document.querySelectorAll('.page-banner-close');
+        pageBannerClose.forEach((close) => {
+            close.addEventListener('click', (e) => {
+                e.target.parentElement.style.display = 'none';
+            });
+        });
+    </script>
+</body>
+</html>