vdesign-ui 0.1.8 → 0.1.10

package/dist/components/headnav/style.less

@@ -0,0 +1,232 @@
+@headnav-prefix-cls: vd-head-nav;
+
+
+.@{headnav-prefix-cls} {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: calc(var(--height-headnav-primary) * 1px);
+    padding: 0 calc(var(--spacing-headnav-padding_y) * 1px);
+
+    &__title {
+        max-width: 100%;
+        font-size: calc(var(--en-single-f-f-b-fontSize) * 1px);
+        font-weight: var(--en-single-f-f-b-fontWeight);
+        color: var(--color-headnav-title);
+
+    }
+
+    &--left {
+        position: absolute;
+        left: calc(var(--spacing-headnav-padding_y) * 1px);
+        top: 0;
+        bottom: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: calc(var(--spacing-headnav-icon-margin_left) * 1px);
+    }
+
+    &--right {
+        position: absolute;
+        right: calc(var(--spacing-headnav-padding_y) * 1px);
+        top: 0;
+        bottom: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: calc(var(--spacing-headnav-icon-margin_left) * 1px);
+
+    }
+
+    &--normal {
+        height: calc(var(--height-headnav-secondary) * 1px);
+
+        .@{headnav-prefix-cls} {
+
+            &__title--normal {
+                font-size: calc(var(--en-single-f-e-s-fontSize) * 1px);
+                font-weight: var(--en-single-f-e-s-fontWeight);
+                color: var(--color-headnav-title);
+            }
+        }
+
+        .vd-selector-l__title {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            font-size: calc(var(--en-single-f-e-s-fontSize) * 1px);
+            font-weight: var(--en-single-f-e-s-fontWeight);
+        }
+
+        .vd-selector-s__title {
+            font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+            font-weight: var(--en-single-f-c-r-fontWeight);
+            color: var(--color-headnav-title);
+        }
+
+    }
+
+
+    &__content {
+        flex: 1;
+        max-width: 60%;
+        position: relative;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
+        margin: 0 calc(var(--spacing-headnav-title-margin_y) * 1px);
+
+        &--start {
+            flex: 1;
+            max-width: 100%;
+            align-items: flex-start;
+            padding-inline-end: calc(var(--spacing-headnav-title-margin_right) * 1px);
+        }
+
+        .vd-selector {
+
+            &-xl__title {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+
+        &--selector {
+            max-width: 100%;
+            padding-inline-start: 20px;
+        }
+
+
+
+    }
+
+    &__icontype{
+        display: flex;
+    }
+
+    &__left-title {
+        font-size: calc(var(--en-single-f-f-b-fontSize) * 1px);
+        font-weight: var(--en-single-f-f-b-fontWeight);
+        color: var(--color-headnav-title);
+    }
+
+    &__edit-left-text {
+        font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);
+        font-weight: var(--en-single-f-d-r-fontWeight);
+        color: var(--color-headnav-title);
+    }
+
+    &__edit-right-text {
+        font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+        font-weight: var(--en-single-f-d-s-fontWeight);
+        color: var(--primary-color);
+    }
+
+    &__account-text {
+        font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);
+        font-weight: var(--en-single-f-d-r-fontWeight);
+        color: var(--color-headnav-title);
+    }
+
+    &__account-type {
+        font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+        font-weight: var(--en-single-f-c-r-fontWeight);
+        color: var(--color-headnav-title);
+
+        &--icon {
+            font-size: calc(var(--icon-selector-s) * 1px);
+            margin-inline-end: calc(var(--spacing-selector-s-margin_y) * 1px);
+        }
+    }
+
+    &__icon {
+        display: flex;
+
+        .vd-iconfont {
+            font-size: calc(var(--icon-large) * 1px);
+            color: var(--color-headnav-icon);
+        }
+    }
+
+    // &__space--end {
+    //     margin-inline-end: calc(var(--spacing-headnav-icon-margin_left) * 1px);
+    // }
+
+    // &__space--start {
+    //     margin-inline-start: calc(var(--spacing-headnav-icon-margin_left) * 1px);
+    // }
+
+    &__time {
+        margin-inline-start: calc(var(--spacing-headnav-primary-text-margin_right) * 1px);
+        font-size: calc(var(--en-single-f-a-r-fontSize) * 1px);
+        font-weight: var(--en-single-f-a-r-fontWeight);
+        color: var(--color-headnav-text_delayed);
+    }
+
+    &__info {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+
+    &__description {
+        margin-block-start: calc(var(--spacing-headnav-text_description-margin_top) * 1px);
+        font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+        font-weight: var(--en-single-f-c-r-fontWeight);
+        color: var(--color-headnav-text_description);
+    }
+
+    &__stock {
+        display: flex;
+        align-items: center;
+        font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
+        font-weight: var(--en-single-f-b-r-fontWeight);
+
+        &--rise {
+            color: var(--rise-color);
+        }
+
+        &--fall {
+            color: var(--fall-color);
+
+        }
+
+        span {
+            margin-inline-end: calc(var(--spacing-headnav-primary-dot-margin_right) * 1px);
+        }
+    }
+}
+
+
+
+[lang='ar'] {
+    .@{headnav-prefix-cls} {
+        &--left {
+            position: absolute;
+            left: auto;
+            right: calc(var(--spacing-headnav-padding_y) * 1px);
+        
+        }
+    
+        &--right {
+            position: absolute;
+            left: calc(var(--spacing-headnav-padding_y) * 1px);
+            right: auto;
+        }
+    }
+
+    .vd-head-nav__icon {
+        .vd-icon-icon_nav_back{
+            transform: scaleX(-1);
+        }
+    }
+}