vbax-becky_thatcher 0.1.0

data/lib/vbax/sass/becky_thatcher/custom/_global.scss

@@ -0,0 +1,172 @@
+// Nucleo icons
+
+.section-nucleo-icons .icons-container {
+    position: relative;
+    max-width: 100%;
+    height: 360px;
+    margin: 0 auto;
+    z-index: 1;
+}
+
+.section-nucleo-icons {
+
+    --icon-size: 5rem;
+    --icon-sm-size: 3.75rem;
+    --gutter: 7rem;
+
+    .icons-container {
+        i {
+            position: absolute;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            background: $white;
+            z-index: 1;
+            transform: translate(-50%, -50%);
+            @include box-shadow($box-shadow);
+            transition: all .2s cubic-bezier(.25,.65,.9,.75);
+
+            &.icon {
+                width: var(--icon-size);
+                height: var(--icon-size);
+                font-size: 1.7em;
+            }
+
+            &.icon-sm {
+                width: var(--icon-sm-size);
+                height: var(--icon-sm-size);
+                font-size: 1.5em;
+            }
+
+            &:nth-child(1) {
+                font-size: 42px;
+                color: theme-color("warning");
+                z-index: 2;
+            }
+        }
+
+        &:not(.on-screen) {
+            i {
+                transform: translate(-50%, -50%);
+                left: 50%;
+                top: 50%;
+
+                &:not(:nth-child(1)) {
+                    opacity: 0;
+                } 
+            }
+        }
+
+        &.on-screen {
+
+            i {
+                opacity: 1;
+
+                &:nth-child(1) {
+                    left: 50%;
+                    top: 50%;
+                    font-size: 42px;
+                    color: theme-color("warning");
+                }
+
+                &:nth-child(2) {
+                    left: calc(50% + (var(--gutter) * 1.7));
+                    top: 50%;
+                }
+
+                &:nth-child(3) {
+                    left: calc(50% + var(--gutter));
+                    top: calc(50% + var(--gutter));
+                }
+
+                &:nth-child(4) {
+                    left: calc(50% + var(--gutter));
+                    top: calc(50% - var(--gutter));
+                }
+
+                &:nth-child(5) {
+                    left: calc(50% + (var(--gutter) * 4));
+                    top: 50%;
+                }
+
+                &:nth-child(6) {
+                    left: calc(50% + (var(--gutter) * 2.7));
+                    top: calc(50% + (var(--gutter) * 1.5));
+                }
+
+                &:nth-child(7) {
+                    left: calc(50% + (var(--gutter) * 2.7));
+                    top: calc(50% - (var(--gutter) * 1.5));
+                }
+
+                &:nth-child(8) {
+                    left: calc(50% - (var(--gutter) * 1.7));
+                    top: 50%;
+                }
+
+                &:nth-child(9) {
+                    left: calc(50% - var(--gutter));
+                    top: calc(50% + var(--gutter));
+                }
+
+                &:nth-child(10) {
+                    left: calc(50% - var(--gutter));
+                    top: calc(50% - var(--gutter));
+                }
+
+                &:nth-child(11) {
+                    left: calc(50% - (var(--gutter) * 4));
+                    top: 50%;
+                }
+
+                &:nth-child(12) {
+                    left: calc(50% - (var(--gutter) * 2.7));
+                    top: calc(50% + (var(--gutter) * 1.5));
+                }
+
+                &:nth-child(13) {
+                    left: calc(50% - (var(--gutter) * 2.7));
+                    top: calc(50% - (var(--gutter) * 1.5));
+                } 
+            }
+            
+        }
+    }
+}
+
+
+// Blurable sections
+
+.blur--hover {
+    position: relative;
+
+    .blur-item {
+        transition: 1s cubic-bezier(.19,1,.22,1);
+        will-change: transform;
+        filter: blur(0);
+        opacity: 1;
+    }
+
+    .blur-hidden {
+        position: absolute;
+        top: calc(50% + 7px);
+        left: 50%;
+        transform: translate(-50%, -50%);
+        opacity: 0;
+        transition: $transition-base;
+        z-index: 100;
+    }
+    &:hover {
+        .blur-item {
+            opacity: .8;
+            filter: blur(10px);
+            transform: scale(.95);
+            z-index: 1;
+        }
+        .blur-hidden {
+            opacity: 1;
+            top: 50%;
+        }
+    }
+}

data/lib/vbax/sass/becky_thatcher/custom/_grid.scss

@@ -0,0 +1,5 @@
+@include media-breakpoint-up(xl) {
+	.container-lg {
+		max-width: 1160px;
+	}
+}

data/lib/vbax/sass/becky_thatcher/custom/_icons.scss

@@ -0,0 +1,92 @@
+.icon {
+	width: $icon-size;
+	height: $icon-size;
+
+	i, svg {
+		font-size: $icon-size - .75;
+	}
+}
+
+.icon + .icon-text {
+	padding-left: 1rem;
+	width: calc(100% - #{$icon-size} - 1);
+}
+
+.icon-xl {
+	width: $icon-size-xl;
+	height: $icon-size-xl;
+
+	i, svg {
+		font-size: $icon-size-xl - .75;
+	}
+}
+
+.icon-xl + .icon-text {
+	width: calc(100% - $icon-size-xl - 1);
+}
+
+.icon-lg {
+	width: $icon-size-lg;
+	height: $icon-size-lg;
+
+	i, svg {
+		font-size: $icon-size-lg - .75;
+	}
+}
+
+.icon-lg + .icon-text {
+	width: calc(100% - $icon-size-lg - 1);
+}
+
+.icon-sm {
+	width: $icon-size-sm;
+	height: $icon-size-sm;
+
+	i, svg {
+		font-size: $icon-size-sm - .75;
+	}
+}
+
+.icon-sm + .icon-text {
+	width: calc(100% - $icon-size-sm - 1);
+}
+
+
+// Icons included in shapes
+.icon-shape {
+	padding: 12px;
+	text-align: center;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+
+
+	i, svg {
+		font-size: 1.25rem;
+	}
+
+	&.icon-lg {
+		i, svg {
+			font-size: 1.625rem;
+		}
+	}
+
+	&.icon-sm {
+		i, svg {
+			font-size: .875rem;
+		}
+	}
+
+	svg {
+		width: 30px;
+		height: 30px;
+	}
+
+}
+
+@each $color, $value in $theme-colors {
+	.icon-shape-#{$color} {
+		@include icon-shape-variant(theme-color($color));
+	}
+}

data/lib/vbax/sass/becky_thatcher/custom/_images.scss

@@ -0,0 +1,7 @@
+img{
+    max-width: 100%;
+    border-radius: $border-radius-sm;
+}
+.img-raised{
+    box-shadow: $box-shadow-raised;
+}

data/lib/vbax/sass/becky_thatcher/custom/_info-areas.scss

@@ -0,0 +1,170 @@
+.info{
+    &.info-hover{
+        .info-title{
+            transition: color .4s;
+        }
+
+        &:hover{
+            .icon{
+                @include transform-translate-y(-.5rem);
+
+                &.icon-primary{
+                    &.icon-circle{
+                        box-shadow: 0px 15px 30px 0px rgba(249, 99, 50, 0.3);
+                    }
+                }
+                &.icon-info{
+                    &.icon-circle{
+                        box-shadow: 0px 15px 35px 0px rgba(44, 168, 255, 0.3);
+                    }
+                }
+                &.icon-success{
+                    &.icon-circle{
+                        box-shadow: 0px 15px 35px 0px rgba(24, 206, 15, 0.3);
+                    }
+                }
+                &.icon-warning{
+                    &.icon-circle{
+                        box-shadow: 0px 15px 35px 0px rgba(255, 178, 54, 0.3);
+                    }
+                }
+                &.icon-danger{
+                    &.icon-circle{
+                        box-shadow: 0px 15px 35px 0px rgba(255, 54, 54, 0.3);
+                    }
+                }
+
+                &.icon-info + .info-title{
+                    color: $info;
+                }
+
+                &.icon-warning + .info-title{
+                    color: $warning;
+                }
+
+                &.icon-danger + .info-title{
+                    color: $danger;
+                }
+
+                &.icon-primary + .info-title{
+                    color: $primary;
+                }
+
+                &.icon-success + .info-title{
+                    color: $success;
+                }
+            }
+        }
+    }
+
+    .icon{
+        color: $default;
+        transition: transform .4s, box-shadow .4s;
+
+        > i{
+            font-size: 2.3em;
+        }
+
+        &.icon-circle{
+            max-width: 70px;
+            width: 70px;
+            height: 70px;
+            margin: 0 auto;
+            border-radius: 50%;
+            box-shadow: 0px 9px 35px -6px rgba(0, 0, 0, 0.3);
+            font-size: $font-size-xs;
+            background-color: $white;
+            position: relative;
+
+            i{
+                line-height: 2.6em;
+            }
+        }
+    }
+
+    .info-title{
+        margin: $margin-base-vertical 0 5px;
+        padding: 0 15px;
+        color: $black;
+        font-weight: $font-weight-bold;
+    }
+    p{
+        color: $default;
+        padding: 0 15px;
+        font-size: 1.1em;
+    }
+}
+
+.info-horizontal{
+    text-align: left !important;
+
+    .icon{
+        float: left;
+        margin-top: 23px;
+        margin-right: 10px;
+
+        >i{
+            font-size: 2em;
+        }
+
+        &.icon-circle{
+            width: 65px;
+            height: 65px;
+            max-width: 65px;
+            margin-top: 8px;
+
+            i{
+                display: table;
+                margin: 0 auto;
+                line-height: 3.5;
+                font-size: 1.9em;
+            }
+        }
+    }
+    .description{
+        overflow: hidden;
+    }
+
+}
+
+.icon{
+    &.icon-primary{
+        color: $brand-primary;
+
+        &.icon-circle{
+            box-shadow: 0px 9px 30px -6px rgba($primary, .5);
+        }
+    }
+    &.icon-info{
+        color: $brand-info;
+
+        &.icon-circle{
+            box-shadow: 0px 9px 30px -6px rgba($info, .5);
+        }
+    }
+    &.icon-success{
+        color: $brand-success;
+
+        &.icon-circle{
+            box-shadow: 0px 9px 30px -6px rgba($success, .5);
+        }
+    }
+    &.icon-warning{
+        color: $brand-warning;
+
+        &.icon-circle{
+            box-shadow: 0px 9px 30px -6px rgba($warning, .5);
+        }
+    }
+    &.icon-danger{
+        color: $brand-danger;
+
+        &.icon-circle{
+            box-shadow: 0px 9px 30px -6px rgba($danger, .5);
+        }
+    }
+
+    &.icon-white{
+        color: $white;
+    }
+}