From a633085eb9d548e9def64ab225b03c4e528c25c6 Mon Sep 17 00:00:00 2001 From: Ashish Gupta Date: Tue, 13 Sep 2022 17:45:24 +0530 Subject: [PATCH] Adding spacing css utils files (#7408) * Adding spacing css utils files * Added licence and created variable file * fix changes as per comments --- .../resources/ui/src/styles/antd-master.less | 22 +- .../src/main/resources/ui/src/styles/index.js | 1 + .../main/resources/ui/src/styles/spacing.less | 254 ++++++++++++++++++ .../resources/ui/src/styles/variables.less | 32 +++ 4 files changed, 288 insertions(+), 21 deletions(-) create mode 100644 openmetadata-ui/src/main/resources/ui/src/styles/spacing.less create mode 100644 openmetadata-ui/src/main/resources/ui/src/styles/variables.less diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/antd-master.less b/openmetadata-ui/src/main/resources/ui/src/styles/antd-master.less index 1fbc3f0c40c..9b1afeab6b3 100644 --- a/openmetadata-ui/src/main/resources/ui/src/styles/antd-master.less +++ b/openmetadata-ui/src/main/resources/ui/src/styles/antd-master.less @@ -12,27 +12,7 @@ */ @import '~antd/dist/antd.less'; - -@primary-color: #7147e8; -@link-color: #7147e8; -@success-color: #008376; -@warning-color: #ffc34e; -@error-color: #ff4c3b; -@info-color: #1890ff; -@text-color: #000000; -@text-color-secondary: #37352f; -@font-size-base: 14px; -@border-radius-base: 2px; -@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), - 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); -@table-header-bg: #fff; -@border-radius-base: 4px; -@checkbox-size: 14px; -@switch-height: 16px; -@switch-sm-height: 12px; -@switch-min-width: 30px; -@switch-sm-min-width: 23px; - +@import url('./variables.less'); @import url('./components/table.less'); @import url('./components/toggle-switch.less'); @import url('./components/button.less'); diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/index.js b/openmetadata-ui/src/main/resources/ui/src/styles/index.js index 6fbc5769f32..459b78fd880 100644 --- a/openmetadata-ui/src/main/resources/ui/src/styles/index.js +++ b/openmetadata-ui/src/main/resources/ui/src/styles/index.js @@ -22,6 +22,7 @@ import './fonts.css'; import './modal.less'; import './myDataDetailsTemp.css'; import './slick-carousel.scss'; +import './spacing.less'; import './tailwind.css'; import './temp.css'; import './x-custom/code-mirror.css'; diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less b/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less new file mode 100644 index 00000000000..b721d38f257 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less @@ -0,0 +1,254 @@ +/* + * Copyright 2022 Collate + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@import '~antd/dist/antd.less'; +@import url('./variables.less'); + +.m-0 { + margin: 0 !important; +} +.m-xs { + margin: @margin-xs; +} +.m-sm { + margin: @margin-sm; +} +.m-md { + margin: @margin-md; +} +.m-x-0 { + margin-right: 0 !important; + margin-left: 0 !important; +} +.m-x-xs { + margin-right: @margin-xs; + margin-left: @margin-xs; +} +.m-x-sm { + margin-right: @margin-sm; + margin-left: @margin-sm; +} +.m-x-md { + margin-right: @margin-md; + margin-left: @margin-md; +} +.m-y-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; +} +.m-y-xs { + margin-top: @margin-xs; + margin-bottom: @margin-xs; +} +.m-y-sm { + margin-top: @margin-sm; + margin-bottom: @margin-sm; +} +.m-y-md { + margin-top: @margin-md; + margin-bottom: @margin-md; +} +.m-y-lg { + margin-top: @margin-lg; + margin-bottom: @margin-lg; +} +.m-r-0 { + margin-right: 0 !important; +} +.m-r-xs { + margin-right: @margin-xs; +} +.m-r-sm { + margin-right: @margin-sm; +} +.m-r-md { + margin-right: @margin-md; +} +.m-r-lg { + margin-right: @margin-lg; +} +.m-l-0 { + margin-left: 0 !important; +} +.m-l-xs { + margin-left: @margin-xs; +} +.m-l-sm { + margin-left: @margin-sm; +} +.m-l-md { + margin-left: @margin-md; +} +.m-l-lg { + margin-left: @margin-lg; +} +.m-t-0 { + margin-top: 0 !important; +} +.m-t-xs { + margin-top: @margin-xs; +} +.m-t-sm { + margin-top: @margin-sm; +} +.m-t-md { + margin-top: @margin-md; +} +.m-t-lg { + margin-top: @margin-lg; +} +.m-b-0 { + margin-bottom: 0 !important; +} +.m-b-xs { + margin-bottom: @margin-xs; +} +.m-b-sm { + margin-bottom: @margin-sm; +} +.m-b-md { + margin-bottom: @margin-md; +} +.m-b-lg { + margin-bottom: @margin-lg; +} +.m-auto { + margin: auto; +} +.m-x-auto { + margin-right: auto; + margin-left: auto; +} +.m-y-auto { + margin-top: auto; + margin-bottom: auto; +} +.padding-r-l-l { + padding: 0 @padding-lg; +} + +.p-0 { + padding: 0 !important; +} +.p-xs { + padding: @padding-xs !important; +} +.p-sm { + padding: @padding-sm; +} +.p-md { + padding: @padding-md; +} +.p-lg { + padding: @padding-lg; +} +.p-x-xs { + padding-right: @padding-xs; + padding-left: @padding-xs; +} +.p-x-sm { + padding-right: @padding-sm; + padding-left: @padding-sm; +} +.p-x-md { + padding-right: @padding-md; + padding-left: @padding-md; +} +.p-x-lg { + padding-right: @padding-lg; + padding-left: @padding-lg; +} +.p-y-xs { + padding-top: @padding-xs; + padding-bottom: @padding-xs; +} +.p-y-sm { + padding-top: @padding-sm; + padding-bottom: @padding-sm; +} +.p-y-md { + padding-top: @padding-md; + padding-bottom: @padding-md; +} +.p-x-0 { + padding-right: 0 !important; + padding-left: 0 !important; +} +.p-y-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; +} +.p-r-0 { + padding-right: 0 !important; +} +.p-r-xs { + padding-right: @padding-xs; +} +.p-r-sm { + padding-right: @padding-sm; +} +.p-r-md { + padding-right: @padding-md; +} +.p-r-lg { + padding-right: @padding-lg; +} +.p-l-0 { + padding-left: 0 !important; +} +.p-l-xs { + padding-left: @padding-xs; +} +.p-l-sm { + padding-left: @padding-sm; +} +.p-l-md { + padding-left: @padding-md; +} +.p-l-lg { + padding-left: @padding-lg; +} +.p-t-0 { + padding-top: 0 !important; +} +.p-t-xs { + padding-top: @padding-xs; +} +.p-t-sm { + padding-top: @padding-sm; +} +.p-t-md { + padding-top: @padding-md; +} +.p-t-lg { + padding-top: @padding-lg; +} +.p-b-0 { + padding-bottom: 0 !important; +} +.p-b-xs { + padding-bottom: @padding-xs; +} +.p-b-sm { + padding-bottom: @padding-sm; +} +.p-b-md { + padding-bottom: @padding-md; +} +.p-b-lg { + padding-bottom: @padding-lg; +} +.take-to-right { + position: absolute; + right: 15px; +} diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/variables.less b/openmetadata-ui/src/main/resources/ui/src/styles/variables.less new file mode 100644 index 00000000000..6c4b7118a34 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/styles/variables.less @@ -0,0 +1,32 @@ +/* + * Copyright 2022 Collate + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@primary-color: #7147e8; +@link-color: #7147e8; +@success-color: #008376; +@warning-color: #ffc34e; +@error-color: #ff4c3b; +@info-color: #1890ff; +@text-color: #000000; +@text-color-secondary: #37352f; +@font-size-base: 14px; +@border-radius-base: 2px; +@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), + 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); +@table-header-bg: #fff; +@border-radius-base: 4px; +@checkbox-size: 14px; +@switch-height: 16px; +@switch-sm-height: 12px; +@switch-min-width: 30px; +@switch-sm-min-width: 23px;