diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 9a78194e..50493429 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -238,6 +238,10 @@ font-size: 2em; } +.text-xl { + font-size: $fontSizeXl; +} + .text-lg { font-size: $fontSizeLg; } diff --git a/scss/_variables.scss b/scss/_variables.scss index 6a0ec4a4..ed0d46cc 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -44,6 +44,7 @@ $fontFamilyBase: $fontFamilySansSerif !default; $fontSizeBase: px2rem(14px) !default; // Assumes the browser default, typically `16px` $fontSizeMd: px2rem(16px) !default; $fontSizeLg: px2rem(20px) !default; +$fontSizeXl: px2rem(24px) !default; $fontSizeSm: px2rem(12px) !default; $fontSizeXs: px2rem(11px) !default; @@ -359,6 +360,8 @@ $Tabs-borderColor: $borderColor !default; $Tabs-borderWidth: $borderWidth !default; $Tabs-borderRadius: $borderRadius !default; $Tabs-color: $text-color !default; +$Tabs-link-padding: $gap-sm $gap-base !default; +$Tabs-link-margin: 0 !default; $Tabs-onDisabled-color: $gray600 !default; $Tabs-onHover-borderColor: $gray200 !default; $Tabs-onActive-color: $gray700 !default; @@ -367,6 +370,8 @@ $Tabs-onActive-borderBottomColor: transparent !default; $Tabs-onActive-borderBottomWidth: initial !default; $Tabs-onActive-bg: $background !default; $Tabs-content-bg: $background !default; +$Tabs-content-borderWidth: 0 $Tabs-borderWidth $Tabs-borderWidth !default; +$Tabs-content-padding: $gap-base !default; $Tabs--card-bg: $background !default; $Tabs--card-borderTopColor: #e2e5ec !default; $Tabs--card-onActive-bg: #eceff8 !default; @@ -1158,6 +1163,11 @@ $Page-content-paddingX: 0 !default; $Page-main-bg: transparent !default; $Page-header-paddingY: $gap-base !default; $Page-header-paddingX: $gap-base !default; +$Page-body-padding: $gap-base !default; +$Page-title-lineHeight: 1.1 !default; +$Page-title-fontSize: $fontSizeMd !default; +$Page-title-fontWeight: $fontWeightNormal !default; +$Page-title-color: $text--loud-color !default; // Panel $Panel-borderRadius: $borderRadius !default; diff --git a/scss/components/_page.scss b/scss/components/_page.scss index f02c1ea8..5f6fd36c 100644 --- a/scss/components/_page.scss +++ b/scss/components/_page.scss @@ -38,13 +38,14 @@ &-title { margin: 0; padding: 0; - color: $text--loud-color; - font-size: $fontSizeMd; - font-weight: $fontWeightNormal; + color: $Page-title-color; + line-height: $Page-title-lineHeight; + font-size: $Page-title-fontSize; + font-weight: $Page-title-fontWeight; } &-body { - padding: $gap-base; + padding: $Page-body-padding; } &-asideTplWrapper { diff --git a/scss/components/_tabs.scss b/scss/components/_tabs.scss index a0857d83..50323e7f 100644 --- a/scss/components/_tabs.scss +++ b/scss/components/_tabs.scss @@ -23,7 +23,8 @@ border-top-right-radius: $Tabs-borderRadius; color: $Tabs-color; margin-right: px2rem(2px); - padding: $gap-sm $gap-base; + padding: $Tabs-link-padding; + margin: $Tabs-link-margin; text-decoration: none; cursor: pointer; display: block; @@ -67,9 +68,9 @@ &-content { background-color: $Tabs-content-bg; - padding: $gap-base; + padding: $Tabs-content-padding; border-style: solid; - border-width: 0 $Tabs-borderWidth $Tabs-borderWidth; + border-width: $Tabs-content-borderWidth; border-color: $Tabs-borderColor; } @@ -96,10 +97,8 @@ > a:first-child, > a:first-child:hover, > a:first-child:focus { - border-bottom: px2rem(2px) solid $primary; + border-color: $primary; color: $primary; - background-color: transparent; - border-color: transparent transparent $primary transparent; } } @@ -109,6 +108,8 @@ color: #666; background-color: transparent; border-color: transparent; + border-style: solid; + border-width: 0 0 px2rem(2px) 0; } } } diff --git a/scss/themes/cxd.scss b/scss/themes/cxd.scss index c6bb7140..3012e672 100644 --- a/scss/themes/cxd.scss +++ b/scss/themes/cxd.scss @@ -42,7 +42,7 @@ $Layout-asideLink-arrowVendor: "iconfont"; $Layout-asideLink-arrowIcon: "\e63b"; $Layout-asideLink-arrowColor: #8d99b0; $Layout-asideLink-onHover-arrowColor: #fff; -$Layout-headerBar-borderBottom: px2rem(1px) solid $body-bg; +$Layout-headerBar-borderBottom: 0 none; $Layout-asideDivider-margin: 0 px2rem(10px); $Layout-asideDivider-bg: #3c3c4d; $Layout-nav--folded-height: px2rem(40px); @@ -52,7 +52,12 @@ $Page-aside-width: px2rem(160px); $Page-content-paddingY: 0; $Page-content-paddingX: 0; $Page-main-bg: #fff; -$Page-header-paddingY: px2rem(16px); +$Page-body-padding: px2rem(20px); +$Page-title-fontSize: px2rem(16px); +$Page-title-color: #000; +$Page-title-lineHeight: 1.75; +$Page-header-paddingX: px2rem(20px); +$Page-header-paddingY: px2rem(10px); $Form-item-gap: px2rem(20px); $Form-input-height: px2rem(30px); @@ -232,8 +237,8 @@ $Table-fontSize: px2rem(12px); $Table-color: #333; $Table-thead-color: #333; $Table-lineHeight: 20 / 12; -$Table-borderColor: #eceff8; -$Table-thead-bg: #f6f7fb; +$Table-borderColor: #F5F5F5; +$Table-thead-bg: #F5F5F5; $Table-thead-borderColor: #fff; $Table-thead-iconColor: #999; $Table-strip-bg: transparent; @@ -329,13 +334,19 @@ $Wizard-badge-bg: $white; $Wizard-badge-marginRight: px2rem(6px); // Tabs -$Tabs-linkFontSize: px2rem(16px); +$Tabs-linkFontSize: px2rem(14px); $Tabs-color: $text-color; $Tabs-onActive-color: $info; $Tabs-onActive-borderColor: transparent; $Tabs-onHover-borderColor: transparent; $Tabs-onActive-borderBottomColor: $info; $Tabs-onActive-borderBottomWidth: px2rem(2px); +$Tabs-content-borderWidth: 0; +$Tabs-borderRadius: 0; +$Tabs-content-padding: px2rem(10px) 0 0; +$Tabs-link-padding: px2rem(10px) 0; +$Tabs-link-margin: 0 px2rem(40px) 0 0; + // Pagination $Pagination-arrowVendor: "iconfont";