misc: 500px 모드를 일관되게 적용.

- media-1000px, media-500px 추가
This commit is contained in:
2021-12-21 00:30:29 +09:00
parent 841e5c5395
commit 587f9fc1ec
8 changed files with 46 additions and 39 deletions
+1
View File
@@ -7,6 +7,7 @@ $input-color: #303030;
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css");
@import "./break_500px.scss";
@import "./variables.scss";
@import "./bootswatch_custom_variables.scss";
@import "bootstrap/scss/bootstrap.scss";
+13 -1
View File
@@ -12,4 +12,16 @@ $grid-breakpoints: (
lg: 992px,
xl: 1200px,
xxl: 1400px
);
);
@mixin media-1000px{
@media (min-width: map-get($grid-breakpoints, 'md')) {
@content;
}
}
@mixin media-500px{
@media (max-width: calc(map-get($grid-breakpoints, 'md') - .02px)) {
@content;
}
}
+10 -24
View File
@@ -1,6 +1,6 @@
@import "./common/break_500px.scss";
@import "./common/bootstrap5.scss";
@import "./editor_component.scss";
@import "./util.scss";
body {
color: white;
background-color: black;
@@ -10,14 +10,14 @@ body {
background-repeat: repeat-y;
}
@include media-breakpoint-up(md) {
@include media-1000px {
#container {
width: 1000px;
margin: 0 auto;
}
}
@include media-breakpoint-down(md) {
@include media-500px {
body {
overflow-x: hidden;
}
@@ -120,7 +120,7 @@ body {
text-overflow: ellipsis;
}
@include media-breakpoint-up(md) {
@include media-1000px {
#map_view {
grid-template-columns: 500px 200px 300px;
grid-template-rows: 520px 130px;
@@ -220,7 +220,7 @@ body {
overflow: hidden;
}
@include media-breakpoint-down(md) {
@include media-500px {
.buttonPlate {
display: grid;
grid-template-columns: repeat(5, 1fr);
@@ -396,7 +396,7 @@ body {
}
@include media-breakpoint-up(md) {
@include media-1000px {
#message_board section {
overflow-y: auto;
overflow-x: hidden;
@@ -412,7 +412,7 @@ body {
}
}
@include media-breakpoint-down(md) {
@include media-500px {
#message_board .message_input_form {
position: -webkit-sticky;
@@ -537,7 +537,7 @@ body {
}
@include media-breakpoint-down(md) {
@include media-500px {
#mailbox_list-col {
order: 1;
}
@@ -588,13 +588,13 @@ body {
}
@include media-breakpoint-up(md) {
@include media-1000px {
#float-tabs {
display: none;
}
}
@include media-breakpoint-down(md) {
@include media-500px {
#float-tabs {
position: fixed;
right: -1rem;
@@ -629,17 +629,3 @@ body {
}
}
}
.s-border-t {
border-top: gray solid 1px;
}
.s-border-b {
border-bottom: gray solid 1px;
}
.s-border-tb {
border-top: gray solid 1px;
border-bottom: gray solid 1px;
}
+2 -7
View File
@@ -1,9 +1,7 @@
@import "./common/break_500px.scss";
@import "./common/bootstrap5.scss";
@import "./common_legacy.scss";
@include media-breakpoint-up(md) {
@include media-1000px{
#container {
width: 1000px;
margin: 0 auto;
@@ -17,10 +15,7 @@
}
}
@include media-breakpoint-down(md) {
@include media-500px{
body {
overflow-x: hidden;
}
+3 -4
View File
@@ -1,7 +1,7 @@
@import "./common/break_500px.scss";
@import "./common/bootstrap5.scss";
@import "./editor_component.scss";
@import "./common_legacy.scss";
@import "./util.scss";
#amount {
width: 100px;
@@ -16,15 +16,14 @@
}
@include media-breakpoint-up(md) {
@include media-1000px{
#container {
width: 1000px;
margin: 0 auto;
}
}
@include media-breakpoint-down(md) {
@include media-500px{
body {
overflow-x: hidden;
}
+14
View File
@@ -0,0 +1,14 @@
.s-border-t {
border-top: gray solid 1px;
}
.s-border-b {
border-bottom: gray solid 1px;
}
.s-border-tb {
border-top: gray solid 1px;
border-bottom: gray solid 1px;
}
+2 -3
View File
@@ -548,7 +548,6 @@ export default defineComponent({
@import "@scss/common/break_500px.scss";
@import "@scss/common/variables.scss";
@import "@scss/common/bootswatch_custom_variables.scss";
@import "bootstrap/scss/bootstrap-utilities.scss";
.commandPad {
background-color: $gray-900;
@@ -561,7 +560,7 @@ export default defineComponent({
//30, 70, 37.65, 160
}
@include media-breakpoint-up(md) {
@include media-1000px{
.commandPad {
margin-left: 10px;
@@ -583,7 +582,7 @@ export default defineComponent({
}
}
@include media-breakpoint-down(md) {
@include media-500px {
.dropdown-item {
padding: 8px;
}
+1
View File
@@ -160,6 +160,7 @@ export default defineComponent({
</script>
<style lang="scss">
@import "@scss/common/break_500px.scss";
@import "@scss/common/variables.scss";
@import "@scss/common/bootswatch_custom_variables.scss";
@import "bootstrap/scss/bootstrap-utilities.scss";