Portainer
/
portainer
mirror of https://github.com/portainer/portainer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(ui): break css into module EE-3629 (#7180) 

* break css into module and fix icon mode
pull/7154/head
Richard Wei 2022-07-04 14:11:13 +12:00 committed by GitHub
parent 33861a834b
commit 69baa279d4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 234 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

186
app/assets/css/bootstrap-override.css
View File

@ -20,107 +20,10 @@
background: var(--bg-dashboard-item) !important;
}
.btn {
border-radius: 5px;
display: inline-flex;
justify-content: space-around;
gap: 5px;
}
.btn-group {
display: inline-flex;
}
pr-icon {
display: inline-block;
}
.btn.active {
box-shadow: none;
}
.form-control {
border-radius: 5px;
}
/* Button Primary */
.btn-primary {
background-color: var(--ui-blue-8);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active .active {
background-color: var(--ui-blue-9);
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
background-color: var(--ui-blue-9);
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
background-color: var(--ui-blue-8);
}
.btn-danger {
background-color: var(--ui-error-8);
}
.btn-success {
background-color: var(--ui-success-7);
}
.btn-dangerlight {
background-color: var(--ui-error-2) !important;
border: 1px solid var(--border-button-group);
color: var(--ui-error-8);
}
.btn-dangerlight:hover {
color: var(--ui-error-9) !important;
background-color: var(--ui-error-3) !important;
}
.btn-light {
background-color: var(--bg-button-group);
border: 1px solid var(--border-button-group);
color: var(--text-button-group);
}
.btn-light:hover {
background-color: var(--ui-gray-2) !important;
}
.btn-light:active,
.btn-light.active,
.open > .dropdown-toggle.btn-light {
background-color: var(--ui-gray-3);
}
/* Button Secondary */
.btn-secondary {
background-color: var(--ui-blue-2);
border: 1px solid var(--ui-blue-8);
color: var(--ui-blue-9);
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active .active {
background-color: var(--ui-blue-3) !important;
color: var(--ui-blue-9) !important;
}
.btn-secondary:disabled {
background-color: var(--ui-blue-1);
border: 1px solid var(--ui-blue-1);
color: var(--ui-blue-5);
}
/* Input Group Addon */
.input-group-addon:first-child {
border-top-left-radius: 5px;
@ -485,95 +388,6 @@ input:checked + .slider:before {
background-color: var(--ui-success-7);
}
/* Feather Icon Variants */
.feather {
height: 1em;
width: 1em;
color: inherit;
}
.icon-xs {
height: 10px;
width: 10px;
}
.icon-sm {
height: 14px;
width: 14px;
}
.icon-md {
height: 16px;
width: 16px;
}
.icon-lg {
height: 22px;
width: 22px;
}
.icon-xl {
height: 26px;
width: 26px;
}
.icon-primary {
color: var(--ui-blue-8);
}
.icon-white {
color: var(--white-color);
}
.icon-dark {
color: var(--ui-black);
}
.icon-secondary {
color: var(--ui-gray-8);
}
.icon-warning {
color: var(--ui-warning-8);
}
.icon-danger {
color: var(--ui-error-8);
}
.icon-success {
color: var(--ui-success-6);
}
.icon-nested-gray {
width: 18px;
height: 18px;
height: 30px;
width: 30px;
padding: 5px;
text-align: center;
border-radius: 50%;
background-color: var(--ui-gray-4);
margin-right: 5px;
}
.icon-nested-blue {
width: 18px;
height: 18px;
height: 30px;
width: 30px;
padding: 5px;
text-align: center;
border-radius: 50%;
background-color: var(--ui-blue-3);
margin-right: 5px;
}
.icon-container {
display: flex;
align-items: center;
}
/* Required Label with asterisk */
.required:after {

91
app/assets/css/button.css Normal file
View File

@ -0,0 +1,91 @@
.btn {
border-radius: 5px;
display: inline-flex;
justify-content: space-around;
gap: 5px;
}
.btn-group {
display: inline-flex;
}
.btn.active {
box-shadow: none;
}
.btn-primary {
background-color: var(--ui-blue-8);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active .active {
background-color: var(--ui-blue-9);
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
background-color: var(--ui-blue-9);
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
background-color: var(--ui-blue-8);
}
.btn-danger {
background-color: var(--ui-error-8);
}
.btn-success {
background-color: var(--ui-success-7);
}
.btn-dangerlight {
background-color: var(--ui-error-2) !important;
border: 1px solid var(--border-button-group);
color: var(--ui-error-8);
}
.btn-dangerlight:hover {
color: var(--ui-error-9) !important;
background-color: var(--ui-error-3) !important;
}
.btn-light {
background-color: var(--bg-button-group);
border: 1px solid var(--border-button-group);
color: var(--text-button-group);
}
.btn-light:hover {
background-color: var(--ui-gray-2) !important;
}
.btn-light:active,
.btn-light.active,
.open > .dropdown-toggle.btn-light {
background-color: var(--ui-gray-3);
}
/* Button Secondary */
.btn-secondary {
background-color: var(--ui-blue-2);
border: 1px solid var(--ui-blue-8);
color: var(--ui-blue-9);
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active .active {
background-color: var(--ui-blue-3) !important;
color: var(--ui-blue-9) !important;
}
.btn-secondary:disabled {
background-color: var(--ui-blue-1);
border: 1px solid var(--ui-blue-1);
color: var(--ui-blue-5);
}

115
app/assets/css/icon.css Normal file
View File

@ -0,0 +1,115 @@
.feather {
display: block;
height: 1em;
width: 1em;
color: inherit;
}
pr-icon {
display: inline-block;
}
.icon {
color: currentColor;
margin: 0;
}
.icon-xs {
height: 10px;
width: 10px;
}
.icon-sm {
height: 14px;
width: 14px;
}
.icon-md {
height: 16px;
width: 16px;
}
.icon-lg {
height: 22px;
width: 22px;
}
.icon-xl {
height: 26px;
width: 26px;
}
.icon.icon-alt {
fill: var(--black-color);
stroke: var(--white-color);
}
.icon-primary {
color: var(--ui-blue-8);
}
.icon.icon-primary-alt {
fill: var(--ui-blue-8);
stroke: var(--white-color);
}
.icon-secondary {
color: var(--ui-gray-8);
}
.icon.icon-secondary-alt {
fill: var(--ui-gray-8);
stroke: var(--black-color);
}
.icon-warning {
color: var(--ui-warning-8);
}
.icon.icon-warning-alt {
fill: var(--ui-warning-8);
stroke: var(--white-color);
}
.icon-danger {
color: var(--ui-error-8);
}
.icon.icon-danger-alt {
fill: var(--ui-error-8);
stroke: var(--white-color);
}
.icon-success {
color: var(--ui-success-6);
}
.icon.icon-success-alt {
fill: var(--ui-success-8);
stroke: var(--white-color);
}
.icon-nested-gray {
height: 30px;
width: 30px;
padding: 5px;
text-align: center;
border-radius: 50%;
background-color: var(--ui-gray-4);
margin-right: 5px;
}
.icon-nested-blue {
height: 30px;
width: 30px;
padding: 5px;
text-align: center;
border-radius: 50%;
background-color: var(--ui-blue-3);
margin-right: 5px;
}
.icon-container {
display: flex;
align-items: center;
}

2
app/assets/css/index.js
View File

@ -24,3 +24,5 @@ import './theme.css';
import './vendor-override.css';
import '../fonts/nomad-icon.css';
import './bootstrap-override.css';
import './icon.css';
import './button.css';

5
app/portainer/react/components/index.ts
View File

@ -34,5 +34,8 @@ export const componentsModule = angular
'pageHeader',
r2a(PageHeader, ['title', 'breadcrumbs', 'loading', 'onReload', 'reload'])
)
.component('prIcon', r2a(Icon, ['className', 'feather', 'icon']))
.component(
'prIcon',
r2a(Icon, ['className', 'feather', 'icon', 'mode', 'size'])
)
.component('reactQueryDevTools', r2a(ReactQueryDevtoolsWrapper, [])).name;

24
app/react/components/Icon.tsx
View File

@ -12,9 +12,22 @@ interface Props {
icon: ReactNode | ComponentType<unknown>;
feather?: boolean;
className?: string;
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
mode?:
| 'alt'
| 'primary'
| 'primary-alt'
| 'secondary'
| 'secondary-alt'
| 'warning'
| 'warning-alt'
| 'danger'
| 'danger-alt'
| 'success'
| 'success-alt';
}
export function Icon({ icon, feather, className }: Props) {
export function Icon({ icon, feather, className, mode, size }: Props) {
useEffect(() => {
if (feather) {
featherIcons.replace();
@ -31,11 +44,18 @@ export function Icon({ icon, feather, className }: Props) {
);
}
const classes = clsx(
className,
'icon',
{ [`icon-${mode}`]: mode },
{ [`icon-${size}`]: size }
);
if (feather) {
return (
<i
data-feather={icon}
className={className}
className={classes}
aria-hidden="true"
role="img"
/>