Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- .p-0 {
- padding-top: 0;
- padding-bottom: 0;
- }
- .header-type1 {
- padding: 0 50px;
- position: fixed;
- background: transparent;
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- padding: 10px 20px;
- }
- .header-nav {
- a {
- font-size: 16px;
- font-family: "HelveticaNeue-Reguler", "Century Gothic", Arial, sans-serif;
- &.activeNav {
- position: relative;
- font-size: 18px;
- }
- }
- }
- }
- .header-blur {
- box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
- -webkit-backdrop-filter: blur(3px);
- backdrop-filter: blur(3px);
- background-color: #212957;
- animation-name: headerfadein;
- animation-duration: 0.5s;
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- -webkit-backdrop-filter: none;
- backdrop-filter: none;
- }
- }
- .header-fade-out {
- animation-name: headerfadeout;
- animation-duration: 0.3s;
- }
- @keyframes headerfadein {
- from {
- background-color: transparent;
- }
- to {
- background-color: rgba(18, 24, 59, 0.9);
- }
- }
- @keyframes headerfadeout {
- from {
- background-color: rgba(18, 24, 59, 0.9);
- }
- to {
- background-color: transparent;
- }
- }
- .header-buffer {
- height: 107px;
- background-color: rgba(18, 24, 59, 0.9);
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- height: 70px;
- }
- }
- .header-search {
- margin-right: 10px !important;
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- display: none;
- }
- }
- .header-notification {
- // @include breakpoint(tablet) {
- // display: none;
- // }
- position: relative;
- .badge {
- width: 10px;
- height: 10px;
- line-height: 18px;
- background: #0f2236;
- color: #fff;
- font-weight: bold;
- border-radius: 50%;
- transform: translate(-5px, -10px);
- position: absolute;
- right: 0px;
- z-index: 10000;
- margin-top: 34px;
- margin-right: -4px;
- opacity: 0.7;
- }
- .badge:empty {
- display: inline-block;
- }
- }
- .header-logo {
- .logo-home {
- img {
- width: auto;
- height: 33px;
- margin: 37px 0 0 0px;
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- width: unset !important;
- height: 30px !important;
- padding: 0;
- margin: 0;
- }
- }
- .image-profile-header {
- height: 33px;
- width: 33px;
- border-radius: 50%;
- background-size: cover;
- position: relative;
- }
- p {
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- display: flex;
- align-items: center;
- }
- }
- }
- .header-logo-mobile {
- a {
- color: gray;
- }
- .icon-search {
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- margin-left: 10px;
- }
- }
- .more-logo {
- height: 20px;
- }
- }
- }
- .mobile-submenu {
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- font-size: 1em !important;
- text-transform: uppercase;
- }
- }
- .mb-profile {
- display: none;
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- display: block;
- }
- }
- .lg-nav {
- display: block;
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- display: none !important;
- }
- }
- .fastyle {
- font-family: "Fontawesome", "Century Gothic", Arial, sans-serif !important;
- }
- .profile-desktop {
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- display: none !important;
- }
- }
- .profile-mobile {
- display: none !important;
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- display: block !important;
- }
- }
- .profile-accordion {
- position: relative;
- display: flex;
- align-self: center;
- align-items: center;
- .image-profile-header {
- width: 50px;
- height: 50px;
- border-radius: 50%;
- background-size: cover;
- background-position: center;
- margin-right: 20px;
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- margin-right: 0;
- }
- }
- .profile-toggle {
- position: absolute;
- top: 70px;
- right: 0;
- width: auto;
- min-width: 220px;
- transform: scaleY(0);
- transform-origin: top;
- transition: transform 0.3s ease-in-out;
- background-color: #12183b;
- color: #FFFFFF;
- border-radius: 10px;
- overflow: hidden;
- &.open {
- transform: scaleY(1);
- box-shadow: 0 2px 9px 10px rgba(153, 200, 245, 0.06);
- opacity: 1;
- }
- hr {
- border: 0;
- border-top: solid 1px rgba(0, 130, 255, 0.5);
- margin: 0;
- }
- .header-toggle {
- background-image: linear-gradient(to bottom, #ffffff -48%, #00a7ff 41%, #0082ff 174%);
- padding: 20px;
- cursor: default;
- max-width: 220px;
- div {
- line-height: normal;
- letter-spacing: 0;
- font-size: 12px;
- max-width: 100%;
- strong {
- font-size: 14px;
- display: block;
- padding-bottom: 8px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
- .email {
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
- .header-type1 {
- .header-nav {
- .mobile-menu {
- .mobile-wrapper {
- .icon-back {
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- right: 19px;
- }
- }
- }
- }
- }
- }
- a {
- color: #FFFFFF;
- display: block;
- line-height: normal;
- padding: 10px 20px;
- position: relative;
- margin: 0;
- white-space: nowrap;
- &:hover {
- background-image: linear-gradient(to bottom, #ffffff -48%, #00a7ff 41%, #0082ff 174%);
- }
- }
- }
- .profile-toggle-mobile {
- position: absolute;
- transform: scaleY(0);
- transform-origin: top;
- transition: transform 0.3s ease-in-out;
- margin-top: 12px;
- width: 100%;
- right: 0;
- a {
- font-size: 12px;
- padding-left: 40px;
- border: none;
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- font-size: 15.36px;
- }
- &::after {
- content: "";
- border-bottom: 1px solid #ffffff;
- position: absolute;
- left: 40px;
- bottom: 0;
- width: calc(100% - 40px);
- }
- }
- &.open {
- transform: scaleY(1);
- opacity: 1;
- }
- }
- .background-size {
- height: 0;
- transition: height 0.3s ease-in-out;
- &.open {
- height: 198px;
- }
- &.open-enterprise {
- height: 239px;
- margin-left: 30px !important;
- }
- &.open-showcase {
- height: 64px;
- margin-left: 30px !important;
- }
- }
- .mobile-profile-toggle {
- display: flex;
- .profile-name {
- max-width: calc(100% - 85px);
- font-size: 12px;
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- padding: 10px 6px 0 8px;
- }
- .name-profile {
- margin-bottom: 8px;
- font-size: 16px;
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- margin-bottom: 2px;
- }
- }
- .email{
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- font-family: "HelveticaNeue-Light", "Century Gothic", Arial, sans-serif;
- }
- }
- }
- .fa {
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- padding-left: 10px;
- position: relative;
- top: 10px;
- }
- }
- .email {
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
- }
- .imageLogo {
- margin-top: 30px;
- }
- .fa {
- font-size: 32px;
- font-weight: 100;
- }
- .hide-topline {
- border-bottom: unset !important;
- }
- a {
- &.activeNav {
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- font-size: 17px;
- }
- // cursor: default!important;
- &:after {
- content: "";
- display: block;
- position: absolute;
- width: 100%;
- height: 2px;
- background: #0082ff;
- border-radius: 3px;
- // bottom: -15px;
- margin-top: 8px;
- left: 0;
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- display: none;
- }
- }
- }
- }
- .site-header__item__nav {
- //padding-top : 5px ;
- ul {
- padding: 0;
- margin-left: 30px;
- margin-bottom: 0;
- }
- li {
- list-style: none;
- display: inline-block;
- vertical-align: middle;
- margin: 0 10px 0 0;
- //padding: 23px 0 22px 0;
- position: relative;
- a {
- padding: 23px 15px 22px 15px;
- display: block;
- }
- &:after {
- position: absolute;
- content: "";
- bottom: 0;
- height: 3px;
- left: 0;
- right: 0;
- width: 0%;
- margin: auto;
- //background: $red-color;
- //transition: $transition;
- }
- &.active,
- &:hover {
- &:after {
- width: 100%;
- }
- }
- }
- a {
- position: relative;
- // font-family: $regular-font;
- font-size: 0.9em;
- color: #000;
- font-weight: 600;
- text-transform: uppercase;
- text-decoration: none;
- letter-spacing: 1px;
- }
- }
- .usernameMobile {
- display: none;
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- font-size: 20px;
- display: block;
- }
- }
- li.dropdown {
- display: inline-block;
- width: auto;
- position: relative;
- }
- .dropdown:hover .isi-dropdown {
- display: block;
- }
- // .isi-dropdown a:hover {
- // color: #fff !important;
- // }
- .isi-dropdown {
- margin-left: 0px !important;
- width: 120px;
- position: absolute;
- display: none;
- box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
- z-index: 1;
- background: #fff;
- // opacity: .8;
- // transition: $transition;
- }
- .isi-dropdown a {
- color: #000 !important;
- opacity: 100% !important;
- }
- .isi-dropdown a:hover {
- color: #000 !important;
- opacity: 100% !important;
- }
- .list-decoration {
- list-style-type: none;
- padding-left: 20px;
- }
- #a:hover ~ #b {
- display: none;
- }
- #a:hover ~ #c {
- display: block;
- }
- #b {
- display: block;
- }
- #c {
- display: none;
- }
- a:hover {
- text-decoration: none !important;
- }
- .nav-inside-text {
- position: relative;
- display: block;
- height: 65px;
- }
- .info-notif {
- display: flex !important;
- align-items: center;
- }
- .notif-round {
- width: 25px;
- position: absolute;
- right: 14px;
- // top: 6px;
- height: 25px;
- font-size: 12px;
- color: white;
- border-radius: 50%;
- display: flex;
- align-items: center;
- background-image: linear-gradient(to bottom, #ffffff -48%, #00a7ff 41%, #0082ff 174%);
- div {
- width: 100%;
- text-align: center;
- }
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- justify-content: center;
- }
- }
- .notif-round-green {
- width: 18px;
- height: 18px;
- border: solid 2px #212957;
- background-color: #22dc29;
- position: absolute;
- bottom: 0px;
- right: 38px;
- font-size: 7px;
- color: #FFFFFF;
- border-radius: 50%;
- float: right;
- padding: 4px 2px;
- -moz-text-align-last: center;
- text-align-last: center;
- }
- // CALENDAR
- ::ng-deep {
- .mat-calendar-previous-button,
- .mat-calendar-next-button {
- outline: none !important;
- }
- .mat-datepicker-toggle {
- width: 100%;
- left: 0;
- text-align: right;
- .mat-icon-button {
- width: 100%;
- text-align: right;
- padding-right: 20px;
- outline: none;
- .mat-button-wrapper {
- svg {
- fill: white !important;
- }
- }
- }
- .mat-button-focus-overlay,
- .mat-button-ripple {
- display: none !important;
- }
- .mat-datepicker-toggle-default-icon {
- display: none !important;
- }
- .mat-datepicker-content {
- .mat-calendar-next-button,
- .mat-calendar-previous-button {
- position: absolute;
- right: 20px;
- }
- }
- }
- .mat-calendar-header {
- .mat-calendar-controls {
- .mat-calendar-arrow {
- border-top-color: #FFFFFF;
- }
- .mat-calendar-previous-button,
- .mat-calendar-next-button {
- &::after {
- border-color:#FFFFFF;
- }
- }
- }
- }
- .mat-calendar-table {
- th {
- color: #FFFFFF;
- }
- .mat-calendar-body-label {
- color: #ffffff50;
- }
- .mat-calendar-body-cell-content {
- color: #FFFFFF;
- }
- }
- .mat-datepicker-content {
- border-radius: 10px;
- }
- .mat-datepicker-toggle-default-icon.ng-star-inserted {
- width: 1.2em;
- color: #FFFFFF;
- }
- .mat-datepicker-popup {
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- width: 78% !important;
- .mat-datepicker-content {
- width: 100%;
- .mat-calendar {
- width: 100% !important;
- }
- }
- }
- }
- .mat-datepicker-content .mat-calendar {
- width: 296px;
- height: 354px;
- opacity: 1;
- color: #FFFFFF;
- border-radius: 8px;
- box-shadow: 0 2px 10px 9px rgba(153, 200, 245, 0.06);
- background-color: #174389;
- position: absolute;
- z-index: 2;
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- position: relative;
- }
- }
- .mat-calendar-body-cell-content {
- &:hover {
- background-image: linear-gradient(180deg, #ffffff -68.9%, #009fff 42.58%, #0082ff 89.97%);
- border: unset;
- }
- }
- .mat-calendar-body-selected {
- background-image: linear-gradient(180deg, #ffffff -68.9%, #009fff 42.58%, #0082ff 89.97%);
- }
- .calendar-style {
- padding: 0;
- width: 100%;
- input {
- width: 100%;
- &::placeholder {
- color: #FFFFFF;
- }
- }
- .image-calendar {
- position: absolute;
- right: 20px;
- top: 18px;
- }
- .mat-form-field {
- font-size: inherit;
- font-weight: 400;
- line-height: 1.125;
- font-family: Roboto, "Helvetica Neue", sans-serif;
- width: 100%;
- letter-spacing: normal;
- }
- .mat-datepicker-toggle,
- .mat-datepicker-content .mat-calendar-next-button,
- .mat-datepicker-content .mat-calendar-previous-button {
- color: rgba(0, 0, 0, 0.54);
- position: absolute;
- right: 8px;
- top: 10px;
- }
- .mat-form-field-suffix.ng-tns-c188-0.ng-star-inserted {
- position: absolute;
- right: 10px;
- }
- .mat-form-field-label-wrapper {
- position: absolute;
- left: 0;
- box-sizing: content-box;
- width: 100%;
- height: 100%;
- overflow: hidden;
- pointer-events: none;
- }
- /* Date Picker */
- .mat-form-field-appearance-legacy .mat-form-field-prefix .mat-datepicker-toggle-default-icon,
- .mat-form-field-appearance-legacy .mat-form-field-suffix .mat-datepicker-toggle-default-icon {
- width: 1.2em;
- color: #FFFFFF;
- position: absolute;
- right: 10px;
- top: 10px;
- }
- .mat-calendar {
- display: block;
- z-index: 3;
- right: 50px;
- position: absolute;
- }
- }
- .wrapper-page {
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- position: relative;
- display: flex;
- flex-direction: column-reverse;
- }
- }
- .indicator-page {
- padding: 10px 0px;
- position: absolute;
- // margin: 30px 0;
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- position: relative;
- text-align: center;
- }
- }
- .widget-wrapper {
- margin-bottom: 30px;
- padding-bottom: 250px;
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- padding-bottom: 80px;
- }
- }
- .widget-group {
- padding: 20px;
- cursor: pointer;
- transition: transform 0.2s ease-in-out;
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- width: 50%;
- padding: 10px 5px;
- }
- .widget-content {
- padding: 20px;
- border-radius: 10px;
- box-shadow: 0 2px 10px 9px rgba(153, 200, 245, 0.06);
- background-color: rgba(0, 130, 255, 0.3);
- min-width: 215px;
- width: 100%;
- height: 259px;
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- padding: 15px;
- }
- .thumbnail-product {
- width: 47px;
- height: 47px;
- background-size: contain;
- margin-bottom: 20px;
- background-position: center left;
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- width: 50px;
- height: 50px;
- margin-bottom: 10px;
- }
- }
- .product-content {
- display: flex;
- margin-bottom: 18px;
- margin-top: 15px;
- }
- span.status-tag {
- font-size: 10px;
- background-color: transparent;
- padding: 5px 10px;
- border-radius: 20px;
- border: 1px solid #ffffff;
- vertical-align: middle;
- max-height: 30px;
- color: #ffffff;
- right: 36px;
- position: absolute;
- top: 29px;
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- margin: 0;
- display: block;
- right: 16px;
- top: 20px;
- }
- }
- .title-product {
- font-family: "HelveticaNeue-Bold", "Century Gothic", Arial, sans-serif;
- font-size: 14px;
- min-height: auto;
- height: unset;
- align-self: center;
- line-height: 1.5;
- white-space: pre-wrap;
- padding-left: 11px;
- padding-bottom: 25px;
- color: #FFFFFF;
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- width: 10px;
- font-size: 14px;
- min-height: 36px;
- height: 36px;
- margin-bottom: 15px;
- line-height: 18px;
- }
- }
- .subtitle-product {
- font-size: 12px;
- color: #FFFFFF;
- margin-bottom: 30px;
- line-height: 20px;
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- font-size: 9px;
- min-height: 60px;
- margin-bottom: 15px;
- line-height: 12px;
- }
- }
- .product-info {
- font-family: "HelveticaNeue-Bold", "Century Gothic", Arial, sans-serif;
- display: flex;
- font-size: 12px;
- justify-content: space-around;
- position: relative;
- color: #FFFFFF;
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- font-size: 10px;
- display: block;
- bottom: 5px;
- }
- div {
- margin-bottom: 0;
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- margin-bottom: 5px;
- }
- }
- img {
- margin-right: 8px;
- width: 11px;
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- width: 10px;
- }
- }
- }
- .button-card {
- display: flex;
- justify-content: space-around;
- background: linear-gradient(0deg, #001aba -83.58%, #0082ff 119.86%);
- border-radius: 0px 0px 9.96139px 9.96139px;
- padding: 15px 63px;
- width: 86%;
- margin: 10px 0 0 -20px;
- position: absolute;
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- padding: 12px 44px;
- width: 94%;
- margin: -6px 0 0 -14px;
- }
- span {
- font-weight: 600;
- color: #FFFFFF;
- line-height: 19px;
- font-size: 13px;
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- font-size: 8px;
- }
- }
- img {
- @media only screen and (min-width: 375px) and (max-width: 480px) {
- width: 8px;
- }
- }
- &:hover {
- background: linear-gradient(0deg, #001aba -83.58%, #0082ff 240.17%);
- cursor: pointer;
- }
- }
- }
- // &:hover {
- // @include breakpoint(no-mobile) {
- // transform: scale(1.03);
- // transform-origin: 50% 100%;
- // .widget-content {
- // background-image: linear-gradient(to top, #001aba 0%, #0082ff 93%);
- // }
- // .thumbnail-product {
- // position: relative;
- // width: 160px !important;
- // height: 160px !important;
- // margin-top: -60px;
- // @include breakpoint(mobile) {
- // width: 140px !important;
- // height: 140px !important;
- // }
- // }
- // }
- // }
- }
- }
- ::ng-deep .mat-calendar-table-header-divider {
- &:after {
- background: #fff !important;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement