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

new header ig

Browse Source
This commit is contained in:
Layne 2021-09-18 01:27:31 -04:00
parent 073ff1f24c
commit c7a5170c22
3 changed files with 18 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/layout/card/content/NitroCardContentView.scss
View File

@ -2,15 +2,9 @@
padding-top: $container-padding-x; padding-top: $container-padding-x;
padding-bottom: $container-padding-x; padding-bottom: $container-padding-x;
overflow: auto; overflow: auto;
&.simple {
padding-left: ($container-padding-x + 25px);
padding-right: ($container-padding-x + 25px);
}
} }
@include media-breakpoint-down(lg) { @include media-breakpoint-down(lg) {
.content-area { .content-area {
height: 100% !important; height: 100% !important;
min-height: auto !important; min-height: auto !important;

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

@ -2,7 +2,6 @@
min-height: 33px; min-height: 33px;
max-height: 33px; max-height: 33px;
white-space: nowrap; white-space: nowrap;
overflow: hidden;
.header-text { .header-text {
margin: 0 35px; margin: 0 35px;
@ -10,19 +9,22 @@
&.simple-header { &.simple-header {
min-height: 28px; min-height: 28px;
max-height: 28px;
.header-close {
font-size: 12px;
}
} }
.bg-tertiary-split { .bg-tertiary-split {
position: relative; position: relative;
border: 2px solid darken($quaternary, 4); border-bottom: 2px solid darken($quaternary, 5);
box-shadow: 0 0 0 2px $white; box-shadow: 0 2px white;
width: 100%; width: 100%;
margin: 0 25px; margin: 0;
&:before { &:before {
position: absolute; position: absolute;
content: ' '; content: " ";
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
@ -36,7 +38,12 @@
border-radius: $border-radius; border-radius: $border-radius;
box-shadow: 0 0 0 1.5px $white; box-shadow: 0 0 0 1.5px $white;
border: 2px solid #921911; border: 2px solid #921911;
background: repeating-linear-gradient(rgba(245,80,65,1), rgba(245,80,65,1) 50%, rgba(194,48,39,1) 50%, rgba(194,48,39,1) 100%); background: repeating-linear-gradient(
rgba(245, 80, 65, 1),
rgba(245, 80, 65, 1) 50%,
rgba(194, 48, 39, 1) 50%,
rgba(194, 48, 39, 1) 100%
);
cursor: pointer; cursor: pointer;
line-height: 1; line-height: 1;
padding: 1px 3px; padding: 1px 3px;

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

@ -18,8 +18,8 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
return ( return (
<div className="container-fluid bg-light"> <div className="container-fluid bg-light">
<div className="row nitro-card-header simple-header"> <div className="row nitro-card-header simple-header">
<div className="d-flex justify-content-center align-items-center w-100 position-relative"> <div className="d-flex justify-content-center align-items-center w-100 position-relative px-0">
<div className="h5 text-white text-center text-shadow bg-tertiary-split border-top-0 rounded-bottom drag-handler">{ headerText }</div> <div className="h5 text-white text-center text-shadow bg-tertiary-split border-top-0 drag-handler">{ headerText }</div>
<div className="position-absolute header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }> <div className="position-absolute header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
<i className="fas fa-times" /> <i className="fas fa-times" />
</div> </div>