// === Orders === .orders { margin: 0 0 50px 0; animation-fill-mode: both; animation-duration: 0.35s; animation-delay: 0.15s; animation-name: slideUp; &__detail { display: none; animation-fill-mode: both; animation-duration: 0.35s; animation-delay: 0.15s; animation-name: fadeIn; &.active { display: block; } } &__list { min-height: 324px; margin-top: -15px; margin-right: -15px; margin-left: -15px; text-align: center; position: relative; -ms-flex-wrap: wrap; flex-wrap: wrap; // justify-content: space-around; display: none; animation-fill-mode: both; animation-duration: 0.35s; animation-delay: 0.15s; animation-name: fadeIn; &.active { display: -ms-flexbox; display: flex; } } } // === Order === .order { width: 100%; max-width: 33.33333%; min-width: 180px; padding: 15px; white-space: normal; text-align: left; text-decoration: none; position: relative; //noinspection CssOverwrittenProperties display: inline-block; //noinspection CssOverwrittenProperties display: flex; -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; &__inner { width: 100%; padding: 20px; background-color: #fff; border: solid 2px #e8e9ec; border-bottom: solid 3px #d6d8d9; border-radius: 5px; color: #333; transition: border-color 0.2s ease-out; text-align: left; display: flex; flex-direction: column; &:hover { border-color: #a2ccf5; border-bottom-color: #91b3d4; } } &__title { padding: 0 0 10px 0; } &__item { padding: 10px 0; border-bottom: solid 1px #e5e8ed; &:last-of-type { border-bottom: 0; } &:nth-child(2n) { background-color: #f9fafb; } &Key { padding: 0 10px 0 0; color: #717172; vertical-align: top; display: inline-block; } &Value { vertical-align: top; display: inline-block; } } &__control { margin: 15px 0 0 0; } &__payBtn { margin-right: 15px; } } @media (max-width: 425px) { .order { &__payBtn { width: 100%; } &__viewBtn { width: 100%; margin-top: 10px; } } } // === accountDetail === .accountDetail { width: 100%; min-height: 400px; position: relative; &__inner { width: 100%; padding: 10px 20px 40px 20px; background-color: #fff; border: solid 2px #e8e9ec; border-bottom: solid 3px #d6d8d9; border-radius: 5px; color: #333; position: relative; flex-direction: column; } &__img { width: 50px; margin: 14px 0 0 0; position: absolute; } &__info { padding: 0 0 0 70px; } } // === account === .account { position: relative; animation-fill-mode: both; animation-duration: 0.35s; animation-delay: 0.15s; animation-name: slideUp; &__item { padding: 10px 0 10px 0; border-bottom: solid 1px #c3c5c7; &Key { padding-bottom: 5px; } &Value { font-weight: bold; } &:last-child { border-bottom: 0; } } } // === Animations === /* @media screen and (min-width: 1024px) { .account { animation-fill-mode: both; animation-duration: 0.35s; animation-delay: 0.15s; animation-name: slideUp; } } */ // === orderDetail === .orderDetail { width: 100%; position: relative; &__inner { width: 100%; padding: 20px; background-color: #fff; border: solid 2px #e8e9ec; border-bottom: solid 3px #d6d8d9; border-radius: 5px; color: #333; flex-direction: column; } &__products { margin: 0 0 20px 0; padding: 12px 12px 2px 12px; background-color: #f2f5f8; border-radius: 5px; } &__services { margin: 0 0 20px 0; padding: 12px 12px 2px 12px; background-color: #f2f5f8; border-radius: 5px; } &__id { padding: 0 0 22px 0; border-bottom: solid 2px #4f98e1; } &__item { padding: 10px 0 10px 0; border-top: solid 1px #c3c5c7; } &__status { padding: 2px 6px 3px 6px; border-radius: 3px; background-color: #8b8b8b; color: #fff; &--ok { background-color: #2c7919; color: #fff; } &--warn { background-color: #d58d38; color: #fff; } } &__close { min-height: 20px; margin: 0 0 15px 0; padding: 0; border: 0; &:hover, &:active, &:focus { color: inherit; background-color: transparent; text-decoration: underline; box-shadow: none; } } &__amount { &Value { color: #a72e2e; font-weight: bold; } &Currency { color: #a72e2e; font-weight: bold; } } &__payBtn { margin-left: 15px; } } @media (max-width: 425px) { .orderDetail { &__services { padding: 0; background-color: #fff; } &__products { padding: 0; background-color: #fff; } &__control { display: flex; } &__payBtn { width: 100%; margin: 5px 0; } &__closeBtn { width: 100%; margin: 5px 0; line-height: 1; } } } // === product === .product { width: 100%; position: relative; &__inner { width: 100%; margin-bottom: 10px; padding: 20px; background-color: #fff; border-bottom: solid 3px #e9e9e9; border-radius: 5px; transition: border-color 0.2s ease; color: #333; flex-direction: column; &:hover { border-bottom-color: #dcddde; } } &__title { font-size: 18px; margin-bottom: 10px; } &__quantity { margin-bottom: 5px; &Value { // } &Unit { // } } &__price { margin-bottom: 5px; &Value { // } &Currency { // } } &__amount { &Value { color: #a72e2e; font-weight: bold; } &Currency { color: #a72e2e; font-weight: bold; } } } @media (max-width: 425px) { .product { &__inner { padding: 5px 0 15px 0; } &:last-child .product__inner { margin-bottom: 0; border-bottom: 0; } } } // === service === .service { width: 100%; position: relative; &__inner { width: 100%; margin-bottom: 10px; padding: 20px; background-color: #fff; border-bottom: solid 3px #e9e9e9; border-radius: 5px; transition: border-color 0.2s ease; color: #333; flex-direction: column; &:hover { border-bottom-color: #dcddde; } } &__title { font-size: 18px; margin-bottom: 10px; } &__quantity { margin-bottom: 5px; &Value { // } &Unit { // } } &__price { margin-bottom: 5px; &Value { // } &Currency { // } } &__amount { &Value { color: #a72e2e; font-weight: bold; } &Currency { color: #a72e2e; font-weight: bold; } } } @media (max-width: 425px) { .service { &__inner { padding: 0 0 20px 0; &:last-child { padding: 0; border-bottom: 0; } } } } // === [ Adaptive ] === // === Desktop === @media (max-width: 1280px) { // } @media (min-width: 1024px) { // } // === Tablet && Desktop === @media (min-width: 768px) { // } // === Tablet === @media (max-width: 1024px) { .order { max-width: 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; } } // === Mobile === @media (max-width: 768px) { .order { max-width: 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; } } @media (max-width: 425px) { // } // === Animations === /* @media screen and (min-width: 1024px) { .orders { animation-fill-mode: both; animation-duration: 0.35s; animation-delay: 0.15s; animation-name: slideUp; &__list, &__detail { animation-fill-mode: both; animation-duration: 0.35s; animation-delay: 0.15s; animation-name: fadeIn; } } } */