diff --git a/projects/app-ziti-console/src/assets/styles/tables.scss b/projects/app-ziti-console/src/assets/styles/tables.scss index 47e39ac3..73e883a3 100644 --- a/projects/app-ziti-console/src/assets/styles/tables.scss +++ b/projects/app-ziti-console/src/assets/styles/tables.scss @@ -279,7 +279,7 @@ main.table { position: absolute; width: 150px; background-color: var(--menu); - border-radius: 7px; + border-radius: var(--inputBorderRadius); right: -20px; top: 30px; box-shadow: 0 0 0 1px var(--shadow), 0 8px 16px var(--shadow); @@ -469,19 +469,19 @@ main.table { .borderBottom { border-bottom-color: var(--inputBorder); - border-bottom-width: 2px; + border-bottom-width: var(--inputBorderWidth); border-bottom-style: solid; } .borderRight { border-right-color: var(--inputBorder); - border-right-width: 2px; + border-right-width: var(--inputBorderWidth); border-right-style: solid; } .borderLeft { border-left-color: var(--inputBorder); - border-left-width: 2px; + border-left-width: var(--inputBorderWidth); border-left-style: solid; } @@ -500,7 +500,7 @@ main.table { color: var(--tableText); border-bottom-style: solid; border-bottom-color: var(--primary); - border-bottom-width: 2px; + border-bottom-width: var(--inputBorderWidth); } .tableGrid.four { diff --git a/projects/ziti-console-lib/src/lib/assets/styles/forms.css b/projects/ziti-console-lib/src/lib/assets/styles/forms.css index 53341da5..f5f38d6b 100644 --- a/projects/ziti-console-lib/src/lib/assets/styles/forms.css +++ b/projects/ziti-console-lib/src/lib/assets/styles/forms.css @@ -26,8 +26,8 @@ input, select, textarea { width: 100%; border-color: var(--stroke); border-style: solid; - border-width: 2px; - border-radius: 7px; + border-width: var(--inputBorderWidth); + border-radius: var(--inputBorderRadius); padding-left: 7px; padding-right: 7px; outline: none; @@ -94,7 +94,7 @@ input:disabled, select:disabled, textarea:disabled { } div.errors { - border-width: 2px; + border-width: var(--inputBorderWidth); border-style: solid; border-color: var(--red); } @@ -114,11 +114,11 @@ select { .check { width: 20px; height: 20px; - border-radius: 7px; + border-radius: var(--inputBorderRadius); position: relative; margin-right: 10px; float: left; - border-width: 2px; + border-width: var(--inputBorderWidth); border-style: solid; border-color: var(--primary); background-color: var(--navigation) !important; @@ -135,7 +135,7 @@ select { .subform { background-color: var(--primary); padding: 20px; - border-radius: 7px; + border-radius: var(--inputBorderRadius); display: grid; column-gap: 20px; padding-top: 10px; @@ -335,7 +335,7 @@ label .note:hover { width: fit-content; text-transform: uppercase; text-align: center; - border-radius: 7px; + border-radius: var(--inputBorderRadius); line-height: 25px; position: relative; border: 0; diff --git a/projects/ziti-console-lib/src/lib/assets/styles/header.css b/projects/ziti-console-lib/src/lib/assets/styles/header.css index 179b633b..2e3dac40 100644 --- a/projects/ziti-console-lib/src/lib/assets/styles/header.css +++ b/projects/ziti-console-lib/src/lib/assets/styles/header.css @@ -165,7 +165,7 @@ header #ProfileButton .icon { .menu { background-color: var(--menu); - border-radius: 7px; + border-radius: var(--inputBorderRadius); box-shadow: 0 0 0 1px var(--shadow), 0 8px 16px var(--shadow); font-size: 14px; font-weight: 600; diff --git a/projects/ziti-console-lib/src/lib/assets/styles/ziti.css b/projects/ziti-console-lib/src/lib/assets/styles/ziti.css index 320fa595..722da847 100644 --- a/projects/ziti-console-lib/src/lib/assets/styles/ziti.css +++ b/projects/ziti-console-lib/src/lib/assets/styles/ziti.css @@ -70,8 +70,8 @@ body { min-height: 34px; border: 4px solid rgba(0, 0, 0, 0); background-clip: padding-box; - -webkit-border-radius: 7px; - border-radius: 7px; + -webkit-border-radius: var(--inputBorderRadius); + border-radius: var(--inputBorderRadius); background-color: var(--stroke); -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05); box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05); @@ -464,9 +464,9 @@ aside .icon { .blurb { padding: 10px; background-color: #ffcc33; - border-radius: 7px; + border-radius: var(--inputBorderRadius); border-color: #cc3300; - border-width: 2px; + border-width: var(--inputBorderWidth); border-style: solid; margin-top: 8px; } @@ -695,7 +695,7 @@ aside .icon { .configureBox { background-color: var(--stroke); - border-radius: 7px; + border-radius: var(--inputBorderRadius); padding: 20px; margin-bottom: 10px; position: relative; @@ -708,7 +708,7 @@ aside .icon { .configBox { background-color: var(--stroke); - border-radius: 7px; + border-radius: var(--inputBorderRadius); padding: 20px; margin-bottom: 10px; position: relative; @@ -721,7 +721,7 @@ aside .icon { .lightBox { color: #FFF; background-color: var(--menu); - border-radius: 7px; + border-radius: var(--inputBorderRadius); padding: 10px; margin-top: 10px; position: relative; @@ -774,7 +774,7 @@ aside .icon { padding-top: 5px; font-size: 12px; padding-bottom: 5px; - border-radius: 7px; + border-radius: var(--inputBorderRadius); color: var(--black); transition: var(--transition); z-index: 10; @@ -1021,10 +1021,10 @@ aside .icon { } .selectable { - border-width: 2px; + border-width: var(--inputBorderWidth); border-style: solid; border-color: var(--menu); - border-radius: 7px; + border-radius: var(--inputBorderRadius); background-color: var(--menu); padding:0px; height: 130px; @@ -1039,7 +1039,7 @@ aside .icon { height: 40px; line-height: 40px; padding-left: 5px; - border-radius: 7px; + border-radius: var(--inputBorderRadius); margin-bottom: 10px; background-color: var(--stroke); cursor: pointer; @@ -1072,7 +1072,7 @@ aside .icon { background-color: transparent; transition: var(--transition); line-height: 13px; - border-radius: 7px; + border-radius: var(--inputBorderRadius); } .docs { @@ -1240,10 +1240,10 @@ aside .icon { } .tagSelect { - border-width: 2px; + border-width: var(--inputBorderWidth); border-style: solid; border-color: var(--menu); - border-radius: 7px; + border-radius: var(--inputBorderRadius); background-color: var(--menu); padding: 0px; height: 130px; @@ -1434,7 +1434,7 @@ aside .icon { position: absolute; width: 150px; background-color: var(--menu); - border-radius: 7px; + border-radius: var(--inputBorderRadius); right: 0px; top: 20px; box-shadow: 0 0 0 1px var(--shadowColor), 0 8px 16px var(--shadowColor); @@ -1492,7 +1492,7 @@ aside .icon { .cardStack { background-color: var(--primary); overflow: visable; - border-radius: 7px; + border-radius: var(--inputBorderRadius); height: 120px; width: 100%; float: left; @@ -1600,7 +1600,7 @@ aside .icon { gap: 30px; box-shadow: 0px 0px 19px -8px rgba(0, 0, 0, 0.2); padding: 10px; - border-radius: 7px; + border-radius: var(--inputBorderRadius); cursor: pointer; transition: 0.3s; } @@ -1635,7 +1635,7 @@ aside .icon { height: 150px; position: relative; background-color: var(--white); - border-radius: 7px; + border-radius: var(--inputBorderRadius); box-sizing: var(--shadow); cursor: pointer; } @@ -1688,8 +1688,8 @@ aside .icon { } .card { - border-radius: 7px; - border-width: 2px; + border-radius: var(--inputBorderRadius); + border-width: var(--inputBorderWidth); border-style: solid; border-color: var(--offWhite); background-color: var(--offWhite); @@ -1787,7 +1787,7 @@ aside .icon { .idBox { width: 48%; margin: 6px; - border-radius: 7px; + border-radius: var(--inputBorderRadius); background-color: var(--stroke); position: relative; display: inline-block; @@ -1850,8 +1850,8 @@ aside .icon { opacity: 0.0; transition: var(--transition); background-color: #fCFCFC; - border-radius: 7px; - border-width: 2px; + border-radius: var(--inputBorderRadius); + border-width: var(--inputBorderWidth); border-color: var(--placeholder); overflow: hidden; } @@ -1865,7 +1865,7 @@ aside .icon { position: relative; display: inline-block; cursor: pointer; - border-radius: 7px; + border-radius: var(--inputBorderRadius); transition: var(--transition); } @@ -2074,7 +2074,7 @@ path.green { position: absolute; float: left; line-height: 30px; - border-radius: 7px; + border-radius: var(--inputBorderRadius); margin-left: 2px; margin-bottom: 10px; margin-top: 10px; @@ -2088,7 +2088,7 @@ path.green { position: relative; float: left; line-height: 30px; - border-radius: 7px; + border-radius: var(--inputBorderRadius); margin-left: 2px; margin-bottom: 10px; margin-top: 10px; @@ -2133,7 +2133,7 @@ path.green { position: relative; float: left; line-height: 30px; - border-radius: 7px; + border-radius: var(--inputBorderRadius); margin-left: 10px; margin-bottom: 10px; transition: var(--transition); @@ -2158,15 +2158,15 @@ path.green { position: relative; float: left; line-height: 30px; - border-radius: 7px; + border-radius: var(--inputBorderRadius); margin-left: 10px; margin-bottom: 10px; transition: var(--transition); } .searchSelector { - border-radius: 7px; - border-width: 2px; + border-radius: var(--inputBorderRadius); + border-width: var(--inputBorderWidth); border-color: var(--stroke); border-style: solid; width: 100%; @@ -2200,8 +2200,8 @@ path.green { margin-top: -7px; margin-bottom: 10px; opacity: 1.0; - border-bottom-left-radius: 7px; - border-bottom-right-radius: 7px; + border-bottom-left-radius: var(--inputBorderRadius); + border-bottom-right-radius: var(--inputBorderRadius); background-color: rgba(0,0,0,0.6); padding-top: 25px; padding-left: 10px; @@ -2581,7 +2581,7 @@ div:focus { .pod .button { margin-top: 10px; width: 100%; - border-radius: 7px; + border-radius: var(--inputBorderRadius); line-height: 30px; } @@ -2897,10 +2897,10 @@ svg { } .list { - border-width: 2px; + border-width: var(--inputBorderWidth); border-style: solid; border-color: var(--menu); - border-radius: 7px; + border-radius: var(--inputBorderRadius); background-color: var(--menu); padding: 0px; height: 260px; @@ -2912,7 +2912,7 @@ svg { .list .listItem { position: relative; width: 100%; - border-radius: 7px; + border-radius: var(--inputBorderRadius); height: 30px; background-color: var(--white); color: var(--black); @@ -3147,7 +3147,7 @@ button[aria-label][data-balloon-pos] { opacity: 0; background-color: var(--black); color: var(--white); - border-radius: 7px; + border-radius: var(--inputBorderRadius); padding: 20px; transition: var(--transition); margin-top: 15px; @@ -3169,9 +3169,9 @@ button[aria-label][data-balloon-pos] { .modal .CodeMirror { height: 150px; - border-radius: 7px; - border-top-left-radius: 7px; - border-bottom-left-radius: 7px; + border-radius: var(--inputBorderRadius); + border-top-left-radius: var(--inputBorderRadius); + border-bottom-left-radius: var(--inputBorderRadius); margin-top: 10px; } diff --git a/projects/ziti-console-lib/src/lib/features/card/card.component.scss b/projects/ziti-console-lib/src/lib/features/card/card.component.scss index 7bfa4e98..428ce767 100644 --- a/projects/ziti-console-lib/src/lib/features/card/card.component.scss +++ b/projects/ziti-console-lib/src/lib/features/card/card.component.scss @@ -39,7 +39,7 @@ width: fit-content; text-transform: uppercase; text-align: center; - border-radius: 7px; + border-radius: var(--inputBorderRadius); position: relative; border: 0; background: var(--primaryColor); @@ -81,7 +81,7 @@ -ms-transition: box-shadow 0.3s; -o-transition: box-shadow 0.3s; transition: box-shadow 0.3s; - border-radius: 7px; + border-radius: var(--inputBorderRadius); min-height: 405px; display: flex; flex-direction: column; diff --git a/projects/ziti-console-lib/src/lib/features/data-table/cells/table-cell-menu/table-cell-menu.component.scss b/projects/ziti-console-lib/src/lib/features/data-table/cells/table-cell-menu/table-cell-menu.component.scss index ab6b3ca6..617a20bb 100644 --- a/projects/ziti-console-lib/src/lib/features/data-table/cells/table-cell-menu/table-cell-menu.component.scss +++ b/projects/ziti-console-lib/src/lib/features/data-table/cells/table-cell-menu/table-cell-menu.component.scss @@ -15,6 +15,6 @@ background-color: transparent; transition: var(--transition); line-height: 13px; - border-radius: 7px; + border-radius: var(--inputBorderRadius); } } diff --git a/projects/ziti-console-lib/src/lib/features/data-table/column-headers/table-column-default/table-column-default.component.scss b/projects/ziti-console-lib/src/lib/features/data-table/column-headers/table-column-default/table-column-default.component.scss index 72bb142a..fdbb744f 100644 --- a/projects/ziti-console-lib/src/lib/features/data-table/column-headers/table-column-default/table-column-default.component.scss +++ b/projects/ziti-console-lib/src/lib/features/data-table/column-headers/table-column-default/table-column-default.component.scss @@ -21,7 +21,7 @@ &:hover { border-color: var(--primaryColor) !important; border-style: solid; - border-width: 2px; + border-width: var(--inputBorderWidth); height: 10px !important; width: 10px !important; } diff --git a/projects/ziti-console-lib/src/lib/features/data-table/column-headers/table-column-menu/table-column-menu.component.scss b/projects/ziti-console-lib/src/lib/features/data-table/column-headers/table-column-menu/table-column-menu.component.scss index 4d77bb80..7e3658ec 100644 --- a/projects/ziti-console-lib/src/lib/features/data-table/column-headers/table-column-menu/table-column-menu.component.scss +++ b/projects/ziti-console-lib/src/lib/features/data-table/column-headers/table-column-menu/table-column-menu.component.scss @@ -11,7 +11,7 @@ background-color: transparent; transition: var(--transition); line-height: 13px; - border-radius: 7px; + border-radius: var(--inputBorderRadius); } } diff --git a/projects/ziti-console-lib/src/lib/features/data-table/data-table.component.scss b/projects/ziti-console-lib/src/lib/features/data-table/data-table.component.scss index 05e5d47b..fb8f0392 100644 --- a/projects/ziti-console-lib/src/lib/features/data-table/data-table.component.scss +++ b/projects/ziti-console-lib/src/lib/features/data-table/data-table.component.scss @@ -376,8 +376,8 @@ .ag-header-cell-resize { border-left-color: var(--stroke); border-right-color: var(--stroke); - border-left-width: 2px; - border-right-width: 2px; + border-left-width: var(--inputBorderWidth); + border-right-width: var(--inputBorderWidth); border-left-style: solid; border-right-style: solid; width: 5px; @@ -963,7 +963,7 @@ flex-direction: column; justify-content: flex-end; padding: 10px; - border-radius: 7px; + border-radius: var(--inputBorderRadius); box-shadow: var(--shadowLarge); margin-top: -20px; border-color: var(--stroke); diff --git a/projects/ziti-console-lib/src/lib/features/dynamic-widgets/object/object.component.scss b/projects/ziti-console-lib/src/lib/features/dynamic-widgets/object/object.component.scss index 3c33128c..07c6c608 100644 --- a/projects/ziti-console-lib/src/lib/features/dynamic-widgets/object/object.component.scss +++ b/projects/ziti-console-lib/src/lib/features/dynamic-widgets/object/object.component.scss @@ -77,7 +77,7 @@ .object-list-items-container { background-color: rgb(255 255 255 / 30%); - border-radius: 7px; + border-radius: var(--inputBorderRadius); display: flex; flex-direction: column; padding: 5px; diff --git a/projects/ziti-console-lib/src/lib/features/dynamic-widgets/text-list/text-list-input.component.scss b/projects/ziti-console-lib/src/lib/features/dynamic-widgets/text-list/text-list-input.component.scss index 96cada18..c1d40a03 100644 --- a/projects/ziti-console-lib/src/lib/features/dynamic-widgets/text-list/text-list-input.component.scss +++ b/projects/ziti-console-lib/src/lib/features/dynamic-widgets/text-list/text-list-input.component.scss @@ -7,8 +7,8 @@ height: var(--defaultInputHeight); border-color: var(--stroke); border-style: solid; - border-width: 2px; - border-radius: 7px; + border-width: var(--inputBorderWidth); + border-radius: var(--inputBorderRadius); padding-left: 10px; padding-right: 10px; outline: none; @@ -21,7 +21,7 @@ .p-inputtext.p-chips-multiple-container { width: 100%; padding: 0; - border-width: 2px; + border-width: var(--inputBorderWidth); &.p-focus { border-color: var(--primaryColor) !important; @@ -56,7 +56,7 @@ margin-bottom: 5px; background: var(--primary); color: var(--white); - border-radius: 7px; + border-radius: var(--inputBorderRadius); cursor: default; display: inline-flex; align-items: center; diff --git a/projects/ziti-console-lib/src/lib/features/json-view/json-view.component.scss b/projects/ziti-console-lib/src/lib/features/json-view/json-view.component.scss index 2e0cfa3e..b44e46ee 100644 --- a/projects/ziti-console-lib/src/lib/features/json-view/json-view.component.scss +++ b/projects/ziti-console-lib/src/lib/features/json-view/json-view.component.scss @@ -11,7 +11,7 @@ min-height: 200px; border-color: var(--inputBorder); border-style: solid; - border-radius: 7px; + border-radius: var(--inputBorderRadius); overflow: hidden; &.read-only { diff --git a/projects/ziti-console-lib/src/lib/features/multi-action-button/multi-action-button.component.scss b/projects/ziti-console-lib/src/lib/features/multi-action-button/multi-action-button.component.scss index 22c8cbd0..f94be33f 100644 --- a/projects/ziti-console-lib/src/lib/features/multi-action-button/multi-action-button.component.scss +++ b/projects/ziti-console-lib/src/lib/features/multi-action-button/multi-action-button.component.scss @@ -24,8 +24,8 @@ background: var(--primary); color: var(--white); cursor: pointer; - border-top-left-radius: 7px; - border-bottom-left-radius: 7px; + border-top-left-radius: var(--inputBorderRadius); + border-bottom-left-radius: var(--inputBorderRadius); border-color: var(--stroke); box-shadow: 0 3px 9px 0 var(--primaryColorOpaque); @@ -51,8 +51,8 @@ background: var(--primary); color: var(--white); cursor: pointer; - border-top-right-radius: 7px; - border-bottom-right-radius: 7px; + border-top-right-radius: var(--inputBorderRadius); + border-bottom-right-radius: var(--inputBorderRadius); border-color: var(--stroke); box-shadow: 0 3px 9px 0 var(--primaryColorOpaque); diff --git a/projects/ziti-console-lib/src/lib/features/overrides/overrides.component.scss b/projects/ziti-console-lib/src/lib/features/overrides/overrides.component.scss index 55787a97..1d32cb1b 100644 --- a/projects/ziti-console-lib/src/lib/features/overrides/overrides.component.scss +++ b/projects/ziti-console-lib/src/lib/features/overrides/overrides.component.scss @@ -46,8 +46,8 @@ width: 100%; border-color: var(--stroke); border-style: solid; - border-width: 2px; - border-radius: 7px; + border-width: var(--inputBorderWidth); + border-radius: var(--inputBorderRadius); padding-left: 10px; padding-right: 10px; outline: none; @@ -58,7 +58,7 @@ -webkit-appearance: none; } .p-inputtext { - border-radius: 7px; + border-radius: var(--inputBorderRadius); border-color: transparent !important; height: 46px; &:hover { diff --git a/projects/ziti-console-lib/src/lib/features/preview-list/preview-list.component.scss b/projects/ziti-console-lib/src/lib/features/preview-list/preview-list.component.scss index ce84cbc4..dcd0e98f 100644 --- a/projects/ziti-console-lib/src/lib/features/preview-list/preview-list.component.scss +++ b/projects/ziti-console-lib/src/lib/features/preview-list/preview-list.component.scss @@ -15,7 +15,7 @@ .listBox { background-color: var(--stroke); padding: 10px; - border-radius: 7px; + border-radius: var(--inputBorderRadius); height: 100%; min-height: 60px; } diff --git a/projects/ziti-console-lib/src/lib/features/projectable-forms/edge-router/edge-router-form.component.scss b/projects/ziti-console-lib/src/lib/features/projectable-forms/edge-router/edge-router-form.component.scss index 0c316852..2a4d8c61 100644 --- a/projects/ziti-console-lib/src/lib/features/projectable-forms/edge-router/edge-router-form.component.scss +++ b/projects/ziti-console-lib/src/lib/features/projectable-forms/edge-router/edge-router-form.component.scss @@ -53,9 +53,9 @@ padding-right: 10px; border-color: var(--inputBorder); border-style: solid; - border-width: 2px; - border-bottom-right-radius: 7px; - border-bottom-left-radius: 7px; + border-width: var(--inputBorderWidth); + border-bottom-right-radius: var(--inputBorderRadius); + border-bottom-left-radius: var(--inputBorderRadius); border-top-style: none; &.test-result-open { @@ -88,7 +88,7 @@ .toggle { border-color: var(--primaryColor); border-style: solid; - border-width: 2px; + border-width: var(--inputBorderWidth); .switch { top: 1px; } diff --git a/projects/ziti-console-lib/src/lib/features/projectable-forms/form-field-container/form-field-container.component.scss b/projects/ziti-console-lib/src/lib/features/projectable-forms/form-field-container/form-field-container.component.scss index 5bdf3884..71ee2a07 100644 --- a/projects/ziti-console-lib/src/lib/features/projectable-forms/form-field-container/form-field-container.component.scss +++ b/projects/ziti-console-lib/src/lib/features/projectable-forms/form-field-container/form-field-container.component.scss @@ -35,7 +35,7 @@ gap: 15px; z-index: 99999; position: relative; - border-radius: 7px; + border-radius: var(--inputBorderRadius); } &.form-field-row { .form-field-content { diff --git a/projects/ziti-console-lib/src/lib/features/projectable-forms/form-header/form-header.component.scss b/projects/ziti-console-lib/src/lib/features/projectable-forms/form-header/form-header.component.scss index 903ed6e1..fff98db9 100644 --- a/projects/ziti-console-lib/src/lib/features/projectable-forms/form-header/form-header.component.scss +++ b/projects/ziti-console-lib/src/lib/features/projectable-forms/form-header/form-header.component.scss @@ -79,14 +79,14 @@ &:hover { background-color: #ffffff; - border-radius: 7px; + border-radius: var(--inputBorderRadius); filter: brightness(90%); transition: 0.3s; } &:active { background-color: #ffffff; - border-radius: 7px; + border-radius: var(--inputBorderRadius); filter: brightness(80%); transition: 0.3s; } @@ -229,7 +229,7 @@ border-radius: 10px; border-color: var(--inputBorder); border-style: solid; - border-width: 2px; + border-width: var(--inputBorderWidth); margin-left: 5px; margin-right: 5px; cursor: pointer; diff --git a/projects/ziti-console-lib/src/lib/features/projectable-forms/identity/identity-form.component.scss b/projects/ziti-console-lib/src/lib/features/projectable-forms/identity/identity-form.component.scss index c0709ba8..d86c85df 100644 --- a/projects/ziti-console-lib/src/lib/features/projectable-forms/identity/identity-form.component.scss +++ b/projects/ziti-console-lib/src/lib/features/projectable-forms/identity/identity-form.component.scss @@ -45,9 +45,9 @@ padding-right: 10px; border-color: var(--inputBorder); border-style: solid; - border-width: 2px; - border-bottom-right-radius: 7px; - border-bottom-left-radius: 7px; + border-width: var(--inputBorderWidth); + border-bottom-right-radius: var(--inputBorderRadius); + border-bottom-left-radius: var(--inputBorderRadius); border-top-style: none; &.test-result-open { @@ -80,7 +80,7 @@ .toggle { border-color: var(--primaryColor); border-style: solid; - border-width: 2px; + border-width: var(--inputBorderWidth); .switch { top: 1px; } diff --git a/projects/ziti-console-lib/src/lib/features/projectable-forms/service/service-form.component.scss b/projects/ziti-console-lib/src/lib/features/projectable-forms/service/service-form.component.scss index 4fbe8146..a4a882fc 100644 --- a/projects/ziti-console-lib/src/lib/features/projectable-forms/service/service-form.component.scss +++ b/projects/ziti-console-lib/src/lib/features/projectable-forms/service/service-form.component.scss @@ -39,7 +39,7 @@ border-radius: 10px; border-color: var(--inputBorder); border-style: solid; - border-width: 2px; + border-width: var(--inputBorderWidth); margin-left: 5px; margin-right: 5px; cursor: pointer; @@ -127,7 +127,7 @@ font-size: 14px; background: var(--primary); padding: 7px; - border-radius: 7px; + border-radius: var(--inputBorderRadius); color: var(--white); cursor: pointer; box-shadow: 0 3px 9px 0 var(--primaryColorOpaque); @@ -179,9 +179,9 @@ padding-right: 10px; border-color: var(--inputBorder); border-style: solid; - border-width: 2px; - border-bottom-right-radius: 7px; - border-bottom-left-radius: 7px; + border-width: var(--inputBorderWidth); + border-bottom-right-radius: var(--inputBorderRadius); + border-bottom-left-radius: var(--inputBorderRadius); border-top-style: none; &.test-result-open { @@ -285,7 +285,7 @@ .toggle { border-color: var(--primaryColor); border-style: solid; - border-width: 2px; + border-width: var(--inputBorderWidth); .switch { top: 1px; } diff --git a/projects/ziti-console-lib/src/lib/features/projectable-forms/service/simple-service/simple-service.component.scss b/projects/ziti-console-lib/src/lib/features/projectable-forms/service/simple-service/simple-service.component.scss index b37513f6..f394e186 100644 --- a/projects/ziti-console-lib/src/lib/features/projectable-forms/service/simple-service/simple-service.component.scss +++ b/projects/ziti-console-lib/src/lib/features/projectable-forms/service/simple-service/simple-service.component.scss @@ -186,7 +186,7 @@ background-color: #222f3e; background-image: linear-gradient(90deg,rgb(35,47,62) 0%,rgb(246,247,251) 100%); background-image: -ms-linear-gradient(90deg,rgb(35,47,62) 0%,rgb(246,247,251) 100%); - border-radius: 7px; + border-radius: var(--inputBorderRadius); } .config-container-label { color: white; diff --git a/projects/ziti-console-lib/src/lib/features/reset-enrollment/reset-enrollment.component.scss b/projects/ziti-console-lib/src/lib/features/reset-enrollment/reset-enrollment.component.scss index 97ad34c8..02e7c1cb 100644 --- a/projects/ziti-console-lib/src/lib/features/reset-enrollment/reset-enrollment.component.scss +++ b/projects/ziti-console-lib/src/lib/features/reset-enrollment/reset-enrollment.component.scss @@ -40,7 +40,7 @@ justify-content: flex-start; .button { - border-radius: 7px; + border-radius: var(--inputBorderRadius); line-height: initial; margin-top: 0; display: flex; diff --git a/projects/ziti-console-lib/src/lib/features/sidebars/side-navbar/side-navbar.component.scss b/projects/ziti-console-lib/src/lib/features/sidebars/side-navbar/side-navbar.component.scss index ec246557..0c804ff2 100644 --- a/projects/ziti-console-lib/src/lib/features/sidebars/side-navbar/side-navbar.component.scss +++ b/projects/ziti-console-lib/src/lib/features/sidebars/side-navbar/side-navbar.component.scss @@ -150,7 +150,7 @@ display: flex; align-items: center; justify-content: center; - border-width: 2px; + border-width: var(--inputBorderWidth); flex: 1 0 auto; border-style: solid; font-size: 35px; @@ -243,8 +243,8 @@ .networks { border-color: var(--inputBorder); - border-width: 2px; - border-radius: 7px; + border-width: var(--inputBorderWidth); + border-radius: var(--inputBorderRadius); border-style: solid; width: 271px; height: 40px; @@ -273,7 +273,7 @@ } #Networks { - border-radius: 7px; + border-radius: var(--inputBorderRadius); height: 0; width: 101.5%; overflow: hidden; diff --git a/projects/ziti-console-lib/src/lib/features/tag-selector/tag-selector.component.scss b/projects/ziti-console-lib/src/lib/features/tag-selector/tag-selector.component.scss index cdba705b..cb620021 100644 --- a/projects/ziti-console-lib/src/lib/features/tag-selector/tag-selector.component.scss +++ b/projects/ziti-console-lib/src/lib/features/tag-selector/tag-selector.component.scss @@ -68,7 +68,7 @@ line-height: unset; padding: 5px 10px; float: left; - border-radius: 7px; + border-radius: var(--inputBorderRadius); margin-left: 2px; transition: var(--transition); overflow: hidden; @@ -97,8 +97,8 @@ } .select2-selection { - border-radius: 7px; - border-width: 2px; + border-radius: var(--inputBorderRadius); + border-width: var(--inputBorderWidth); border-color: var(--inputBorder); border-style: solid; color: var(--white); @@ -145,7 +145,7 @@ min-height: 32px; user-select: none; -webkit-user-select: none; - border-radius: 7px; + border-radius: var(--inputBorderRadius); border: 2px solid var(--stroke); color: var(--white); padding-left: 0; @@ -408,7 +408,7 @@ } .fullModal .select2-container--default.select2-container--focus .select2-selection--multiple { - border-radius: 7px; + border-radius: var(--inputBorderRadius); border: 2px solid var(--inputBorder); color: var(--white); padding-left: 0; @@ -449,7 +449,7 @@ .nf-select2-dropdown { background-color: var(--menu); border-top: 0px; - border-radius: 7px; + border-radius: var(--inputBorderRadius); color: var(--white); box-sizing: border-box; display: flex; diff --git a/projects/ziti-console-lib/src/lib/features/visualizer/network-visualizer/network-visualizer.component.scss b/projects/ziti-console-lib/src/lib/features/visualizer/network-visualizer/network-visualizer.component.scss index 65e38601..ccb17de5 100644 --- a/projects/ziti-console-lib/src/lib/features/visualizer/network-visualizer/network-visualizer.component.scss +++ b/projects/ziti-console-lib/src/lib/features/visualizer/network-visualizer/network-visualizer.component.scss @@ -480,7 +480,7 @@ select:focus { backdrop-filter: saturate(110%) blur(15px); border-color: var(--navigation); border-style: solid; - border-width: 2px; + border-width: var(--inputBorderWidth); display: inline-block; box-shadow: 0px 20px 23px 0px var(--shadow); padding: 5px; @@ -1040,7 +1040,7 @@ p-chips { .p-chips.p-component { .p-chips-multiple-container { border-color: var(--red); - border-width: 2px; + border-width: var(--inputBorderWidth); } } } diff --git a/projects/ziti-console-lib/src/lib/pages/edge-routers/edge-routers-page.component.scss b/projects/ziti-console-lib/src/lib/pages/edge-routers/edge-routers-page.component.scss index b870619d..2707b868 100644 --- a/projects/ziti-console-lib/src/lib/pages/edge-routers/edge-routers-page.component.scss +++ b/projects/ziti-console-lib/src/lib/pages/edge-routers/edge-routers-page.component.scss @@ -49,7 +49,7 @@ align-items: flex-start; margin-top: 10px; padding-left: 20px; - border-radius: 7px; + border-radius: var(--inputBorderRadius); padding-bottom: 0; padding-right: 0; padding-top: 0; @@ -365,7 +365,7 @@ ::ng-deep p-togglebutton { .p-togglebutton.p-button { - border-radius: 7px !important; + border-radius: var(--inputBorderRadius) !important; box-shadow: 0 5px 20px 0 rgb(0 0 0 / 5%) !important; margin-top: -2px !important; } @@ -393,7 +393,7 @@ } ::ng-deep .p-inputtext { - border-radius: 7px; + border-radius: var(--inputBorderRadius); } .calendar { @@ -460,7 +460,7 @@ -webkit-appearance: none; -moz-appearance: none; appearance: none; - border-radius: 7px; + border-radius: var(--inputBorderRadius); } ::ng-deep .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header { @@ -507,7 +507,7 @@ padding: 0.495rem 1rem; font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 7px; + border-radius: var(--inputBorderRadius); } ::ng-deep .p-togglebutton.p-button.p-highlight { diff --git a/projects/ziti-console-lib/src/lib/pages/identities/identities-page.component.scss b/projects/ziti-console-lib/src/lib/pages/identities/identities-page.component.scss index f4ae0196..03a71158 100644 --- a/projects/ziti-console-lib/src/lib/pages/identities/identities-page.component.scss +++ b/projects/ziti-console-lib/src/lib/pages/identities/identities-page.component.scss @@ -49,7 +49,7 @@ align-items: flex-start; margin-top: 10px; padding-left: 20px; - border-radius: 7px; + border-radius: var(--inputBorderRadius); padding-bottom: 0; padding-right: 0; padding-top: 0; @@ -346,7 +346,7 @@ ::ng-deep p-togglebutton { .p-togglebutton.p-button { - border-radius: 7px !important; + border-radius: var(--inputBorderRadius) !important; box-shadow: 0 5px 20px 0 rgb(0 0 0 / 5%) !important; margin-top: -2px !important; } @@ -374,7 +374,7 @@ } ::ng-deep .p-inputtext { - border-radius: 7px; + border-radius: var(--inputBorderRadius); } .calendar { @@ -441,7 +441,7 @@ -webkit-appearance: none; -moz-appearance: none; appearance: none; - border-radius: 7px; + border-radius: var(--inputBorderRadius); } ::ng-deep .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header { @@ -488,7 +488,7 @@ padding: 0.495rem 1rem; font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - border-radius: 7px; + border-radius: var(--inputBorderRadius); } ::ng-deep .p-togglebutton.p-button.p-highlight { diff --git a/projects/ziti-console-lib/src/lib/pages/services/services-page.component.scss b/projects/ziti-console-lib/src/lib/pages/services/services-page.component.scss index 8efb3c72..96e81765 100644 --- a/projects/ziti-console-lib/src/lib/pages/services/services-page.component.scss +++ b/projects/ziti-console-lib/src/lib/pages/services/services-page.component.scss @@ -50,7 +50,7 @@ align-items: flex-start; margin-top: 10px; padding-left: 20px; - border-radius: 7px; + border-radius: var(--inputBorderRadius); padding-bottom: 0; padding-right: 0; padding-top: 0; diff --git a/projects/ziti-console-lib/src/lib/shared-assets/styles/global.scss b/projects/ziti-console-lib/src/lib/shared-assets/styles/global.scss index 198f94be..d0c3dc22 100644 --- a/projects/ziti-console-lib/src/lib/shared-assets/styles/global.scss +++ b/projects/ziti-console-lib/src/lib/shared-assets/styles/global.scss @@ -255,7 +255,7 @@ input { .form-field-input-group { padding: 15px; background-color: var(--formGroup); - border-radius: 7px; + border-radius: var(--inputBorderRadius); &[hidden] { display: none !important; @@ -266,7 +266,7 @@ input { padding: var(--paddingXL); padding-top: var(--paddingSmall); background-color: var(--formSubGroup); - border-radius: 7px; + border-radius: var(--inputBorderRadius); &[hidden] { display: none !important; } @@ -314,7 +314,7 @@ input { font-size: 14px; background: var(--primary); padding: 7px; - border-radius: 7px; + border-radius: var(--inputBorderRadius); color: var(--white); cursor: pointer; box-shadow: 0 3px 9px 0 var(--primaryColorOpaque); @@ -338,7 +338,7 @@ input { font-size: 14px; background: var(--primary); padding: 7px; - border-radius: 7px; + border-radius: var(--inputBorderRadius); color: var(--white); cursor: pointer; box-shadow: 0 3px 9px 0 var(--primaryColorOpaque); @@ -521,7 +521,7 @@ lib-form-field-container { font-size: 14px; font-weight: 600; text-align: center; - border-radius: 7px; + border-radius: var(--inputBorderRadius); cursor: pointer; transition: .5s; height: 50px; @@ -614,14 +614,14 @@ lib-form-field-container { &:hover { background-color: #ffffff; - border-radius: 7px; + border-radius: var(--inputBorderRadius); filter: brightness(90%); transition: 0.3s; } &:active { background-color: #ffffff; - border-radius: 7px; + border-radius: var(--inputBorderRadius); filter: brightness(80%); transition: 0.3s; } @@ -689,7 +689,7 @@ lib-form-field-container { background-color: var(--transparent); transition: var(--transition); line-height: 13px; - border-radius: 7px; + border-radius: var(--inputBorderRadius); } .config-item { @@ -861,7 +861,7 @@ lib-tag-selector { border-radius: 10px; border-color: var(--inputBorder); border-style: solid; - border-width: 2px; + border-width: var(--inputBorderWidth); margin-left: 5px; margin-right: 5px; cursor: pointer; @@ -985,7 +985,7 @@ lib-tag-selector { position: relative; float: left; line-height: 30px; - border-radius: 7px; + border-radius: var(--inputBorderRadius); margin-left: 2px; margin-bottom: 10px; margin-top: 10px;