Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Consistent Breakpoints in Theme #839

Merged
merged 4 commits into from
Jun 22, 2021
Merged

Consistent Breakpoints in Theme #839

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2bb8fe6
Changed most @media to @include breakpoints instead. Also moved answe…
cjiang2000 Jun 17, 2021
9d11df4
changed back to pixels
cjiang2000 Jun 17, 2021
134d64e
Changed the utility mixin to use breakpoint-mobile-max and breakpoint…
cjiang2000 Jun 18, 2021
e12cd71
fixed pixel value of screen-xs-max and screen-sm-min
cjiang2000 Jun 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion static/scss/answers/_default.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
@use "sass:math";

// Core variables and mixins
@import "overlay/module";
@import "common/variables";
Expand Down
4 changes: 2 additions & 2 deletions static/scss/answers/cards/document-standard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
width: 100%;
margin-top: calc(var(--yxt-base-spacing) / 2);

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
justify-content: space-between;
flex-direction: row;
Expand Down Expand Up @@ -71,7 +71,7 @@
text-transform: uppercase;
margin-top: calc(var(--yxt-base-spacing) / 2);

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
margin-top: 0;
margin-left: calc(var(--yxt-base-spacing) / 2);
Expand Down
4 changes: 2 additions & 2 deletions static/scss/answers/cards/event-standard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
flex-direction: column;
width: 100%;

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
justify-content: space-between;
flex-direction: row;
Expand Down Expand Up @@ -91,7 +91,7 @@
text-transform: uppercase;
margin-top: calc(var(--yxt-base-spacing) / 2);

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
margin-left: 1.5rem;
margin-top: 0;
Expand Down
8 changes: 4 additions & 4 deletions static/scss/answers/cards/financial-professional-location.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ $financial-professional-location-ordinal-dimensions: 18px !default;
flex-direction: column;
width: 100%;

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
justify-content: space-between;
flex-direction: row;
Expand Down Expand Up @@ -135,7 +135,7 @@ $financial-professional-location-ordinal-dimensions: 18px !default;
&-phone--desktop {
display: none;

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
display: flex;
}
Expand All @@ -145,7 +145,7 @@ $financial-professional-location-ordinal-dimensions: 18px !default;
@include Link;
display: flex;

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
display: none;
}
Expand All @@ -156,7 +156,7 @@ $financial-professional-location-ordinal-dimensions: 18px !default;
text-transform: uppercase;
margin-top: calc(var(--hh-financial-professional-location-spacing) / 2);

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
margin-top: 0;
margin-left: calc(var(--hh-financial-professional-location-spacing) / 2);
Expand Down
4 changes: 2 additions & 2 deletions static/scss/answers/cards/job-standard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
flex-direction: column;
width: 100%;

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
justify-content: space-between;
flex-direction: row;
Expand Down Expand Up @@ -74,7 +74,7 @@
text-transform: uppercase;
margin-top: calc(var(--yxt-base-spacing) / 2);

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
margin-top: 0;
margin-left: calc(var(--yxt-base-spacing) / 2);
Expand Down
2 changes: 1 addition & 1 deletion static/scss/answers/cards/link-standard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
flex-direction: column;
width: 100%;

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
justify-content: space-between;
flex-direction: row;
Expand Down
22 changes: 11 additions & 11 deletions static/scss/answers/cards/location-standard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ $location-standard-ordinal-dimensions: calc(var(--hh-location-standard-base-spac
{
flex-direction: column;

@media (min-width: $screen-lg-min)
@include bpgte(lg)
{
flex-direction: row;
}
Expand All @@ -24,7 +24,7 @@ $location-standard-ordinal-dimensions: calc(var(--hh-location-standard-base-spac
{
width: 100%;

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
width: 350px;
}
Expand All @@ -34,7 +34,7 @@ $location-standard-ordinal-dimensions: calc(var(--hh-location-standard-base-spac
{
flex-direction: column;

@media (min-width: $screen-lg-min)
@include bpgte(lg)
{
flex-direction: row;
}
Expand All @@ -44,7 +44,7 @@ $location-standard-ordinal-dimensions: calc(var(--hh-location-standard-base-spac
{
margin-left: 0;

@media (min-width: $screen-lg-min)
@include bpgte(lg)
{
margin-left: calc(var(--hh-location-standard-base-spacing) / 2);
}
Expand Down Expand Up @@ -137,7 +137,7 @@ $location-standard-ordinal-dimensions: calc(var(--hh-location-standard-base-spac
display: flex;
flex-direction: column;

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
flex-direction: row;
justify-content: space-between;
Expand Down Expand Up @@ -171,7 +171,7 @@ $location-standard-ordinal-dimensions: calc(var(--hh-location-standard-base-spac
display: flex;
flex-direction: column;

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
flex-direction: row;
flex-wrap: wrap;
Expand All @@ -182,7 +182,7 @@ $location-standard-ordinal-dimensions: calc(var(--hh-location-standard-base-spac
{
margin-top: calc(var(--hh-location-standard-base-spacing) / 4);

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
width: 200px;
padding-right: calc(var(--hh-location-standard-base-spacing) * 2);
Expand All @@ -193,7 +193,7 @@ $location-standard-ordinal-dimensions: calc(var(--hh-location-standard-base-spac
{
width: 100%;

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
width: 320px;
}
Expand All @@ -220,7 +220,7 @@ $location-standard-ordinal-dimensions: calc(var(--hh-location-standard-base-spac
&-phone--desktop {
display: none;

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
display: flex;
}
Expand All @@ -230,7 +230,7 @@ $location-standard-ordinal-dimensions: calc(var(--hh-location-standard-base-spac
@include Link;
display: flex;

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
display: none;
}
Expand Down Expand Up @@ -269,7 +269,7 @@ $location-standard-ordinal-dimensions: calc(var(--hh-location-standard-base-spac
text-transform: uppercase;
margin-top: calc(var(--hh-location-standard-base-spacing) / 2);

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
margin-left: calc(var(--hh-location-standard-base-spacing) / 2);
justify-content: center;
Expand Down
6 changes: 3 additions & 3 deletions static/scss/answers/cards/menuitem-standard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@
{
display: flex;
flex-direction: column;
@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
flex-direction: row;
}
Expand All @@ -87,7 +87,7 @@
flex-direction: column;
width: 100%;

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
justify-content: space-between;
flex-direction: row;
Expand All @@ -100,7 +100,7 @@
text-transform: uppercase;
margin-top: calc(var(--yxt-base-spacing) / 2);

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
margin-left: calc(var(--yxt-base-spacing) / 2);
justify-content: center;
Expand Down
4 changes: 2 additions & 2 deletions static/scss/answers/cards/product-standard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
flex-direction: column;
width: 100%;

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
justify-content: space-between;
flex-direction: row;
Expand All @@ -74,7 +74,7 @@
text-transform: uppercase;
margin-top: calc(var(--yxt-base-spacing) / 2);

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
margin-left: calc(var(--yxt-base-spacing) / 2);
margin-top: 0;
Expand Down
8 changes: 4 additions & 4 deletions static/scss/answers/cards/professional-location.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ $professional-location-ordinal-dimensions: 18px !default;
flex-direction: column;
width: 100%;

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
justify-content: space-between;
flex-direction: row;
Expand Down Expand Up @@ -135,7 +135,7 @@ $professional-location-ordinal-dimensions: 18px !default;
&-phone--desktop {
display: none;

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
display: flex;
}
Expand All @@ -145,7 +145,7 @@ $professional-location-ordinal-dimensions: 18px !default;
@include Link;
display: flex;

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
display: none;
}
Expand All @@ -156,7 +156,7 @@ $professional-location-ordinal-dimensions: 18px !default;
text-transform: uppercase;
margin-top: calc(var(--hh-professional-location-spacing) / 2);

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
margin-top: 0;
margin-left: calc(var(--hh-professional-location-spacing) / 2);
Expand Down
8 changes: 4 additions & 4 deletions static/scss/answers/cards/professional-standard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ $professional-standard-spacing: var(--yxt-base-spacing) !default;
flex-direction: column;
width: 100%;

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
justify-content: space-between;
flex-direction: row;
Expand Down Expand Up @@ -94,7 +94,7 @@ $professional-standard-spacing: var(--yxt-base-spacing) !default;
&-phone--desktop {
display: none;

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
display: flex;
}
Expand All @@ -104,7 +104,7 @@ $professional-standard-spacing: var(--yxt-base-spacing) !default;
@include Link;
display: flex;

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
display: none;
}
Expand All @@ -115,7 +115,7 @@ $professional-standard-spacing: var(--yxt-base-spacing) !default;
text-transform: uppercase;
margin-top: calc(var(--hh-professional-standard-spacing) / 2);

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
margin-top: 0;
margin-left: calc(var(--hh-professional-standard-spacing) / 2);
Expand Down
4 changes: 2 additions & 2 deletions static/scss/answers/cards/standard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
width: 100%;
margin-top: calc(var(--yxt-base-spacing) / 2);

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
justify-content: space-between;
flex-direction: row;
Expand Down Expand Up @@ -71,7 +71,7 @@
text-transform: uppercase;
margin-top: calc(var(--yxt-base-spacing) / 2);

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
margin-top: 0;
margin-left: calc(var(--yxt-base-spacing) / 2);
Expand Down
4 changes: 2 additions & 2 deletions static/scss/answers/collapsible-filters/sdk-filter-overrides.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
}
}

@media (max-width: $container-tablet-base) {
@include bplte(xs) {
.yxt-SortOptions-option,
.yxt-FilterOptions-option {
margin: 8px 0px;
Expand Down Expand Up @@ -80,7 +80,7 @@
margin-top: 8px;
border-top: none;

@media (min-width: $container-tablet-base) {
@include bpgte(sm) {
margin-top: 12px;
}
}
Expand Down
4 changes: 2 additions & 2 deletions static/scss/answers/common/util/UtilityMixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@
$mq: "";

$maxes: (
xs: "(max-width: #{$screen-xs-max})",
xs: "(max-width: #{$breakpoint-mobile-max})",
sm: "(max-width: #{$screen-sm-max})",
md: "(max-width: #{$screen-md-max})"
);

$mins: (
sm: "(min-width: #{$screen-sm-min})",
sm: "(min-width: #{$breakpoint-mobile-min})",
md: "(min-width: #{$screen-md-min})",
lg: "(min-width: #{$screen-lg-min})"
);
Expand Down
4 changes: 2 additions & 2 deletions static/scss/answers/directanswercards/allfields-standard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
{
margin-top: calc(var(--yxt-base-spacing) * 1.5);

@media (min-width: $breakpoint-mobile-min) {
@include bpgte(sm) {
margin-top: calc(var(--yxt-base-spacing) * 2.35);
}

Expand Down Expand Up @@ -87,7 +87,7 @@
margin-top: calc(var(--yxt-base-spacing) / 2);
justify-content: center;

@media (min-width: $breakpoint-mobile-max)
@include bpgte(sm)
{
margin-top: 0;
margin-left: calc(var(--yxt-base-spacing) / 2);
Expand Down
Loading