Skip to content

Commit

Permalink
Merge pull request #51 from SGNetworksIndia/1.1.4
Browse files Browse the repository at this point in the history 
FIXED: Component: TabLayout: Some minor bug fixes
  • Loading branch information
@SagnikGanguly96
SagnikGanguly96 authored Dec 30, 2022
2 parents 020a6b8 + 9513bc7 commit 77a0fea
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 46 deletions.
21 changes: 15 additions & 6 deletions src/css/components/tablayout.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,10 @@
}

.tab-layout {
border-radius: var(--sgn-border-radius-md);
border: none;
border-radius: var(--sgn-border-radius-md);
display: flex;
flex-direction: column;
margin: var(--margin-md);
overflow: hidden;
}
Expand Down Expand Up @@ -73,19 +75,21 @@
}

.tab-layout > .tab-links > .tab-link.active:after {
content: '';
border-bottom: 1px solid var(--sgn-tab-link-active-bg-color, var(--sgn-accent-background));
width: 100%;
bottom: -1px;
content: "";
display: block;
position: absolute;
left: 0;
bottom: -1px;
position: absolute;
width: 100%;
z-index: 1;
}

.tab-layout > .tab-view {
border: 1px solid var(--sgn-tab-tab-border-color, var(--sgn-border-light));
border-radius: 0 var(--sgn-border-radius-md) var(--sgn-border-radius-md);
display: flex;
flex-direction: column;
position: relative;
}

Expand All @@ -95,7 +99,8 @@
}

.tab-layout > .tab-view > .tab.active {
display: block;
display: flex;
flex-direction: column;
}

.tab-layout > .tab-title ~ .tab-links {
Expand Down Expand Up @@ -236,6 +241,10 @@
border-right-width: 0;
}

.tab-layout > .tab-view {
flex: 1;
}


/*** CONTEXTUAL ***/
.tab-layout.primary > .tab-links > .tab-link {
Expand Down
80 changes: 40 additions & 40 deletions src/css/themes/light.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,38 +6,54 @@
*/

:root {
--sgn-background: hsl(0, 0%, 100%);
--sgn-text-primary: hsl(0, 0%, 10%);
--sgn-text-secondary: hsl(0, 0%, 40%);

--sgn-accent-background: hsl(0, 0%, 100%);
--sgn-accent-background-secondary: hsl(0, 0%, 95%);
--sgn-accent-hud: hsl(0, 0%, 100%);

--sgn-accent-hud-shade: hsl(215, 100%, 15%);
--sgn-accent-primary: hsl(215, 100%, 48%);
--sgn-accent-primary-active: hsl(225, 99%, 57%);
--sgn-accent-primary-alt: hsl(180, 72%, 52%);

/*--sgn-bg-light4: hsl(0, 0%, 0%);
--sgn-bg-light3: hsl(0, 0%, 0%);
--sgn-hud-primary: hsl(0, 0%, 0%);*/
--sgn-text-primary-active: hsl(0, 0%, 0%);
--sgn-text-secondary-alt: hsl(0, 0%, 0%);
--sgn-text-secondary-light: hsl(0, 0%, 0%);
--sgn-semi-transparent-light: hsl(0, 0%, 0%);
--sgn-accent-primary-dark: hsl(215, 100%, 15%);
--sgn-accent-primary-light: hsl(215, 100%, 68%);
--sgn-accent-primary-text: hsl(0, 0%, 100%);
--sgn-accent-secondary: hsl(226, 15%, 17%);


--sgn-shadow-light: hsla(0, 0%, 0%, .5);
--sgn-accent-secondary-light: hsl(226, 15%, 30%);

--sgn-background: hsl(0, 0%, 100%);

--sgn-border-light: hsl(0, 0%, 85%);
--sgn-danger: hsl(0, 100%, 50%);
--sgn-danger-dark: hsl(0, 72%, 33%);
--sgn-danger-light: hsl(0, 100%, 70%);
--sgn-danger-lightest: hsl(0, 100%, 95%);
--sgn-gradient-danger: linear-gradient(to right, var(--sgn-danger) 0%, var(--sgn-danger-light) 100%);

--sgn-accent-primary: hsl(215, 100%, 48%);
--sgn-accent-primary-active: hsl(225, 99%, 57%);
--sgn-accent-primary-light: hsl(215, 100%, 68%);
--sgn-accent-primary-dark: hsl(215, 100%, 15%);
--sgn-accent-primary-text: hsl(0, 0%, 100%);
--sgn-accent-primary-alt: hsl(180, 72%, 52%);
--sgn-gradient-danger-double-width: linear-gradient(to right, var(--sgn-danger) 0%, var(--sgn-danger-light) 50%, var(--sgn-danger) 100%);
--sgn-gradient-info: linear-gradient(to right, var(--sgn-info) 0%, var(--sgn-info-light) 100%);

--sgn-accent-secondary: hsl(226, 15%, 17%);
--sgn-accent-secondary-light: hsl(226, 15%, 30%);

--sgn-gradient-info-double-width: linear-gradient(to right, var(--sgn-info) 0%, var(--sgn-info-light) 50%, var(--sgn-info) 100%);
--sgn-gradient-primary: linear-gradient(to right, var(--sgn-accent-primary) 0%, var(--sgn-accent-primary-alt) 100%);
--sgn-gradient-primary-double-width: linear-gradient(to right, var(--sgn-accent-primary) 0%, var(--sgn-accent-primary-alt) 50%, var(--sgn-accent-primary) 100%);

--sgn-gradient-secondary: linear-gradient(to right, var(--sgn-secondary) 0%, var(--sgn-secondary-light) 100%);
--sgn-gradient-secondary-double-width: linear-gradient(to right, var(--sgn-secondary) 0%, var(--sgn-secondary-light) 50%, var(--sgn-secondary) 100%);
--sgn-gradient-success: linear-gradient(to right, var(--sgn-success) 0%, var(--sgn-success-light) 100%);

--sgn-gradient-success-double-width: linear-gradient(to right, var(--sgn-success) 0%, var(--sgn-success-light) 50%, var(--sgn-success) 100%);
--sgn-gradient-warning: linear-gradient(to right, var(--sgn-warning) 0%, var(--sgn-warning-light) 100%);
--sgn-gradient-warning-double-width: linear-gradient(to right, var(--sgn-warning) 0%, var(--sgn-warning-light) 50%, var(--sgn-warning) 100%);

--sgn-info: hsl(190, 100%, 40%);
--sgn-info-light: hsl(190, 100%, 60%);
--sgn-info-lightest: hsl(190, 100%, 95%);

--sgn-primary: hsl(220, 100%, 50%);
--sgn-primary-light: hsl(220, 100%, 70%);
Expand All @@ -46,35 +62,19 @@
--sgn-secondary: hsl(230, 15%, 20%);
--sgn-secondary-light: hsl(230, 15%, 30%);
--sgn-secondary-lightest: hsl(230, 15%, 95%);
--sgn-semi-transparent-light: hsl(0, 0%, 0%);

--sgn-shadow-light: hsla(0, 0%, 0%, .2);
--sgn-success: hsl(130, 100%, 20%);
--sgn-success-light: hsl(130, 100%, 60%);
--sgn-success-lightest: hsl(130, 100%, 95%);
--sgn-text-primary: hsl(0, 0%, 10%);
--sgn-text-primary-active: hsl(0, 0%, 0%);

--sgn-info: hsl(190, 100%, 40%);
--sgn-info-light: hsl(190, 100%, 60%);
--sgn-info-lightest: hsl(190, 100%, 95%);

--sgn-text-secondary: hsl(0, 0%, 45%);
--sgn-text-secondary-alt: hsl(0, 0%, 0%);
--sgn-text-secondary-light: hsl(0, 0%, 0%);
--sgn-warning: hsl(45, 100%, 40%);
--sgn-warning-light: hsl(45, 100%, 60%);
--sgn-warning-lightest: hsl(45, 100%, 95%);

--sgn-danger: hsl(0, 100%, 50%);
--sgn-danger-light: hsl(0, 100%, 60%);
--sgn-danger-lightest: hsl(0, 100%, 95%);
--sgn-danger-dark: hsl(0, 72%, 33%);

--sgn-gradient-primary: linear-gradient(to right, var(--sgn-accent-primary) 0%, var(--sgn-accent-primary-alt) 100%);
--sgn-gradient-secondary: linear-gradient(to right, var(--sgn-secondary) 0%, var(--sgn-secondary-light) 100%);
--sgn-gradient-success: linear-gradient(to right, var(--sgn-success) 0%, var(--sgn-success-light) 100%);
--sgn-gradient-info: linear-gradient(to right, var(--sgn-info) 0%, var(--sgn-info-light) 100%);
--sgn-gradient-warning: linear-gradient(to right, var(--sgn-warning) 0%, var(--sgn-warning-light) 100%);
--sgn-gradient-danger: linear-gradient(to right, var(--sgn-danger) 0%, var(--sgn-danger-light) 100%);

--sgn-gradient-primary-double-width: linear-gradient(to right, var(--sgn-accent-primary) 0%, var(--sgn-accent-primary-alt) 50%, var(--sgn-accent-primary) 100%);
--sgn-gradient-secondary-double-width: linear-gradient(to right, var(--sgn-secondary) 0%, var(--sgn-secondary-light) 50%, var(--sgn-secondary) 100%);
--sgn-gradient-success-double-width: linear-gradient(to right, var(--sgn-success) 0%, var(--sgn-success-light) 50%, var(--sgn-success) 100%);
--sgn-gradient-info-double-width: linear-gradient(to right, var(--sgn-info) 0%, var(--sgn-info-light) 50%, var(--sgn-info) 100%);
--sgn-gradient-warning-double-width: linear-gradient(to right, var(--sgn-warning) 0%, var(--sgn-warning-light) 50%, var(--sgn-warning) 100%);
--sgn-gradient-danger-double-width: linear-gradient(to right, var(--sgn-danger) 0%, var(--sgn-danger-light) 50%, var(--sgn-danger) 100%);
}

0 comments on commit 77a0fea

Please sign in to comment.