nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-26 23:50:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update close button

Browse Source
This commit is contained in:
Bill 2021-06-22 05:52:58 -04:00
parent d393ef25bc
commit c2f2aeed1e
3 changed files with 24 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/layout/card/NitroCardView.scss
View File

@ -11,30 +11,6 @@ $nitro-card-top-height: $nitro-card-header-height + $nitro-card-tabs-height;
@import './tabs/NitroCardTabsView'; @import './tabs/NitroCardTabsView';
} }
.nitro-card-close-parent {
top: 5px;
position: absolute;
width: auto;
.nitro-card-close {
cursor: pointer;
border-radius: $border-radius;
box-shadow: inset 0 0 0 1px #921911, inset 0 2px rgba($white,.2);
padding:2px 6px 0 6px;
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%);
&:hover {
filter: brightness(1.2);
}
&:active {
filter: brightness(0.8);
}
}
}
.nitro-card-responsive { .nitro-card-responsive {
position: absolute; position: absolute;
top: 0; top: 0;

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

@ -2,7 +2,27 @@
min-height: $nitro-card-header-height; min-height: $nitro-card-header-height;
max-height: $nitro-card-header-height; max-height: $nitro-card-header-height;
.nitro-card-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);
}
}
.nitro-card-close-parent { .nitro-card-close-parent {
right:-3px; right: -3px;
} }
} }

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

@ -10,12 +10,10 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
return ( return (
<div className={ `drag-handler container-fluid bg-${ theme }` }> <div className={ `drag-handler container-fluid bg-${ theme }` }>
<div className="row nitro-card-header"> <div className="row nitro-card-header">
<div className="col-10 offset-1 d-flex justify-content-center align-items-center"> <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="h4 m-0 text-white text-shadow">{ headerText }</div>
</div> <div className="position-absolute nitro-card-close" onMouseDown={ event => event.stopPropagation() } onClick={ onCloseClick }>
<div className="nitro-card-close-parent"> <i className="fas fa-times" />
<div className="nitro-card-close cursor-pointer" onMouseDown={ event => event.stopPropagation() } onClick={ onCloseClick }>
<i className="fas fa-times"></i>
</div> </div>
</div> </div>
</div> </div>