new header ig

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

View File

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

View File

@ -2,7 +2,6 @@
min-height: 33px;
max-height: 33px;
white-space: nowrap;
overflow: hidden;
.header-text {
margin: 0 35px;
@ -10,19 +9,22 @@
&.simple-header {
min-height: 28px;
max-height: 28px;
.header-close {
font-size: 12px;
}
}
.bg-tertiary-split {
position: relative;
border: 2px solid darken($quaternary, 4);
box-shadow: 0 0 0 2px $white;
border-bottom: 2px solid darken($quaternary, 5);
box-shadow: 0 2px white;
width: 100%;
margin: 0 25px;
margin: 0;
&:before {
position: absolute;
content: ' ';
content: " ";
top: 0;
left: 0;
width: 100%;
@ -36,7 +38,12 @@
border-radius: $border-radius;
box-shadow: 0 0 0 1.5px $white;
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;
line-height: 1;
padding: 1px 3px;

View File

@ -18,8 +18,8 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
return (
<div className="container-fluid bg-light">
<div className="row nitro-card-header simple-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 drag-handler">{ headerText }</div>
<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 drag-handler">{ headerText }</div>
<div className="position-absolute header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
<i className="fas fa-times" />
</div>