granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Replace media query usage with mixin

Browse source
This commit is contained in:
Justin Edmund 2022-12-27 14:54:24 -08:00
parent ced4c35dbd
commit 3cf889cd43
19 changed files with 45 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
components/CharacterGrid/index.scss
View file

@ -12,7 +12,7 @@
padding: 0;
max-width: 761px;
@media (max-width: $medium-screen) {
@include breakpoint(tablet) {
justify-content: space-between;
width: 100%;
}
@ -20,7 +20,7 @@
& > * {
margin-right: $unit * 3;
@media (max-width: $medium-screen) {
@include breakpoint(tablet) {
margin-right: inherit;
}
}

2
components/CharacterUnit/index.scss
View file

@ -56,7 +56,7 @@
height: auto;
width: 131px;
@media (max-width: $medium-screen) {
@include breakpoint(tablet) {
width: 17vw;
}

2
components/Dialog/index.scss
View file

@ -22,7 +22,7 @@
text-decoration: underline;
}
@media (max-width: $phone) {
@include breakpoint(phone) {
min-width: inherit;
min-height: inherit;
width: 100%;

2
components/ExtraSummons/index.scss
View file

@ -10,7 +10,7 @@
position: relative;
left: 9px;
@media (max-width: $medium-screen) {
@include breakpoint(phone) {
left: auto;
max-width: auto;
width: 100%;

2
components/ExtraWeapons/index.scss
View file

@ -10,7 +10,7 @@
position: relative;
left: 8px;
@media (max-width: $medium-screen) {
@include breakpoint(tablet) {
left: auto;
max-width: auto;
width: 100%;

6
components/FilterBar/index.scss
View file

@ -15,7 +15,7 @@
width: 100%;
max-width: 996px;
@media (max-width: $tablet) {
@include breakpoint(tablet) {
position: static;
flex-direction: column;
width: 100%;
@ -29,7 +29,7 @@
gap: $unit;
width: auto;
@media (max-width: $tablet) {
@include breakpoint(tablet) {
flex-direction: column;
width: 100%;
}
@ -64,7 +64,7 @@
background-color: var(--select-contained-bg-hover);
}
@media (max-width: $tablet) {
@include breakpoint(tablet) {
width: 100%;
max-width: inherit;
text-align: center;

4
components/GridRepCollection/index.scss
View file

@ -9,13 +9,13 @@
width: auto;
max-width: 996px;
@media (max-width: $tablet) {
@include breakpoint(tablet) {
grid-template-columns: minmax(320px, 1fr);
max-width: inherit;
width: 100%;
}
@media (max-width: $phone) {
@include breakpoint(tablet) {
grid-template-columns: 1fr;
max-width: inherit;
width: 100%;

2
components/Header/index.scss
View file

@ -36,7 +36,7 @@
margin-left: auto;
}
@media (max-width: $phone) {
@include breakpoint(phone) {
.Button .Text {
display: none;
}

4
components/JobSection/index.scss
View file

@ -3,7 +3,7 @@
display: flex;
margin-bottom: $unit * 3;
@media (max-width: $phone) {
@include breakpoint(phone) {
flex-direction: column;
gap: $unit;
}
@ -56,7 +56,7 @@
width: $width;
transition: box-shadow 0.15s ease-in-out;
@media (max-width: $phone) {
@include breakpoint(phone) {
aspect-ratio: 16/9;
margin: 0;
width: inherit;

4
components/PartyDetails/index.scss
View file

@ -3,7 +3,7 @@
flex-direction: column;
margin-top: $unit-4x;
@media (max-width: $phone) {
@include breakpoint(phone) {
padding: 0 $unit;
}
@ -86,7 +86,7 @@
width: 60%;
height: 60%;
@media (max-width: $tablet) {
@include breakpoint(tablet) {
width: 100%;
height: 100%;
}

8
components/PartySegmentedControl/index.scss
View file

@ -9,7 +9,7 @@
max-width: 760px;
position: relative;
@media (max-width: $phone) {
@include breakpoint(phone) {
gap: $unit;
margin-left: 0;
margin-right: 0;
@ -20,18 +20,18 @@
&.Editable {
justify-content: flex-start;
}
}
.SegmentedControl {
flex-grow: 1;
@media (max-width: $phone) {
@include breakpoint(phone) {
flex-grow: 1;
width: 100%;
display: grid;
grid-template-columns: auto auto auto;
}
}
}
}
.ExtraSwitch {
@ -44,7 +44,7 @@
position: absolute;
right: 0px;
@media (max-width: $phone) {
@include breakpoint(phone) {
position: static;
.Text {

4
components/SearchModal/index.scss
View file

@ -8,7 +8,7 @@
gap: 0;
padding: 0;
@media (max-width: $phone) {
@include breakpoint(phone) {
min-width: inherit;
min-height: inherit;
width: 96%; // is this even right
@ -68,7 +68,7 @@
padding: 0 ($unit * 1.5);
overflow-y: scroll;
@media (max-width: $phone) {
@include breakpoint(phone) {
max-height: inherit;
}

2
components/Segment/index.scss
View file

@ -34,7 +34,7 @@
}
}
@media (max-width: $phone) {
@include breakpoint(phone) {
min-width: initial;
width: 100%;
}

2
components/SummonGrid/index.scss
View file

@ -14,7 +14,7 @@
text-overflow: ellipsis;
overflow: hidden;
@media (max-width: $phone) {
@include breakpoint(phone) {
&.Friend {
max-width: 78px;
}

6
components/SummonUnit/index.scss
View file

@ -9,7 +9,7 @@
width: 182px;
height: auto;
@media (max-width: $medium-screen) {
@include breakpoint(tablet) {
width: 20.3vw;
}
}
@ -19,7 +19,7 @@
// min-height: 141px;
min-height: 180px;
@media (max-width: $medium-screen) {
@include breakpoint(tablet) {
min-height: 16.5vw;
}
@ -29,7 +29,7 @@
width: 148px;
height: auto;
@media (max-width: $medium-screen) {
@include breakpoint(tablet) {
width: 20vw;
}
}

5
components/UncapStar/index.scss
View file

@ -53,11 +53,8 @@
background-image: url('/icons/uncap/purple-hover@3x.png');
}
}
}
// Phone up to iPhone 14 Pro Max
@media only screen and (max-width: 430px) and (max-height: 850px) and (-webkit-device-pixel-ratio: 3) {
.UncapStar {
@include breakpoint(phone) {
background-size: cover;
height: 14px;
width: 14px;

6
components/WeaponGrid/index.scss
View file

@ -2,7 +2,7 @@
display: flex;
justify-content: center;
@media (max-width: $phone) {
@include breakpoint(phone) {
display: grid;
grid-template-columns: 1fr auto;
}
@ -23,12 +23,12 @@
margin-bottom: $unit-3x;
margin-right: $unit-3x;
@media (max-width: $tablet) {
@include breakpoint(tablet) {
margin-bottom: $unit-2x;
margin-right: $unit-2x;
}
@media (max-width: $phone) {
@include breakpoint(tablet) {
margin-bottom: $unit;
margin-right: $unit;
}

11
components/WeaponUnit/index.scss
View file

@ -5,7 +5,7 @@
min-height: 139px;
position: relative;
@media (max-width: $medium-screen) {
@include breakpoint(tablet) {
min-height: auto;
}
@ -28,11 +28,12 @@
margin-right: $unit-3x;
max-width: 200px;
@media (max-width: $tablet) {
@include breakpoint(tablet) {
margin-right: $unit-2x;
}
@media (max-width: $phone) {
@include breakpoint(phone) {
margin-right: $unit-2x;
margin-right: $unit;
}
@ -62,7 +63,7 @@
}
}
@media (max-width: $medium-screen) {
@include breakpoint(tablet) {
width: 25vw;
}
}
@ -94,7 +95,7 @@
}
}
@media (max-width: $medium-screen) {
@include breakpoint(tablet) {
width: 20vw;
}
}

4
styles/globals.scss
View file

@ -113,7 +113,7 @@ select {
margin-top: $unit * 3;
min-width: 752px;
@media (max-width: $medium-screen) {
@include breakpoint(tablet) {
min-width: auto;
width: 100%;
}
@ -291,7 +291,7 @@ i.tag {
gap: $unit;
padding: 0 ($unit * 3);
@media (max-width: $phone) {
@include breakpoint(phone) {
display: grid;
gap: 8px;
grid-template-columns: 1fr 1fr;