page { display: flex; flex-flow: column nowrap; height: 100%; } .deliveryDetail { display: flex; flex-flow: column nowrap; height: 100%; .content { padding-top: 24px; flex: 1 1 auto; overflow: scroll; .detailTop { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; } } .bottomBar { flex: none; margin: 0 24px; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; padding-top: 24px; padding-bottom: calc(20px + constant(safe-area-inset-bottom)); padding-bottom: calc(20px + env(safe-area-inset-bottom)); } } .detailInfo { .detailInfoItem { &--title { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; font-size: 28px; padding: 10px 0; } &--detail { &--row{ display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 28px; } &--name{ } &--count{ } &--weight{ } } } } .orderInfoTop{ font-size: 28px; color: $color_font_one; font-weight: 550; } .orderNo { font-size: 28px; font-weight: 550; } .status { font-size: 28px; &--toBeAudit { color: $color_danger; } &--audited { color: $color_main; } } .divider { margin: 24px 0; } .total { margin-top: 24px; padding: 15px 24px; font-size: 24px; line-height: 30px; font-weight: 600; color: #f79b31; background: #fef9f4; border-radius: 8px; display: flex; .totalContent{ flex: 1 1 auto; display: inline-block; text-align: right; } }