Browse Source

css 수정

allegroline 2 years ago
parent
commit
44479fe337

+ 1 - 1
mobile-src/.env.development

@@ -1,7 +1,7 @@
 VUE_APP_TITLE=develop
 VUE_APP_TITLE=develop
 VUE_APP_API_URL=/mobile/
 VUE_APP_API_URL=/mobile/
 VUE_APP_TYPE=portal
 VUE_APP_TYPE=portal
-_VUE_APP_TYPE=as
+_VUE_APP_TYPE=po
 VUE_APP_API_KEY=AIzaSyCmKjBJTt4K3D7hPAuXENuAJugEB4RnT1U
 VUE_APP_API_KEY=AIzaSyCmKjBJTt4K3D7hPAuXENuAJugEB4RnT1U
 VUE_APP_AUTH_DOMAIN=sgc-portal.firebaseapp.com
 VUE_APP_AUTH_DOMAIN=sgc-portal.firebaseapp.com
 VUE_APP_PROJECT_ID=sgc-portal
 VUE_APP_PROJECT_ID=sgc-portal

+ 19 - 8
mobile-src/src/theme/global.scss

@@ -141,15 +141,18 @@ ion-list.item-view {
             --padding-start: 0.25rem;
             --padding-start: 0.25rem;
         }
         }
         > ion-note[slot=start] {
         > ion-note[slot=start] {
-            --color: var(--ion-color-tertiary);
+            --color: var(--sgc-color-tertiary-50);
             border-bottom-style: none;
             border-bottom-style: none;
             margin-right: 10px;
             margin-right: 10px;
             min-width: 5em;
             min-width: 5em;
             font-size: 0.8rem;
             font-size: 0.8rem;
         }
         }
-        > ion-label {
-            --color: var(--sgc-background-light-font);
-        }
+        &.item {
+            ion-label {
+                --color: var(--sgc-background-light-font);
+                font-size: 0.9rem;
+            }   
+        }    
     }
     }
 }
 }
 
 
@@ -172,12 +175,19 @@ ion-list.item-form {
         ion-input {
         ion-input {
             font-size: 0.9rem;
             font-size: 0.9rem;
             --padding-start:0;
             --padding-start:0;
+            --color: var(--sgc-background-light-font);
+        }
+        ion-textarea {
+            textarea.native-textarea {
+                font-size: 0.9rem;                
+                color: var(--sgc-background-light-font);
+            }
         }
         }
-
         ion-select.in-item {
         ion-select.in-item {
             max-width : none;
             max-width : none;
             width:100%;
             width:100%;
             font-size: 0.8rem;
             font-size: 0.8rem;
+            color: var(--sgc-background-light-font);
             --padding-start: 0;
             --padding-start: 0;
         }
         }
         &::part(native) {
         &::part(native) {
@@ -382,8 +392,9 @@ textarea:-webkit-autofill:focus,
 select:-webkit-autofill,
 select:-webkit-autofill,
 select:-webkit-autofill:hover,
 select:-webkit-autofill:hover,
 select:-webkit-autofill:focus {
 select:-webkit-autofill:focus {
-  border: 1px solid green;
-  -webkit-text-fill-color: green;
-  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
+  box-sizing: border-box;
+  border: 1px solid #ffffff99;
+  -webkit-text-fill-color: #fff;
+  -webkit-box-shadow: 0 0 0px 1000px #ffffff33 inset;
   transition: background-color 5000s ease-in-out 0s;
   transition: background-color 5000s ease-in-out 0s;
 }
 }

+ 9 - 17
mobile-src/src/views/common/LoginPage.vue

@@ -45,9 +45,11 @@
                             <ion-button type="button" color="light" size="small" @click="openModal('findid')">
                             <ion-button type="button" color="light" size="small" @click="openModal('findid')">
                                 {{ $t('LOGIN.BTN_FINDID') }}
                                 {{ $t('LOGIN.BTN_FINDID') }}
                             </ion-button>
                             </ion-button>
+                            <span>|</span>
                             <ion-button type="button" color="light" size="small" @click="openModal('findpw')">
                             <ion-button type="button" color="light" size="small" @click="openModal('findpw')">
                                 {{ $t('LOGIN.BTN_FINDPW') }}
                                 {{ $t('LOGIN.BTN_FINDPW') }}
                             </ion-button>
                             </ion-button>
+                            <span>|</span>
                             <ion-button
                             <ion-button
                                 type="button"
                                 type="button"
                                 color="light"
                                 color="light"
@@ -57,7 +59,6 @@
                             >
                             >
                                 {{ $t('BTN_ADDHOME') }}
                                 {{ $t('BTN_ADDHOME') }}
                             </ion-button>
                             </ion-button>
-                            
                         </ion-text>
                         </ion-text>
                     </ion-list>
                     </ion-list>
                 </form>
                 </form>
@@ -278,31 +279,22 @@ div.ion-page.background-dark {
             ion-text {
             ion-text {
                 font-size: 0.7rem;
                 font-size: 0.7rem;
                 text-align: center;
                 text-align: center;
-                margin: 0 3rem;
-                display: grid;
+                display: flex;
+                align-items: center;
+                justify-content: center;
                 grid-template-columns: repeat(5, 1fr);
                 grid-template-columns: repeat(5, 1fr);
                 color: #aaa;
                 color: #aaa;
                 ion-button {
                 ion-button {
-                    width:5rem;
+                    display: inline-block;
                     position: relative;
                     position: relative;
-                    margin: 0 0.5rem;
+                    letter-spacing: -0.05em;
                     &::part(native) {
                     &::part(native) {
                         color: var(--sgc-background-dark-font);
                         color: var(--sgc-background-dark-font);
                         background: transparent;
                         background: transparent;
                         display: inline-block;
                         display: inline-block;
+                        --padding-start: 0.5em;
+                        --padding-end: 0.5em;
                     }
                     }
-                    &::after {
-                        content:'|';
-                        position:absolute;
-                        right: -0.5rem;
-                        top: 4px;
-                        color: rgba(255,255,255,0.2);
-                    }
-                    &:last-child::after {
-                        display: none;
-                    }
-
-
                 }
                 }
             } /* ion-text - end  */
             } /* ion-text - end  */
             ion-button.loginBtn {
             ion-button.loginBtn {

+ 6 - 2
mobile-src/src/views/components/SgcDatetime.vue

@@ -110,9 +110,9 @@ ion-datetime-button {
         display: inline-block;
         display: inline-block;
         width: 1em;
         width: 1em;
         height: 1em;
         height: 1em;
-        right: 0.5em;
+        right: 0.9em;
         top: 50%;
         top: 50%;
-        margin-top: -0.5em;
+        margin-top: -0.35em;
         mask-image: url(../../theme/calendar-number-outline.svg);
         mask-image: url(../../theme/calendar-number-outline.svg);
         background-color: var(--sgc-color-tertiary-50, #9382E1);
         background-color: var(--sgc-color-tertiary-50, #9382E1);
     }
     }
@@ -123,6 +123,10 @@ ion-datetime-button {
     }
     }
     &::part(native) {
     &::part(native) {
         background-color: transparent;
         background-color: transparent;
+        --ion-text-color:  var(--sgc-background-light-font);
+        font-size: 0.9rem;
+        padding: 0 1rem 0 0;
+        margin: 0;
     }
     }
 }
 }
 </style>
 </style>

+ 6 - 5
mobile-src/src/views/components/SgcDatetimeRange.vue

@@ -153,10 +153,11 @@ div {
         font-size: 0.7em;
         font-size: 0.7em;
         display: inline-block;
         display: inline-block;
         vertical-align: middle;
         vertical-align: middle;
+        margin-right: 0.2em;
     }
     }
     ion-datetime-button {
     ion-datetime-button {
         width:calc(50% - 6px);
         width:calc(50% - 6px);
-        padding-right: 1em;
+    //    padding-right: 0.5em;
         position: relative;
         position: relative;
         display: inline-block;
         display: inline-block;
         vertical-align: middle;
         vertical-align: middle;
@@ -185,14 +186,14 @@ div {
             text-size-adjust: auto;
             text-size-adjust: auto;
             overflow: hidden;
             overflow: hidden;
             text-overflow: ellipsis;
             text-overflow: ellipsis;
-            margin-left: 10px;
+        //    margin-left: 10px;
             font-size:0.9rem;
             font-size:0.9rem;
         }
         }
         &::part(native) {
         &::part(native) {
             background-color: transparent;
             background-color: transparent;
-            margin-left: -1em;
-            padding-left: 0.2em;
-            padding-right: 0.2em;
+            margin-left: 0;
+            padding-left: 0;
+            padding-right: 0;
         }
         }
     }
     }
 }
 }

+ 1 - 0
mobile-src/src/views/po/PoRoomRevPage.vue

@@ -13,6 +13,7 @@
             v-model="searchModel.reYyyymmdd"
             v-model="searchModel.reYyyymmdd"
             @sgcChange="onSearch()"
             @sgcChange="onSearch()"
             ref="reYyyymmdd"
             ref="reYyyymmdd"
+						class="ion-margin-start"
 						></sgc-item-input>
 						></sgc-item-input>
 						<ion-button slot="end" type="button" size="small" color="primary" @click="setDate('NEXT')">
 						<ion-button slot="end" type="button" size="small" color="primary" @click="setDate('NEXT')">
 						{{$t('ROOM.BTN_NEXT')}}
 						{{$t('ROOM.BTN_NEXT')}}