@import "compass/reset"; @import "baseAdmin"; @import "buttonAdmin"; :root{ --black-main: #000000; --white-main: #FFFFFF; --grey-main: #F3F3F3; --purple-main: #74063D; --green-main: #5F8F1B; --valid: #20ce7a; --edit: #e99120; --delete: #d53535; --padding-main-block: 130px 0; --padding-first-block: 125px 0 85px; } body{ background: #F4F5F7; font-family: 'Red Hat Display', sans-serif; -webkit-font-smoothing: antialiased; -moz-font-smoothing: unset; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; font-weight: 500; } h1{ font-size: 1.4rem; font-weight: 600; } .header{ width: 250px; min-height: calc(100vh - 94px); position: relative; nav{ ul{ padding: 0 25px; li{ padding: 10px 0; a{ display: flex; align-items: center; svg{ margin-right: 7px; } } } } } .logout{ position: absolute; left: 25px; bottom: 35px; } } .main-content{ width: calc(100% - 250px); .card{ background-color: var(--white-main); &.card-rounded{ border-radius: 15px; } &__content{ padding: 1.5rem 1.5rem; &__head{ .subtitle{ font-size: 0.8rem; display: block; margin-top: 4px; color: #939393; } } &__body{ padding-top: 35px; .head{ color: #939393; .element{ display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; div{ &:not(:last-of-type){ padding: 0 30px 0 0; } } } } .body{ padding-top: 30px; .element{ padding: 20px 0; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; border-top: 1px solid #bebebe; align-items: center; .img{ max-height: 100px; } div{ &:not(:last-of-type){ padding: 0 30px 0 0; } } .action{ display: flex; flex-direction: row; gap: 15px; .menu-reservation{ position: relative; svg{ cursor: pointer; } .dropdown-options{ position: absolute; top: 60px; right: 0px; z-index: 10; opacity: 0; visibility: hidden; transition: all .5s cubic-bezier(0.455, 0.03, 0.515, 0.955); ul{ padding: 0 20px; background-color: var(--white-main); box-shadow: 0 0 26px rgba($color: #000000, $alpha: 0.11); li{ padding: 20px 0; &:not(:last-child){ border-bottom: 1px solid #bebebe; } } } } &.open{ .dropdown-options{ top: 30px; opacity: 1; visibility: visible; } } } } .status{ padding: 4px 12px; border-radius: 25px; font-size: 0.9rem; font-weight: 700; &.en-attente{ background-color: var(--edit); color: var(--white-main); } &.confirme{ background-color: var(--valid); color: var(--white-main); } &.annule{ background-color: var(--delete); color: var(--white-main); } } .edit{ color: var(--edit); } .delete{ color: var(--delete); } } } } } } } form{ label{ margin-bottom: 6px; display: block; } input, textarea, select{ width: 100%; background-color: #eaeaea; border-radius: 8px; padding: 12px; margin-bottom: 35px; border: 2px solid transparent; font-family: 'Red Hat Display', sans-serif; font-weight: 500; font-size: 0.9rem; } }