Skip to content

Instantly share code, notes, and snippets.

@chriscauley

chriscauley/gross.less

Created September 11, 2018 15:08
Show Gist options
  • Save chriscauley/85bad7444204992f3ff2bb0ed6fce68e to your computer and use it in GitHub Desktop.
Save chriscauley/85bad7444204992f3ff2bb0ed6fce68e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gross.less
.wrapped {
.occurrence { display: flex; flex-direction: row-reverse !important; min-height: 0 !important; }
.occurrence h1 { width: 80%; }
.category { display: none; }
}
@yp-conference-days-tabs-underline-color: @teal;
@yp-conference-days-tabs-tab-num-items: 3;
@yp-conference-days-content-card-hover-filter: opacity(90%);
@yp-conference-days-content-card-comedy-background-color: #94959D;
@yp-conference-days-content-card-comedy-text-color: #5C5C5E;
@yp-conference-days-content-card-panel-background-color: #AEACB4;
@yp-conference-days-content-card-panel-text-color: #42464D;
@yp-conference-days-content-card-music-background-color: #D7D1DB;
@yp-conference-days-content-card-music-text-color: #42464D;
@yp-conference-days-content-card-workshop-background-color: #6C6D74;
@yp-conference-days-content-card-workshop-text-color: #F3F3F4;
@yp-conference-days-content-card-play-button-color: @teal;
@yp-conference-days-content-card-markdown-overflow-bar-hover-color: @teal;
@yp-conference-days-tabs-underline-spacing-mobile: 0.7vw;
@yp-conference-days-tabs-underline-height-mobile: 1.5vw;
@yp-conference-days-tabs-bottom-margin-mobile: 5vw;
@yp-conference-days-tabs-tab-margin-mobile: 2vw;
@yp-conference-days-tabs-tab-font-size-mult-mobile: 1.5em;
@yp-conference-days-content-room-font-size-mult-mobile: 1.5em;
@yp-conference-days-content-card-padding-mobile: 5vw;
@yp-conference-days-content-card-play-button-size-mobile: 7vw;
@yp-conference-days-content-card-play-button-margin-top-mobile: 2vw;
@yp-conference-days-l-r-margins-mobile: 5vw;
@yp-conference-days-content-card-h1-font-size-mult-mobile: 1.2em;
@yp-conference-days-content-card-h2-font-size-mult-mobile: 1em;
@yp-conference-days-content-card-markdown-expanded-height-mobile: 50vw;
@yp-conference-days-content-card-markdown-overflow-bar-font-size-mult-mobile: 3vw;
@yp-conference-days-tabs-underline-spacing-desktop: 3px;
@yp-conference-days-tabs-bottom-margin-desktop: 20px;
@yp-conference-days-tabs-tab-margin-desktop: 13px;
@yp-conference-days-tabs-tab-font-size-desktop: 20px;
@yp-conference-days-tabs-underline-height-desktop: 10px;
@yp-conference-days-content-room-font-size-desktop: 20px;
@yp-conference-days-content-card-padding-desktop: 20px;
@yp-conference-days-content-card-h1-font-size-desktop: 30px;
@yp-conference-days-content-card-h2-font-size-desktop: 19px;
@yp-conference-days-content-card-play-button-size-desktop: 50px;
@yp-conference-days-content-card-play-button-margin-top-desktop: 20px;
@yp-conference-days-content-card-markdown-overflow-bar-font-size-desktop: 15px;
@yp-conference-days-content-card-markdown-expanded-height-desktop: 200px;
@yp-conference-days-tabs-underline-translateY-all-mobile: ((@font-size-vw-mobile * @yp-conference-days-tabs-tab-font-size-mult-mobile) + (@yp-conference-days-tabs-tab-margin-mobile * 1)) * -1;
@yp-conference-days-tabs-underline-margin-bottom-mobile: (@yp-conference-days-tabs-underline-spacing-mobile - @yp-conference-days-tabs-tab-margin-mobile);
@yp-conference-days-tabs-underline-margin-bottom-desktop: (@yp-conference-days-tabs-underline-spacing-desktop - @yp-conference-days-tabs-tab-margin-desktop);
.fixed-lines-ellipsis(@numlines) {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: @numlines;
-webkit-box-orient: vertical;
}
@yp-conference-days-content-column-1-flex-direction-mobile: row;
@yp-conference-days-content-column-1-min-height-mobile: 38vw;
@yp-conference-days-content-column-1-set-fl-text-mobile: 2;
@yp-conference-days-content-column-2-flex-direction-mobile: row;
@yp-conference-days-content-column-2-min-height-mobile: 30vw;
@yp-conference-days-content-column-2-set-fl-text-mobile: 4;
@yp-conference-days-content-column-3-flex-direction-mobile: column;
@yp-conference-days-content-column-3-min-height-mobile: 64vw;
@yp-conference-days-content-column-3-set-fl-text-mobile: 5;
@yp-conference-days-content-column-4-flex-direction-mobile: column;
@yp-conference-days-content-column-4-min-height-mobile: 52vw;
@yp-conference-days-content-column-4-set-fl-text-mobile: 7;
@yp-conference-days-content-column-1-flex-direction-desktop: row;
@yp-conference-days-content-column-1-min-height-desktop: 200px;
@yp-conference-days-content-column-1-set-fl-text-desktop: 2;
@yp-conference-days-content-column-2-flex-direction-desktop: row;
@yp-conference-days-content-column-2-min-height-desktop: 265px;
@yp-conference-days-content-column-2-set-fl-text-desktop: 4;
@yp-conference-days-content-column-3-flex-direction-desktop: column;
@yp-conference-days-content-column-3-min-height-desktop: 370px;
@yp-conference-days-content-column-3-set-fl-text-desktop: 5;
@yp-conference-days-content-column-4-flex-direction-desktop: column;
@yp-conference-days-content-column-4-min-height-desktop: 340px;
@yp-conference-days-content-column-4-set-fl-text-desktop: 6;
@yp-conference-days-content-room-font-size-small-mult-mobile: 0.8em;
@buttonyp-conference-days-content-column-4-room-font-size-mobile: 1.2em;
@buttonyp-conference-days-content-column-4-room-font-size-desktop: @yp-conference-days-tabs-tab-font-size-desktop;
@yp-conference-days-content-column-4-card-padding-mobile: 2vw;
@yp-conference-days-content-column-4-card-padding-desktop: @yp-conference-days-content-card-padding-desktop;
@yp-conference-days-content-column-4-card-h1-font-size-mobile: 0.75em;
@yp-conference-days-content-column-4-card-h1-font-size-desktop: 20px;
@yp-conference-days-content-column-4-card-h2-font-size-mobile: 0.8em;
@yp-conference-days-content-column-4-card-h2-font-size-desktop: @yp-conference-days-content-card-h2-font-size-desktop;
.fix-four-cols(@column-count, @suffix) when (@column-count = 4) {
// .define-font-size(@suffix) {
// @fontsize: 'buttonyp-conference-days-content-column-4-room-font-size-@{suffix}';
// }
.define-padding-size(@suffix) {
@padding: 'yp-conference-days-content-column-4-card-padding-@{suffix}';
}
.define-font-size2(@suffix) {
@fontsize2: 'yp-conference-days-content-column-4-card-h1-font-size-@{suffix}';
}
.define-font-size3(@suffix) {
@fontsize3: 'yp-conference-days-content-column-4-card-h2-font-size-@{suffix}';
}
.define-padding-size(@suffix);
// .define-font-size(@suffix);
.define-font-size2(@suffix);
.define-font-size3(@suffix);
// .tab-content.active .column>.room {
// font-size: @@fontsize;
// color: red;
// position: fixed;
// }
// .tab-content-container {
// background: red;
// }
.card {
padding: @@padding;;
>h1 {
font-size: @@fontsize2;
}
>div .text-content>h2 {
font-size: @@fontsize3;
}
}
}
.set-multi-column-widths(@column-count, @is-mobile: true) when (@column-count > 0) {
.get-suffix(@is-mobile) when (@is-mobile) {
@suffix: 'mobile';
}
.get-suffix(@is-mobile) when not (@is-mobile) {
@suffix: 'desktop';
}
.get-suffix(@is-mobile);
.define-min-height(@var, @var2) {
@minHeight: 'yp-conference-days-content-column-@{var}-min-height-@{var2}';
}
.define-flex-direction(@var, @var2) {
@flexDirection: 'yp-conference-days-content-column-@{var}-flex-direction-@{var2}';
}
.define-set-fl-text(@var, @var2) {
@setFLText: 'yp-conference-days-content-column-@{var}-set-fl-text-@{var2}';
}
.define-set-(@var,) {
@setFLText: 'yp-conference-days-content-column-@{var}-set-fl-text-@{var2}';
}
.define-min-height(@column-count, @suffix);
.define-flex-direction(@column-count, @suffix);
.define-set-fl-text(@column-count, @suffix);
.tab-content.active .column:first-child:nth-last-child(@{column-count}),
.tab-content.active .column:first-child:nth-last-child(@{column-count})~.column {
.fix-four-cols(@column-count, @suffix);
width: 100% / @column-count;
.card {
//min-height: @@minHeight;
>div {
flex-direction: @@flexDirection;
}
h1 {
.fixed-lines-ellipsis(@@setFLText);
}
}
}
.set-multi-column-widths(@column-count - 1, @is-mobile);
}
.schedule-card-color(@class) {
.define-font-color(@var) {
@fontcolor: 'yp-conference-days-content-card-@{var}-text-color';
}
.define-bg-color(@var) {
@bgcolor: 'yp-conference-days-content-card-@{var}-background-color';
}
&.@{class} {
.define-font-color(@class);
.define-bg-color(@class);
background: @@bgcolor;
color: @@fontcolor;
>div .play-button {
border-color: @@fontcolor;
}
.text-content .expand-markdown .see-more {
color: @@fontcolor;
background-color: @@bgcolor;
}
}
}
arstyp-conference-days {
social-media {
margin: @yp-conference-days-tabs-bottom-margin-mobile;
}
.set-multi-column-widths(4, true);
.sorted_occurrences {
display: block;
flex-flow: column wrap;
}
.tabs-container {
margin-bottom: @yp-conference-days-tabs-bottom-margin-mobile;
.tabs {
display: flex;
flex-wrap: wrap;
flex-direction: row;
list-style: none;
margin: 0;
padding: 0;
background: white;
.tab {
cursor: pointer;
justify-content: center;
display: flex;
margin: @yp-conference-days-tabs-tab-margin-mobile;
text-transform: uppercase;
font-weight: 900;
&.all {
width: 100%;
display: none;
}
&.tab:not(.all) {
flex: 1;
}
a {
line-height: @yp-conference-days-tabs-tab-font-size-mult-mobile;
font-size: @yp-conference-days-tabs-tab-font-size-mult-mobile;
width: 100%;
height: 100%;
text-align: center;
}
}
}
}
.tab-content-container {
display: flex;
flex-direction: column;
.tab-content {
max-width: 100%;
display: none;
&.active {
display: flex;
flex-direction: row;
.column {
margin: 0;
>.room {
display: flex;
flex-direction: row;
text-align: center;
text-transform: uppercase;
font-size: @yp-conference-days-content-room-font-size-mult-mobile;
display: flex;
justify-content: center;
align-items: flex-end;
font-weight: 900;
background: white;
line-height: @yp-conference-days-tabs-tab-font-size-mult-mobile;
padding: @yp-conference-days-tabs-tab-margin-mobile;
&.small-rooms {
font-size: @yp-conference-days-content-room-font-size-small-mult-mobile;
}
}
.card {
// cursor: pointer;
border-radius: 0;
margin-bottom: 0;
display: flex;
flex-direction: column;
border: 0.2vw solid #EBEBEB;
margin: -0.2vw 0 0 -0.2vw;
padding: @yp-conference-days-content-card-padding-mobile;
transition: max-height 0.5s ease-in-out;
transition: filter 0.2s ease-in-out;
>h1 {
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
font-family: Helvetica, sans-serif;
letter-spacing: 0.03em;
text-transform: uppercase;
font-weight: bold;
font-size: @yp-conference-days-content-card-h1-font-size-mult-mobile;
margin: 0;
}
// &:hover {
// filter: @yp-conference-days-content-card-hover-filter;
// }
.schedule-card-color(comedy);
.schedule-card-color(music);
.schedule-card-color(workshop);
.schedule-card-color(panel);
>div {
display: flex;
flex-direction: row;
flex: 1;
.text-content {
display: flex;
flex-direction: column;
justify-content: flex-end;
flex: 1;
>h2 {
letter-spacing: 0.03em;
font-size: @yp-conference-days-content-card-h2-font-size-mult-mobile;
margin: 0;
&.date, &.room {
display: none;
}
}
.expand-markdown {
display: flex;
flex-direction: column;
overflow: hidden;
>markdown {
transition: max-height 0.5s ease-in-out;
max-height: 0;
overflow: hidden;
& * {
max-height: inherit;
overflow: inherit;
}
}
.see-more {
max-height: 0;
}
}
}
.play-button {
display: none;
// display: flex;
transition: border 0.5s ease-in-out;
cursor: pointer;
align-self: flex-end;
border: @yp-conference-days-content-card-play-button-size-mobile * (1/14) solid;
height: @yp-conference-days-content-card-play-button-size-mobile;
width: @yp-conference-days-content-card-play-button-size-mobile;
margin-top: @yp-conference-days-content-card-play-button-margin-top-mobile;
&:hover {
border-color: @yp-conference-days-content-card-play-button-color;
i {
color: @yp-conference-days-content-card-play-button-color;
}
}
i {
transition: color 0.5s ease-in-out, transform 0.5s ease-in-out;
font-size: @yp-conference-days-content-card-play-button-size-mobile * (2 / 3);
height: @yp-conference-days-content-card-play-button-size-mobile * (5 / 6);
width: @yp-conference-days-content-card-play-button-size-mobile * (5 / 6);
display: flex;
justify-content: center;
align-items: center;
}
}
}
&.expanded {
cursor: default;
&:hover {
filter: initial;
}
>div {
.text-content {
.expand-markdown {
&.overflow {
.see-more {
transition: 0.2s ease-in-out;
font-size: @yp-conference-days-content-card-markdown-overflow-bar-font-size-mult-mobile;
width: 100%;
display: flex;
margin-top: -@yp-conference-days-content-card-markdown-overflow-bar-font-size-mult-mobile;
justify-content: center;
margin-bottom: @yp-conference-days-content-card-markdown-overflow-bar-font-size-mult-mobile * (2/3);
max-height: initial;
border: inherit;
cursor: pointer;
&:hover {
transition: 0.2s ease-in-out;
color: @yp-conference-days-content-card-markdown-overflow-bar-hover-color;
}
}
}
>markdown {
max-height: @yp-conference-days-content-card-markdown-expanded-height-mobile;
}
}
}
.play-button {
border-color: @yp-conference-days-content-card-play-button-color;
>i {
transform: rotate(90deg);
color: @yp-conference-days-content-card-play-button-color;
}
}
}
}
}
}
}
}
}
@media (min-width: @min-width-desktop) {
social-media {
margin: @yp-conference-days-tabs-bottom-margin-desktop;
}
.set-multi-column-widths(4, false);
.tabs-container {
margin-bottom: @yp-conference-days-tabs-bottom-margin-desktop;
.tabs {
.tab {
margin: @yp-conference-days-tabs-tab-margin-desktop;
text-transform: uppercase;
a {
line-height: @yp-conference-days-tabs-tab-font-size-desktop;
font-size: @yp-conference-days-tabs-tab-font-size-desktop;
}
}
}
}
.tab-content-container {
.tab-content {
&.active {
.column {
>.room {
font-size: @yp-conference-days-content-room-font-size-desktop;
line-height: @yp-conference-days-tabs-tab-font-size-desktop;
padding: @yp-conference-days-tabs-tab-margin-desktop;
&.small-rooms {
font-size: @yp-conference-days-content-room-font-size-desktop;
}
}
.card {
border: 1px solid #EBEBEB;
margin: -1px 0 0 -0.2px;
padding: @yp-conference-days-content-card-padding-desktop;
>h1 {
font-size: @yp-conference-days-content-card-h1-font-size-desktop;
}
>div {
.text-content {
>h2 {
letter-spacing: 0.7px;
font-size: @yp-conference-days-content-card-h2-font-size-desktop;
}
}
.play-button {
border: @yp-conference-days-content-card-play-button-size-desktop * (1/14) solid;
height: @yp-conference-days-content-card-play-button-size-desktop;
width: @yp-conference-days-content-card-play-button-size-desktop;
margin-top: @yp-conference-days-content-card-play-button-margin-top-desktop;
i {
font-size: @yp-conference-days-content-card-play-button-size-desktop * (2 / 3);
height: @yp-conference-days-content-card-play-button-size-desktop * (5 / 6);
width: @yp-conference-days-content-card-play-button-size-desktop * (5 / 6);
}
}
}
&.expanded {
>div {
.text-content {
.expand-markdown {
&.overflow {
.see-more {
font-size: @yp-conference-days-content-card-markdown-overflow-bar-font-size-desktop;
margin-top: -@yp-conference-days-content-card-markdown-overflow-bar-font-size-desktop;
margin-bottom: @yp-conference-days-content-card-markdown-overflow-bar-font-size-desktop * (2/3);
}
}
>markdown {
max-height: @yp-conference-days-content-card-markdown-expanded-height-desktop;
}
}
}
}
}
}
}
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment