misc: 500px 모드를 일관되게 적용.
- media-1000px, media-500px 추가
This commit is contained in:
Vendored
+1
@@ -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";
|
||||
|
||||
@@ -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
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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";
|
||||
|
||||
Reference in New Issue
Block a user