f4443e16dd
* feat(nav): make navbar static make the navbar in react layout and the static layout stick to the top of the screen * feat(challenges): Make classic view flex Classic view now uses flex to control it's height. This was necessary to control view and allow navbar to be static on other pages. This breaks mobile view and other non-classic challenge views * feat(app): Add logic to make screen expand on tablet * fix(app): let routes define their content structure * fix(less): use American spelling of gray * fix(classic-preview): make preview smaller to prevent scroll * feat(classic-frame): Make frame border less distinct * fix(challenges): scope test suite less to challenges * feat(challenges): make generic ChallengeTitle component
118 lines
3.0 KiB
Plaintext
118 lines
3.0 KiB
Plaintext
.justify-mixin(start) { justify-content: flex-start }
|
|
.justify-mixin(end) { justify-content: flex-end }
|
|
.justify-mixin(center) { justify-content: center }
|
|
.justify-mixin(around) { justify-content: space-around }
|
|
.justify-mixin(between) { justify-content: between }
|
|
.justify-mixin(@_) {}
|
|
|
|
.items-mixin(top) { align-items: flex-start; }
|
|
.items-mixin(bottom) { align-items: flex-end; }
|
|
.items-mixin(center) { align-items: center; }
|
|
.items-mixin(stretch) { align-items: stretch; }
|
|
.items-mixin(baseline) { align-items: baseline; }
|
|
.items-mixin(@_) {}
|
|
|
|
.item-mixin(top) { align-self: flex-start; }
|
|
.item-mixin(bottom) { align-self: flex-end; }
|
|
.item-mixin(center) { align-self: center; }
|
|
.item-mixin(stretch) { align-self: stretch; }
|
|
.item-mixin(baseline) { align-self: baseline; }
|
|
.item-mixin(@_) {}
|
|
|
|
.content-mixin(top) { align-content: flex-start; }
|
|
.content-mixin(bottom) { align-content: flex-end; }
|
|
.content-mixin(center) { align-content: center; }
|
|
.content-mixin(stretch) { align-content: stretch; }
|
|
.content-mixin(baseline) { align-content: baseline; }
|
|
.content-mixin(@_) {}
|
|
|
|
.grid(@direction: row; @items: none; @justify: none; @content: none) {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: @direction;
|
|
|
|
.justify-mixin(@justify);
|
|
.items-mixin(@item);
|
|
.content-mixin(@content);
|
|
}
|
|
|
|
.row(@items: none; @justify: none; @content: none) {
|
|
.grid(@direction: row, @items, @justify, @content);
|
|
}
|
|
|
|
.column(@items: none; @justify: none; @content: none) {
|
|
.grid(@direction: column; @items; @justify; @content);
|
|
}
|
|
|
|
.margin-mixin(@g) when not (@g = 0) {
|
|
margin: @g / 2;
|
|
}
|
|
|
|
.cell(@i: 1; @item; @g: @grid-gutter-width; @cols: @grid-columns) {
|
|
flex-basis: %('calc(100% * %s - %s)', @i / @cols, @g);
|
|
min-width: 0; // FF adjustment for responsive images
|
|
.item-mixin(@item);
|
|
.margin-mixin(@g);
|
|
}
|
|
|
|
.cell-offset(@i: 1; @g: @grid-gutter-width; @cols: @grid-columns) {
|
|
margin-left: e%('calc(100% * %s + %s)', @i / @cols, @g / 2) !important;
|
|
}
|
|
|
|
.padding-mixin(@pad) when (@pad) {
|
|
padding-left: @pad;
|
|
padding-right: @pad;
|
|
}
|
|
|
|
// center an element
|
|
.center(@value: 50%; @padding: 0) {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
max-width: @value;
|
|
width: 100%;
|
|
|
|
.padding-mixin(@padding);
|
|
}
|
|
|
|
.between(@min; @max; @rules) {
|
|
// BS logic to do string building with conditions
|
|
.condition-wrapper(@new) {
|
|
.redefine-condition() {
|
|
@condition: @new;
|
|
}
|
|
}
|
|
.init-condition() {
|
|
.condition-wrapper('only screen');
|
|
}
|
|
.init-condition();
|
|
.add-min-media(@min) when (iskeyword(@min)) {
|
|
.redefine-condition();
|
|
.condition-wrapper(%('%s and (min-width: @{screen-%s})', @condition, @min));
|
|
}
|
|
|
|
.add-max-media(@max) when (iskeyword(@max)) {
|
|
.redefine-condition();
|
|
.condition-wrapper(%('%s and (max-width: @{screen-%s})', @condition, @max));
|
|
}
|
|
.add-min-media(@min);
|
|
.add-max-media(@max);
|
|
|
|
.add-query() {
|
|
.redefine-condition();
|
|
@query: e(@condition);
|
|
@media @query {
|
|
@rules();
|
|
}
|
|
}
|
|
|
|
.add-query();
|
|
}
|
|
|
|
.below(@max, @rules) {
|
|
.between(@empty; @max; @rules);
|
|
}
|
|
|
|
.above(@min, @rules) {
|
|
.between(@min; @empty; @rules);
|
|
}
|