nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-02-17 01:12:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update header

Browse Source
This commit is contained in:
Bill 2021-06-22 14:39:43 -04:00
parent 35ccf3da71
commit 714dd619df
5 changed files with 43 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/styles/bootstrap/_variables.scss
View File

@ -285,6 +285,11 @@ $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null)
// scss-docs-start position-map
$position-values: (
0: 0,
1: $spacer / 4,
2: $spacer / 2,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
50: 50%,
100: 100%
) !default;

6
src/layout/card/header/NitroCardHeaderView.scss
View File

@ -2,7 +2,7 @@
min-height: $nitro-card-header-height;
max-height: $nitro-card-header-height;
.nitro-card-close {
.header-close {
right: 6px;
border-radius: $border-radius;
box-shadow: inset 0 0 0 1.5px #921911, inset 0 2px rgba($white, .2);
@ -21,8 +21,4 @@
filter: brightness(0.8);
}
}
.nitro-card-close-parent {
right: -3px;
}
}

2
src/layout/card/header/NitroCardHeaderView.tsx
View File

@ -12,7 +12,7 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
<div className="row nitro-card-header">
<div className="d-flex justify-content-center align-items-center w-100 position-relative">
<div className="h4 m-0 text-white text-shadow">{ headerText }</div>
<div className="position-absolute nitro-card-close" onMouseDown={ event => event.stopPropagation() } onClick={ onCloseClick }>
<div className="position-absolute header-close" onMouseDown={ event => event.stopPropagation() } onClick={ onCloseClick }>
<i className="fas fa-times" />
</div>
</div>

35
src/layout/card/simple-header/NitroCardSimpleHeaderView.scss
View File

@ -1,8 +1,31 @@
.nitro-card-close-parent {
right: 5px;
}
.nitro-card-header {
min-height: $nitro-card-header-height;
max-height: $nitro-card-header-height;
.bg-tertiary-split {
border: 2px solid darken($quaternary,4);
box-shadow:0 0 0 2px $white;
.bg-tertiary-split {
border: 2px solid darken($quaternary, 4);
box-shadow: 0 0 0 2px $white;
width: 100%;
margin: 0 30px;
}
.header-close {
right: 6px;
border-radius: $border-radius;
box-shadow: inset 0 0 0 1.5px #921911, inset 0 2px rgba($white, .2);
border: 1px solid $white;
background: rgb(245,80,65);
background: linear-gradient(180deg, rgba(245,80,65,1) 0%, rgba(245,80,65,1) 50%, rgba(194,48,39,1) 50%, rgba(194,48,39,1) 100%);
cursor: pointer;
line-height: 1;
padding: 4px 6px;
&:hover {
filter: brightness(1.2);
}
&:active {
filter: brightness(0.8);
}
}
}

16
src/layout/card/simple-header/NitroCardSimpleHeaderView.tsx
View File

@ -6,15 +6,13 @@ export const NitroCardSimpleHeaderView: FC<NitroCardSimpleHeaderViewProps> = pro
const { headerText = null, onCloseClick = null } = props;
return (
<div className="d-flex container-fluid align-items-center bg-light pb-1">
<div className="col-1"/>
<div className="d-flex bg-tertiary-split flex-grow-1 justify-content-center align-items-center border-top-0 rounded-bottom px-2 py-1 drag-handler">
<div className="h5 m-0 text-white text-shadow">{ headerText }</div>
</div>
<div className="col-1"/>
<div className="nitro-card-close-parent">
<div className="nitro-card-close" onClick={ onCloseClick }>
<i className="fas fa-times"/>
<div className='container-fluid bg-light'>
<div className="row nitro-card-header">
<div className="d-flex justify-content-center align-items-center w-100 position-relative">
<div className="h5 text-white text-center text-shadow bg-tertiary-split border-top-0 rounded-bottom px-2 py-1 drag-handler">{ headerText }</div>
<div className="position-absolute header-close" onMouseDown={ event => event.stopPropagation() } onClick={ onCloseClick }>
<i className="fas fa-times" />
</div>
</div>
</div>
</div>