Merge pull request #14893 from schlawg/scratch

remove breakpoint syntax and library

ui/analyse/css/_action-menu.scss

@@ -116,7 +116,7 @@
  }
  }
 
- @include breakpoint($mq-col1) {
+ @include mq-is-col1 {
  .abset-inline {
  display: none;
  }

ui/analyse/css/_analyse.base.scss

@@ -3,7 +3,7 @@
 %border-bottom-active {
  border-bottom: $border;
 
- @include breakpoint($mq-col2) {
+ @include mq-at-least-col2 {
  border-bottom: 3px solid $c-secondary;
  }
 }

ui/analyse/css/_fork.scss

@@ -5,7 +5,7 @@ $c-fork: $c-primary;
 
  flex: 0 0 auto;
 
- @include breakpoint($mq-col1) {
+ @include mq-is-col1 {
  display: none;
  }
 

ui/analyse/css/_layout.scss

@@ -8,7 +8,7 @@ body {
 #main-wrap {
  --main-max-width: calc(100vh - #{$site-header-outer-height} - #{$col1-uniboard-controls});
 
- @include breakpoint($mq-col2) {
+ @include mq-at-least-col2 {
  --main-max-width: auto;
  }
 }
@@ -42,7 +42,7 @@ body {
  &__underboard {
  grid-area: under;
 
- @include breakpoint($mq-col1-uniboard) {
+ @include mq-is-col1 {
  overflow: hidden; // helps truncating long study names
  }
  }
@@ -84,7 +84,7 @@ body {
  'chat'
  'uchat';
 
- @include breakpoint($mq-col2) {
+ @include mq-at-least-col2 {
  grid-template-columns: var(--col2-uniboard-width) $analyse-block-gap $col2-uniboard-table;
  grid-template-rows: fit-content(0);
  grid-template-areas:
@@ -112,11 +112,11 @@ body {
  }
  }
 
- @include breakpoint($mq-col2-uniboard-squeeze) {
+ @include mq-is-col2-squeeze {
  grid-template-columns: $col2-uniboard-squeeze-width $analyse-block-gap $col2-uniboard-squeeze-table;
  }
 
- @include breakpoint($mq-col3) {
+ @include mq-at-least-col3 {
  grid-template-columns: $col3-uniboard-side $analyse-block-gap var(--col3-uniboard-width) $analyse-block-gap $col3-uniboard-table;
  grid-template-rows: auto $chat-height 2.5em 1fr;
  grid-template-areas:

ui/analyse/css/_player-clock.scss

@@ -25,7 +25,7 @@ $clock-height: 20px;
  }
 
  /* Where to put them in col1 layout? It moves the entire board and controls down for little benefit */
- @include breakpoint($mq-col1) {
+ @include mq-is-col1 {
  display: none;
  }
 }

ui/analyse/css/_round-training.scss

@@ -56,7 +56,7 @@
  margin: 0.6em 0;
  }
 
- @include breakpoint($mq-col1) {
+ @include mq-is-col1 {
  flex-flow: row wrap;
  justify-content: center;
  padding-bottom: $analyse-block-gap;

ui/analyse/css/_round-underboard.scss

@@ -42,7 +42,7 @@ $col2-panel-height: 240px;
  &__panels {
  --panel-height: #{$col1-panel-height};
 
- @include breakpoint($mq-col2) {
+ @include mq-at-least-col2 {
  --panel-height: #{$col2-panel-height};
  }
 

ui/analyse/css/_side.scss

@@ -5,7 +5,7 @@
  .back-to-game {
  margin-top: 2em;
 
- @include breakpoint($mq-col3) {
+ @include mq-at-least-col3 {
  margin-top: 10vh;
  }
 
@@ -18,7 +18,7 @@
  .analyse__wiki {
  margin-top: 2vh;
  flex: 1 1 auto;
- @include breakpoint($mq-col3) {
+ @include mq-at-least-col3 {
  flex: 1 1 0;
  padding: 0.5em 1em 0 0;
  }

ui/analyse/css/_tools.scss

@@ -129,7 +129,7 @@
 
  .persistence {
  color: $c-good;
- @include breakpoint($mq-not-xx-small) {
+ @media (max-width: at-most($xx-small)) {
  display: none;
  }
  }
@@ -140,7 +140,7 @@
  color: $c-good-over;
  }
 
- @include breakpoint($mq-col1) {
+ @include mq-is-col1 {
  height: $col1-uniboard-controls;
 
  .fbt {

ui/analyse/css/_variables.scss

@@ -1,6 +1,2 @@
-$mq-col1: $mq-col1-uniboard;
-$mq-col2: $mq-col2-uniboard;
-$mq-col3: $mq-col3-uniboard;
-
 $meta-height: var(--meta-height);
 $chat-height: var(--chat-height);

ui/analyse/css/_zh.scss

@@ -31,7 +31,7 @@ $pocket-height: 60px;
  'chat'
  'uchat';
 
- @include breakpoint($mq-col2) {
+ @include mq-at-least-col2 {
  grid-template-rows: $pocket-height auto $pocket-height;
  grid-template-areas:
  'board gauge pocket-top'
@@ -44,7 +44,7 @@ $pocket-height: 60px;
  'uchat . side';
  }
 
- @include breakpoint($mq-col3) {
+ @include mq-at-least-col3 {
  grid-template-rows: $pocket-height $meta-height $chat-height $pocket-height;
  grid-template-areas:
  'side . board gauge pocket-top'
@@ -56,7 +56,7 @@ $pocket-height: 60px;
  }
 }
 
-@include breakpoint($mq-col1) {
+@include mq-is-col1 {
  .pocket {
  &-top {
  margin-bottom: $block-gap-half;

ui/analyse/css/explorer/_explorer.scss

@@ -138,8 +138,8 @@
  background: mix($c-primary, $c-bg-box, 25%);
  font-weight: bold;
 
- @include breakpoint($mq-col2) {
- @include breakpoint($mq-x-short) {
+ @include mq-at-least-col2 {
+ @media (min-width: at-least($x-short)) {
  position: sticky;
  bottom: 0;
  }

ui/analyse/css/practice/_layout.scss

@@ -11,11 +11,11 @@
  grid-template-rows: auto;
  grid-template-areas: 'board' 'controls' 'under' 'tools' 'side';
 
- @include breakpoint($mq-col2) {
+ @include mq-at-least-col2 {
  grid-template-areas: 'board gauge tools' 'under . controls' 'side . .';
  }
 
- @include breakpoint($mq-col3) {
+ @include mq-at-least-col3 {
  grid-template-rows: fit-content(0);
  grid-template-areas: 'side . board gauge tools' '. . under . controls';
 

ui/analyse/css/study/_index.scss

@@ -34,7 +34,7 @@ $top-height: 3.2rem;
  height: $top-height;
  font-size: 1.1em;
 
- @include breakpoint($mq-xx-small) {
+ @media (min-width: at-least($xx-small)) {
  font-size: 1.2em;
  }
  }

ui/analyse/css/study/_list-widget.scss

@@ -4,7 +4,7 @@ $c-study: $c-primary;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax($viewport-min-width, 1fr));
 
- @include breakpoint($mq-medium) {
+ @media (min-width: at-least($medium)) {
  grid-template-columns: repeat(auto-fill, minmax(45ch, 1fr));
  }
 
@@ -79,7 +79,7 @@ $c-study: $c-primary;
  margin-#{$end-direction}: 0.2em;
 
  @include transition;
- @include breakpoint($mq-not-xx-small) {
+ @media (max-width: at-most($xx-small)) {
  display: none;
  }
  }

ui/analyse/css/study/_modal.scss

@@ -1,7 +1,7 @@
 .dialog-content {
  min-width: 80vw;
 
- @include breakpoint($mq-x-small) {
+ @media (min-width: at-least($x-small)) {
  min-width: 500px;
  }
 

ui/analyse/css/study/_player.scss

@@ -7,13 +7,13 @@ $player-height: 1.6rem;
  border-radius: 0;
  }
 
- @include breakpoint($mq-col2) {
+ @include mq-at-least-col2 {
  .analyse__underboard {
  margin-top: calc(#{$player-height / 2} + #{$analyse-block-gap / 2});
  }
  }
 
- @include breakpoint($mq-col1) {
+ @include mq-is-col1 {
  .analyse__controls {
  margin-top: $player-height;
  }

ui/analyse/css/study/_search.scss

@@ -1,5 +1,5 @@
 .study-search {
- @include breakpoint($mq-xx-small) {
+ @media (min-width: at-least($xx-small)) {
  width: 500px;
  }
  input {

ui/analyse/css/study/relay/_layout.scss

@@ -4,7 +4,7 @@ body {
  --site-header-margin: 1em;
  --allow-video: false;
 
- @include breakpoint($mq-col3) {
+ @include mq-at-least-col3 {
  --allow-video: true;
  }
 }
@@ -21,7 +21,7 @@ main.is-relay {
  grid-area: relay-admin;
  }
 
- @include breakpoint($mq-col3) {
+ @include mq-at-least-col3 {
  #video-player-placeholder,
  button.streamer-show {
  display: block;
@@ -43,7 +43,7 @@ main.is-relay.has-relay-tour {
  max-height: 40vh;
  }
 
- @include breakpoint($mq-col2) {
+ @include mq-at-least-col2 {
  grid-template-rows: 80vh;
  grid-template-areas:
  'relay-tour . side'
@@ -57,7 +57,7 @@ main.is-relay.has-relay-tour {
  }
  }
 
- @include breakpoint($mq-col3) {
+ @include mq-at-least-col3 {
  grid-template-columns: $col3-uniboard-side $block-gap-half var(--col3-uniboard-width) $block-gap-half $col3-uniboard-table;
  grid-template-rows: $mq-col3-side-height;
  grid-template-areas:
@@ -81,7 +81,7 @@ main.analyse.is-relay:not(.has-relay-tour) {
  .chat__members {
  display: none;
  }
- @include breakpoint($mq-col2) {
+ @include mq-at-least-col2 {
  grid-template-rows: calc(var(--cg-height) / 2) calc(var(--cg-height) / 2) 2.5em;
  grid-template-areas:
  'board gauge side'
@@ -93,7 +93,7 @@ main.analyse.is-relay:not(.has-relay-tour) {
  margin-top: unset;
  }
  }
- @include breakpoint($mq-col3) {
+ @include mq-at-least-col3 {
  grid-template-rows: var(--cg-height) 2.5em;
  grid-template-areas:
  'side . board gauge tools'