Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/*==
*== Hexagon
*== ======================================= ==*/
$hexagon-size: 184px;
$sin60: 0.86602540;
$hexagon-height: $hexagon-size / $sin60;
.hexagon {
&, * { transition: 0.3s linear; }
display: inline-block;
vertical-align: middle;
text-align: center;
text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
width: $hexagon-size;
height: $hexagon-size * 2;
margin-top: -50px;
&__helper {
display: flex;
align-items: center;
width: 100%;
height: 100%;
}
&__content {
position: relative;
//overflow: hidden;
visibility: visible;
color: #ffffff;
background: $main-color;
width: 100%;
height: $hexagon-height;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
@include font(16px, 24px);
font-weight: 600;
text-transform: uppercase;
padding: 20px;
&::after {
//content: "";
background: red url("/design/images/hex-arrow.png");
width: 25px;
height: 10px;
position: absolute;
}
}
&, &__helper { overflow: hidden; visibility: hidden; }
& { transform: rotate(120deg); }
&__helper, &__content { transform: rotate(-60deg); }
&:hover &__content {
background: lighten($accent-color, 0.7);
}
}
.hexagon-scheme {
position: relative;
height: 614px;
overflow: hidden;
$hs: 4px; // half space
&__item {
position: absolute;
left: 50%;
top: 0;
margin-left: $hexagon-size / -2;
}
&__item:nth-child(2) {
margin-left: -($hexagon-size * 1) - $hs * 0.5;
top: $hexagon-height * 0.75 + $hs;
opacity: 0.93;
}
&__item:nth-child(3) {
margin-left: ($hexagon-size * 0) + $hs * 0.5;
top: $hexagon-height * 0.75 + $hs;
opacity: 0.93;
}
&__item:nth-child(4) {
margin-left: -($hexagon-size * 2) - $hs * 0.5 * 3;
top: $hexagon-height * 0.75 + $hs;
opacity: 0.7;
}
&__item:nth-child(5) {
margin-left: ($hexagon-size * 1) + $hs * 0.5 * 3;
top: $hexagon-height * 0.75 + $hs;
opacity: 0.7;
}
&__item:nth-child(6) {
margin-left: -($hexagon-size * 1.5) - $hs * 0.5 * 2;
top: ($hexagon-height * 0.75 + $hs) * 2;
opacity: 0.7;
}
&__item:nth-child(7) {
margin-left: ($hexagon-size * 0.5) + $hs * 0.5 * 2;
top: ($hexagon-height * 0.75 + $hs) * 2;
opacity: 0.7;
}
}
@mixin hexagon-scheme-size($hexagon-size) {
$hexagon-height: $hexagon-size / $sin60;
.hexagon {
width: $hexagon-size;
height: $hexagon-size * 2;
&__content { height: $hexagon-height; }
}
.hexagon-scheme {
$hs: 4px; // half space
&__item {
margin-left: $hexagon-size / -2;
}
&__item:nth-child(2) {
margin-left: -($hexagon-size * 1) - $hs * 0.5;
top: $hexagon-height * 0.75 + $hs;
}
&__item:nth-child(3) {
margin-left: ($hexagon-size * 0) + $hs * 0.5;
top: $hexagon-height * 0.75 + $hs;
}
&__item:nth-child(4) {
margin-left: -($hexagon-size * 2) - $hs * 0.5 * 3;
top: $hexagon-height * 0.75 + $hs;
}
&__item:nth-child(5) {
margin-left: ($hexagon-size * 1) + $hs * 0.5 * 3;
top: $hexagon-height * 0.75 + $hs;
}
&__item:nth-child(6) {
margin-left: -($hexagon-size * 1.5) - $hs * 0.5 * 2;
top: ($hexagon-height * 0.75 + $hs) * 2;
}
&__item:nth-child(7) {
margin-left: ($hexagon-size * 0.5) + $hs * 0.5 * 2;
top: ($hexagon-height * 0.75 + $hs) * 2;
}
}
}
@include media-breakpoint-down(lg) {
@include hexagon-scheme-size(160px);
.hexagon-scheme { height: 514px; }
.hexagon { margin-top: -50px;}
.hexagon__content { @include font(15px); padding: 15px; }
}
@include media-breakpoint-down(sm) {
@include hexagon-scheme-size(126px);
.hexagon-scheme { height: 400px; }
.hexagon { margin-top: -50px;}
.hexagon__content { @include font(12px); padding: 15px; }
}
@include media-breakpoint-down(xs) {
@include hexagon-scheme-size(70px);
.hexagon-scheme { height: 240px; }
.hexagon { margin-top: -20px;}
.hexagon__content { @include font(9px); padding: 5px; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment