<div class="item-cell " data-font="" data-id="">
<a class="item-cell__content" href="#">
<div class="item-cell__main-text">
Abg
</div>
<span class="item-cell__sub-text text-small">
Flex 0.1
</span>
</a>
</div>
{% set element = data.link ? 'a' : 'div' %}
{% set lineHeight %}
{% if data.customLineHeight %}style="line-height: {{ data.lineHeight }}em"{% endif %}
{% endset %}
<div class="item-cell {{ modifier }} {{ class }}" data-font="{{ data.fontPath }}" data-id="{{ data.fontId }}">
<{{ element }} class="item-cell__content" {% if data.link %}href="{{ data.link }}"{% endif %}>
{% if data.mainText %}
<div class="item-cell__main-text" {{ lineHeight }}>
{{ data.mainText }}
</div>
{% endif %}
{% if data.subText %}
<span class="item-cell__sub-text text-small">
{{ data.subText }}
</span>
{% endif %}
</{{ element }}>
</div>
{
"language": "en-US",
"data": {
"mainText": "Abg",
"subText": "Flex 0.1",
"link": "#"
}
}
.item-cell {
display: block;
background-color: var(--color-background);
transition: $transition-duration $transition-easing;
transition-property: box-shadow, background-color;
font-size: 50px;
line-height: 50px;
@include bp(sm-min) {
font-size: 100px;
line-height: 100px;
}
&.item-cell--ratio {
display: flex;
@include aspect-ratio(100, 100, 'item-cell__content');
}
&:hover {
@media (hover: hover) {
background-color: var(--color-brand);
}
}
&.item-cell--glyph {
transition-property: background-color, color;
font-size: 20px;
line-height: 20px;
margin: -1px;
pointer-events: all;
@include bp(sm-min) {
font-size: 40px;
line-height: 40px;
}
&:hover {
@media (hover: hover) {
background-color: var(--color-background);
color: var(--color-text);
}
}
}
}
.item-cell__content {
position: relative;
display: flex;
height: 100%;
flex-direction: column;
justify-content: center;
padding: 48px 16px;
transition-property: none;
@include bp(sm-min) {
padding: 64px 32px;
}
.item-cell--ratio & {
align-items: center;
padding: 0;
}
&:before {
display: none;
}
&:after {
display: none;
}
.item-cell--glyph & {
transition: $transition-duration $transition-easing;
transition-property: box-shadow, background-color, color, transform;
box-shadow: 0 0 0 1px var(--color-brand) inset;
background-color: var(--color-background);
color: var(--color-text);
pointer-events: none;
}
.item-cell--glyph.is-shrinking & {
z-index: map_get($zindex, itemCellAnimating);
}
.item-cell--glyph.is-active & {
z-index: map_get($zindex, itemCellActive);
}
.item-cell--glyph:hover & {
@media (hover: hover) {
transform: scale(2);
box-shadow: 0 0 0 .5px var(--color-brand) inset;
z-index: map_get($zindex, itemCellActive);
}
}
}
.item-cell__main-text {
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: normal;
transition: color $transition-duration $transition-easing;
.item-cell--glyph & {
overflow: visible;
padding: 0;
}
.item-cell:hover & {
@media (hover: hover) {
color: var(--color-text-inverse);
}
}
.item-cell--glyph:hover & {
@media (hover: hover) {
color: var(--color-text);
}
}
}
.item-cell__sub-text {
position: absolute;
opacity: .5;
padding-left: 16px;
bottom: 6px;
left: 0;
transition: color $transition-duration $transition-easing;
@include bp(sm-min) {
padding-left: 32px;
bottom: 11px;
}
.item-cell:hover & {
@media (hover: hover) {
color: var(--color-text-inverse);
}
}
.item-cell--ratio & {
bottom: 24px;
padding-left: 0;
right: 0;
text-align: center;
@include bp(sm-min) {
bottom: 20%;
}
}
}
import './item-cell.scss';
import Component from '@component';
import Helpers from '@helpers';
interface IItemCellSettings {
isActiveClass: string;
isShrinkingClass: string;
itemCellContentClass: string;
mainTextClass: string;
}
export default class ItemCell extends Component {
public static initSelector: string = '.item-cell';
mainText: JQuery;
private settings: IItemCellSettings;
constructor(element: HTMLElement) {
super(element);
this.settings = {
isActiveClass: 'is-active',
isShrinkingClass: 'is-shrinking',
itemCellContentClass: 'item-cell__content',
mainTextClass: 'item-cell__main-text',
};
this.mainText = this.element.find('.' + this.settings.mainTextClass);
if (!this.element.hasClass('item-cell--glyph')) {
this.loadFont();
}
this.init();
}
loadFont(): void {
const fontFaceName: string = Helpers.addFontFace(this.element.data('font'), this.element.data('id'));
this.mainText.css('font-family', fontFaceName);
}
init(): void {
this.element.on('mouseenter', this.mouseEnterHandler.bind(this));
this.element.on('mouseleave', this.mouseLeaveHandler.bind(this));
this.element.on('transitionend', this.transitionEndHandler.bind(this));
}
mouseEnterHandler(): void {
$(ItemCell.initSelector).removeClass(this.settings.isActiveClass);
this.element.addClass(this.settings.isActiveClass);
}
mouseLeaveHandler(): void {
this.element.removeClass(this.settings.isActiveClass);
if (this.element.find('.' + this.settings.itemCellContentClass)[0].getBoundingClientRect().width > this.element[0].offsetWidth + 10) {
this.element.addClass(this.settings.isShrinkingClass);
}
}
transitionEndHandler(): void {
this.element.removeClass(this.settings.isShrinkingClass);
}
}
<div class="item-cell item-cell--ratio " data-font="" data-id="">
<a class="item-cell__content" href="#">
<div class="item-cell__main-text">
Abg
</div>
<span class="item-cell__sub-text text-small">
Flex 0.1
</span>
</a>
</div>
{% set element = data.link ? 'a' : 'div' %}
{% set lineHeight %}
{% if data.customLineHeight %}style="line-height: {{ data.lineHeight }}em"{% endif %}
{% endset %}
<div class="item-cell {{ modifier }} {{ class }}" data-font="{{ data.fontPath }}" data-id="{{ data.fontId }}">
<{{ element }} class="item-cell__content" {% if data.link %}href="{{ data.link }}"{% endif %}>
{% if data.mainText %}
<div class="item-cell__main-text" {{ lineHeight }}>
{{ data.mainText }}
</div>
{% endif %}
{% if data.subText %}
<span class="item-cell__sub-text text-small">
{{ data.subText }}
</span>
{% endif %}
</{{ element }}>
</div>
{
"language": "en-US",
"data": {
"mainText": "Abg",
"subText": "Flex 0.1",
"link": "#"
},
"modifier": "item-cell--ratio"
}
.item-cell {
display: block;
background-color: var(--color-background);
transition: $transition-duration $transition-easing;
transition-property: box-shadow, background-color;
font-size: 50px;
line-height: 50px;
@include bp(sm-min) {
font-size: 100px;
line-height: 100px;
}
&.item-cell--ratio {
display: flex;
@include aspect-ratio(100, 100, 'item-cell__content');
}
&:hover {
@media (hover: hover) {
background-color: var(--color-brand);
}
}
&.item-cell--glyph {
transition-property: background-color, color;
font-size: 20px;
line-height: 20px;
margin: -1px;
pointer-events: all;
@include bp(sm-min) {
font-size: 40px;
line-height: 40px;
}
&:hover {
@media (hover: hover) {
background-color: var(--color-background);
color: var(--color-text);
}
}
}
}
.item-cell__content {
position: relative;
display: flex;
height: 100%;
flex-direction: column;
justify-content: center;
padding: 48px 16px;
transition-property: none;
@include bp(sm-min) {
padding: 64px 32px;
}
.item-cell--ratio & {
align-items: center;
padding: 0;
}
&:before {
display: none;
}
&:after {
display: none;
}
.item-cell--glyph & {
transition: $transition-duration $transition-easing;
transition-property: box-shadow, background-color, color, transform;
box-shadow: 0 0 0 1px var(--color-brand) inset;
background-color: var(--color-background);
color: var(--color-text);
pointer-events: none;
}
.item-cell--glyph.is-shrinking & {
z-index: map_get($zindex, itemCellAnimating);
}
.item-cell--glyph.is-active & {
z-index: map_get($zindex, itemCellActive);
}
.item-cell--glyph:hover & {
@media (hover: hover) {
transform: scale(2);
box-shadow: 0 0 0 .5px var(--color-brand) inset;
z-index: map_get($zindex, itemCellActive);
}
}
}
.item-cell__main-text {
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: normal;
transition: color $transition-duration $transition-easing;
.item-cell--glyph & {
overflow: visible;
padding: 0;
}
.item-cell:hover & {
@media (hover: hover) {
color: var(--color-text-inverse);
}
}
.item-cell--glyph:hover & {
@media (hover: hover) {
color: var(--color-text);
}
}
}
.item-cell__sub-text {
position: absolute;
opacity: .5;
padding-left: 16px;
bottom: 6px;
left: 0;
transition: color $transition-duration $transition-easing;
@include bp(sm-min) {
padding-left: 32px;
bottom: 11px;
}
.item-cell:hover & {
@media (hover: hover) {
color: var(--color-text-inverse);
}
}
.item-cell--ratio & {
bottom: 24px;
padding-left: 0;
right: 0;
text-align: center;
@include bp(sm-min) {
bottom: 20%;
}
}
}
import './item-cell.scss';
import Component from '@component';
import Helpers from '@helpers';
interface IItemCellSettings {
isActiveClass: string;
isShrinkingClass: string;
itemCellContentClass: string;
mainTextClass: string;
}
export default class ItemCell extends Component {
public static initSelector: string = '.item-cell';
mainText: JQuery;
private settings: IItemCellSettings;
constructor(element: HTMLElement) {
super(element);
this.settings = {
isActiveClass: 'is-active',
isShrinkingClass: 'is-shrinking',
itemCellContentClass: 'item-cell__content',
mainTextClass: 'item-cell__main-text',
};
this.mainText = this.element.find('.' + this.settings.mainTextClass);
if (!this.element.hasClass('item-cell--glyph')) {
this.loadFont();
}
this.init();
}
loadFont(): void {
const fontFaceName: string = Helpers.addFontFace(this.element.data('font'), this.element.data('id'));
this.mainText.css('font-family', fontFaceName);
}
init(): void {
this.element.on('mouseenter', this.mouseEnterHandler.bind(this));
this.element.on('mouseleave', this.mouseLeaveHandler.bind(this));
this.element.on('transitionend', this.transitionEndHandler.bind(this));
}
mouseEnterHandler(): void {
$(ItemCell.initSelector).removeClass(this.settings.isActiveClass);
this.element.addClass(this.settings.isActiveClass);
}
mouseLeaveHandler(): void {
this.element.removeClass(this.settings.isActiveClass);
if (this.element.find('.' + this.settings.itemCellContentClass)[0].getBoundingClientRect().width > this.element[0].offsetWidth + 10) {
this.element.addClass(this.settings.isShrinkingClass);
}
}
transitionEndHandler(): void {
this.element.removeClass(this.settings.isShrinkingClass);
}
}
<div class="item-cell item-cell--ratio item-cell--glyph " data-font="" data-id="">
<div class="item-cell__content">
<div class="item-cell__main-text">
A
</div>
</div>
</div>
{% set element = data.link ? 'a' : 'div' %}
{% set lineHeight %}
{% if data.customLineHeight %}style="line-height: {{ data.lineHeight }}em"{% endif %}
{% endset %}
<div class="item-cell {{ modifier }} {{ class }}" data-font="{{ data.fontPath }}" data-id="{{ data.fontId }}">
<{{ element }} class="item-cell__content" {% if data.link %}href="{{ data.link }}"{% endif %}>
{% if data.mainText %}
<div class="item-cell__main-text" {{ lineHeight }}>
{{ data.mainText }}
</div>
{% endif %}
{% if data.subText %}
<span class="item-cell__sub-text text-small">
{{ data.subText }}
</span>
{% endif %}
</{{ element }}>
</div>
{
"language": "en-US",
"data": {
"mainText": "A",
"subText": "",
"link": null
},
"modifier": "item-cell--ratio item-cell--glyph"
}
.item-cell {
display: block;
background-color: var(--color-background);
transition: $transition-duration $transition-easing;
transition-property: box-shadow, background-color;
font-size: 50px;
line-height: 50px;
@include bp(sm-min) {
font-size: 100px;
line-height: 100px;
}
&.item-cell--ratio {
display: flex;
@include aspect-ratio(100, 100, 'item-cell__content');
}
&:hover {
@media (hover: hover) {
background-color: var(--color-brand);
}
}
&.item-cell--glyph {
transition-property: background-color, color;
font-size: 20px;
line-height: 20px;
margin: -1px;
pointer-events: all;
@include bp(sm-min) {
font-size: 40px;
line-height: 40px;
}
&:hover {
@media (hover: hover) {
background-color: var(--color-background);
color: var(--color-text);
}
}
}
}
.item-cell__content {
position: relative;
display: flex;
height: 100%;
flex-direction: column;
justify-content: center;
padding: 48px 16px;
transition-property: none;
@include bp(sm-min) {
padding: 64px 32px;
}
.item-cell--ratio & {
align-items: center;
padding: 0;
}
&:before {
display: none;
}
&:after {
display: none;
}
.item-cell--glyph & {
transition: $transition-duration $transition-easing;
transition-property: box-shadow, background-color, color, transform;
box-shadow: 0 0 0 1px var(--color-brand) inset;
background-color: var(--color-background);
color: var(--color-text);
pointer-events: none;
}
.item-cell--glyph.is-shrinking & {
z-index: map_get($zindex, itemCellAnimating);
}
.item-cell--glyph.is-active & {
z-index: map_get($zindex, itemCellActive);
}
.item-cell--glyph:hover & {
@media (hover: hover) {
transform: scale(2);
box-shadow: 0 0 0 .5px var(--color-brand) inset;
z-index: map_get($zindex, itemCellActive);
}
}
}
.item-cell__main-text {
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: normal;
transition: color $transition-duration $transition-easing;
.item-cell--glyph & {
overflow: visible;
padding: 0;
}
.item-cell:hover & {
@media (hover: hover) {
color: var(--color-text-inverse);
}
}
.item-cell--glyph:hover & {
@media (hover: hover) {
color: var(--color-text);
}
}
}
.item-cell__sub-text {
position: absolute;
opacity: .5;
padding-left: 16px;
bottom: 6px;
left: 0;
transition: color $transition-duration $transition-easing;
@include bp(sm-min) {
padding-left: 32px;
bottom: 11px;
}
.item-cell:hover & {
@media (hover: hover) {
color: var(--color-text-inverse);
}
}
.item-cell--ratio & {
bottom: 24px;
padding-left: 0;
right: 0;
text-align: center;
@include bp(sm-min) {
bottom: 20%;
}
}
}
import './item-cell.scss';
import Component from '@component';
import Helpers from '@helpers';
interface IItemCellSettings {
isActiveClass: string;
isShrinkingClass: string;
itemCellContentClass: string;
mainTextClass: string;
}
export default class ItemCell extends Component {
public static initSelector: string = '.item-cell';
mainText: JQuery;
private settings: IItemCellSettings;
constructor(element: HTMLElement) {
super(element);
this.settings = {
isActiveClass: 'is-active',
isShrinkingClass: 'is-shrinking',
itemCellContentClass: 'item-cell__content',
mainTextClass: 'item-cell__main-text',
};
this.mainText = this.element.find('.' + this.settings.mainTextClass);
if (!this.element.hasClass('item-cell--glyph')) {
this.loadFont();
}
this.init();
}
loadFont(): void {
const fontFaceName: string = Helpers.addFontFace(this.element.data('font'), this.element.data('id'));
this.mainText.css('font-family', fontFaceName);
}
init(): void {
this.element.on('mouseenter', this.mouseEnterHandler.bind(this));
this.element.on('mouseleave', this.mouseLeaveHandler.bind(this));
this.element.on('transitionend', this.transitionEndHandler.bind(this));
}
mouseEnterHandler(): void {
$(ItemCell.initSelector).removeClass(this.settings.isActiveClass);
this.element.addClass(this.settings.isActiveClass);
}
mouseLeaveHandler(): void {
this.element.removeClass(this.settings.isActiveClass);
if (this.element.find('.' + this.settings.itemCellContentClass)[0].getBoundingClientRect().width > this.element[0].offsetWidth + 10) {
this.element.addClass(this.settings.isShrinkingClass);
}
}
transitionEndHandler(): void {
this.element.removeClass(this.settings.isShrinkingClass);
}
}