Skip to content
GitLab
Unverified Commit ff15bb3e authored by srinivasan pusuluri's avatar srinivasan pusuluri Committed by GitHub
Browse files

Merge pull request #8382 from vinodkumar45/5.1.0 

Issue #ED-420 CSS cleanup and themes cleanup & SASS migration
parents b6428141 613d80f1
release-5.1.0 gcp_test Tags unavailable
1 merge request!1Feature/inquiry server validation
Hide whitespace changes
Inline Side-by-side
Showing
with 15 additions and 450 deletions
+15 -450
src/app/client/src/app/app.component.scss
+ 1
− 1
View file @ ff15bb3e
@use 'pages/mat-modal' as *;
.header-block {
display: none;
......
src/app/client/src/app/modules/groups/components/create-edit-group/create-edit-group.component.scss
+ 1
− 1
View file @ ff15bb3e
@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
@use 'pages/mat-modal' as *;
src/app/client/src/app/modules/groups/components/ftu-popup/ftu-popup.component.scss
+ 0
− 1
View file @ ff15bb3e
@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
@use 'pages/page-center-view' as *;
@use 'pages/custom-carousel.scss' as *;
@use 'pages/mat-modal' as *;
/* can be remove, comes from CC */
.close {
......
src/app/client/src/app/modules/shared-feature/components/onboarding-user-selection/onboarding-user-selection.component.scss
+ 0
− 1
View file @ ff15bb3e
@use './../user-onboarding/user-onboarding.component.scss' as *;
@use "pages/mat-modal" as *;
\ No newline at end of file
src/app/client/src/app/modules/shared-feature/components/profile-framework-popup/profile-framework-popup.component.scss
+ 0
− 1
View file @ ff15bb3e
@use "pages/mat-modal" as *;
\ No newline at end of file
src/app/client/src/app/modules/shared/components/share-link/share-link.component.scss
+ 0
− 1
View file @ ff15bb3e
@use 'pages/mat-modal' as *;
\ No newline at end of file
src/app/client/src/assets/styles/components/_accordion.scss
+ 2
− 0
View file @ ff15bb3e
@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
/* accordion styles */
.ui.styled.accordion .accordion .content,
......
src/app/client/src/assets/styles/components/_banner.scss
+ 1
− 0
View file @ ff15bb3e
@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
/* banner styles */
.sb-banner {
......
src/app/client/src/assets/styles/components/_breadcrumb.scss deleted 100644 → 0
+ 0
− 0
View file @ b6428141
src/app/client/src/assets/styles/components/_bulk-upload.scss
+ 1
− 1
View file @ ff15bb3e
@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.sb-bulk-upload {
.bulk-upload-title {
font-size: var(--h5-font-size);
......
src/app/client/src/assets/styles/components/_buttons--.scss deleted 100644 → 0
+ 0
− 435
View file @ b6428141
@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
// Dashed Buttons
$sb-btn-dashed-border: 0.5 solid var(--primary-color);
$sb-btn-dashed-background-color: var(--white);
$sb-btn-dashed-color: var(--primary-400);
// Button groups
$sb-btn-group-border-width: 0.0625rem;
$sb-btn-group-border-width: 1px;
$sb-btn-group-border-color: var(--gray-100);
$sb-btn-group-btn-background: var(--white);
$sb-btn-group-btn-color: var(--primary-400);
$sb-btn-group-btn-active-background-color: var(--primary-100);
/* buttons sytle guide */
input[type="submit"],
input[type="reset"],
input[type="button"] {
&.btn-block {
width: 100%;
}
}
// anchor button style
a.sb-btn {
text-align: center;
display: inline-flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
&:hover{
text-decoration: none;
}
}
button.sb-btn:focus {
outline: none !important;
}
.sb-btn {
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
user-select: none;
outline: 0;
display: inline-block;
border: calculateRem(1px) solid;
cursor: pointer;
min-width: calculateRem(64px);
border-radius: 0.125rem;
position: relative;
line-height: 1;
text: {
transform: inherit;
decoration: none;
}
&:hover {
opacity: 1;
}
&:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: calculateRem(3px);
height: calculateRem(3px);
background: var(--primary-600);
opacity: 0;
border-radius: 50%;
transform: scale(1, 1) translate(-50%);
transform-origin: 50% 50%;
}
&.flat {
border-radius: 0;
}
&.sb-btn-radius {
border-radius: 2rem;
}
}
// Create button color classess from the below list
// btnname basecolor hovercolor outlinecolor
$btns: "gray"var(--gray-200) var(--gray-400) var(--gray-100),
"primary"var(--primary-400) var(--primary-800) var(--primary-100),
"secondary"var(--secondary-200) var(--secondary-400) var(--secondary-0),
"tertiary"var(--tertiary-100) var(--tertiary-400) var(--tertiary-0),
"red"var(--red-100) var(--red-400) var(--red-0),
"info"var(--primary-400) var(--primary-800) var(--primary-100),
"success"var(--secondary-200) var(--secondary-400) var(--secondary-100),
"warning"var(--tertiary-100) var(--tertiary-400) var(--tertiary-0),
"error"var(--red-100) var(--red-400) var(--red-0);
@each $btn in $btns {
$btntypes: btn btn-outline btn-dashed btn-link btn-square;
@each $btntype in $btntypes {
.sb-#{nth($btntype, 1)}-#{nth($btn, 1)} {
@if $btntype==btn {
background-color: #{nth($btn, 2)};
border-color: #{nth($btn, 2)};
color: var(--white);
&:hover,
&:active,
&.active {
background-color: #{nth($btn, 3)};
border: 1px solid transparent;
color: var(--white);
}
}
@else if $btntype==btn-outline {
background-color: var(--white);
color: #{nth($btn, 2)};
border-color: #{nth($btn, 2)};
&:hover,
&:active,
&.active {
color: #{nth($btn, 3)};
background-color: #{nth($btn, 4)};
}
}
@else if $btntype==btn-link {
background: none;
border: 0px;
color: #{nth($btn, 2)};
&:hover,
&:active,
&.active {
background-color: #{nth($btn, 4)};
}
}
@else if $btntype==btn-dashed {
border-style: dashed;
border-width: calculateRem(1px);
background-color: var(--white);
border-color: #{nth($btn, 2)};
color: #{nth($btn, 2)};
&:hover,
&:active,
&.active {
background-color: #{nth($btn, 4)};
}
}
}
}
}
// Create button sizes classess from the below list
// class height padding fontsize width
$btnsizes: "xs"1.5rem "0.25rem 0.5rem"0.75rem null,
"normal"2rem "0.5rem 1rem"0.75rem null,
"sm"2.5rem "0.5rem 1rem"1rem null,
"md"3rem "0.5rem 1rem"1rem null,
"lg"3.5rem "1rem 1.5rem"1.25rem null,
"full"1.5rem "0.5rem 1rem"1.25rem 100%;
@each $btn in $btnsizes {
.sb-btn-#{nth($btn, 1)} {
height: #{nth($btn, 2)};
padding: #{nth($btn, 3)};
font-size: #{nth($btn, 4)};
width: #{nth($btn, 5)};
}
}
// Create button square classess from the below list
// class height width fontsize padding
$btnSquaresizes: "xs"1.5rem 1.5rem 1rem null,
"normal"4rem 4rem 0.75rem null,
"sm"3rem 3rem 0.75rem null,
"md"4rem 4rem 1rem null,
"lg"8rem 8rem 1.25rem null;
@each $btn in $btnSquaresizes {
.sb-btn-square {
&.sb-btn-#{nth($btn, 1)} {
height: #{nth($btn, 2)};
width: #{nth($btn, 3)};
font-size: #{nth($btn, 4)};
//width: #{nth($btn, 5)};
i.icon {
margin: 0 0 0 0;
font-size: 2em;
}
span {
margin: 0.5rem 0 0 0;
}
}
}
}
.sb-btn-white {
box-shadow: 0 calculateRem(-1px) calculateRem(4px) 0 rgba(var(--rc-rgba-black), 0.1),
0 calculateRem(3px) calculateRem(4px) 0 rgba(var(--rc-rgba-black), 0.2);
border: 0px solid var(--rc-dddddd);
}
.sb-btn-square {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
font-size: 0.75rem;
padding: 0.5rem;
}
.sb-btn-disabled,
.sb-btn-outline-disabled {
cursor: default;
font-weight: normal;
}
.sb-btn-disabled {
background-color: var(--gray-100);
border: calculateRem(1px) solid var(--gray-100);
&:hover {
background-color: var(--gray-100) !important;
color: var(--gray-200) !important;
}
}
.sb-btn-outline-disabled {
background-color: var(--white);
border: calculateRem(1px) solid var(--gray-100);
&:hover {
background-color: var(--white) !important;
;
border: calculateRem(1px) solid var(--gray-100) !important;
color: var(--gray-200) !important;
}
}
// button link
.sb-btn-link {
background: none;
border: 0;
}
// Buttons with icon
.sb-right-icon-btn {
padding: calculateRem(8px);
i.icon {
margin-left: calculateRem(8px);
margin-right: 0;
}
html[dir="rtl"] & {
padding: calculateRem(8px);
i.icon {
margin-right: calculateRem(4px);
margin-right: 0;
}
}
}
.sb-left-icon-btn {
padding: calculateRem(8px);
i.icon {
margin-right: calculateRem(4px);
}
html[dir="rtl"] & {
padding: calculateRem(8px);
i.icon {
margin-left: calculateRem(8px);
}
}
}
.sb-left-icon-btn.sb-btn-xs {
padding: 0 calculateRem(8px);
}
//Buttons toggle
.ui.toggle.checkbox.sb-toggle {
min-height: calculateRem(24px);
position: relative;
display: inline-block;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
outline: 0;
vertical-align: baseline;
font-style: normal;
min-height: calculateRem(16px);
font-size: 1rem;
min-width: calculateRem(16px);
input {
width: calculateRem(64px);
height: calculateRem(24px);
cursor: pointer;
position: absolute;
top: 0;
left: 0;
opacity: 0;
outline: 0;
z-index: 3;
&:focus:checked~label:before,
&:focus:checked~.box:before,
&:checked~.box:before,
&:checked~label:before {
background-color: var(--primary-color) !important;
}
}
label {
min-height: calculateRem(16px);
padding-left: calculateRem(72px);
color: rgba(var(--rc-rgba-black), 0.87);
position: relative;
display: block;
outline: 0;
font-size: 1rem;
&:before {
display: block;
position: absolute;
content: "";
z-index: 1;
transform: none;
border: none;
top: 1px;
left: 0;
background: rgba(var(--rc-rgba-black), 0.05);
box-shadow: none;
width: calculateRem(64px);
height: calculateRem(24px);
border-radius: 500rem;
@include btn-theme(var(--primary-color));
transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease,
box-shadow 0.1s ease, -webkit-transform 0.1s ease;
}
&:after {
background: var(--white) linear-gradient(transparent, rgba(var(--rc-rgba-black), 0.05));
position: absolute;
content: "" !important;
opacity: 1;
z-index: 2;
border: none;
width: calculateRem(20px);
height: calculateRem(20px);
top: calculateRem(3px);
left: 0;
border-radius: 500rem;
transition: background 0.3s ease, left 0.3s ease;
}
}
input~label:after {
left: 0.1rem;
box-shadow: none;
}
input:checked~label:after {
left: calculateRem(41px);
box-shadow: none;
}
}
// button groups
.btn-group {
border: $sb-btn-group-border-width solid $sb-btn-group-border-color;
display: inline-flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
flex-direction: row;
font-size: 0;
vertical-align: baseline;
.sb-btn {
background: $sb-btn-group-btn-background;
border-left: $sb-btn-group-border-width solid $sb-btn-group-border-color;
flex: 1 0 auto;
margin: 0;
border-radius: 0;
margin: 0;
border: 0;
color: $sb-btn-group-btn-color;
min-width: calculateRem(40px);
&:first-child {
border-left: none;
margin-left: 0;
}
&:active,
&.active {
background-color: $sb-btn-group-btn-active-background-color;
color: $sb-btn-group-btn-color;
}
.icon {
margin: 0;
vertical-align: top;
}
}
}
*[lang="hi"] .sb-btn-xs {
line-height: 1.5;
}
*[lang="hi"] .sb-btn-normal {
line-height: 1.5;
}
.sb-btn-icon-fix {
display:flex;
align-items: center;
line-height: normal;
}
src/app/client/src/assets/styles/components/_card.scss
+ 1
− 0
View file @ ff15bb3e
@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
// Card component
/* sb card styles */
......
src/app/client/src/assets/styles/components/_certificate.scss
+ 1
− 0
View file @ ff15bb3e
@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
@use "~@project-sunbird/sb-styles/assets/varSass" as *;
/* Certificate */
$sb-certificatePage-bg-color: var(--white);
$sb-certificatePage-padding: calculateRem(16px);
......
src/app/client/src/assets/styles/components/_checkbox.scss
+ 1
− 0
View file @ ff15bb3e
@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
@use "~@project-sunbird/sb-styles/assets/varSass" as *;
// Checkbox
$sb-checkbox-primary-background: var(--primary-color);
......
src/app/client/src/assets/styles/components/_collection-tree.scss
+ 1
− 0
View file @ ff15bb3e
@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
@use "~@project-sunbird/sb-styles/assets/varSass" as *;
// TOC or Collection Tree
$sb-collectionTree-border-radius: ($base-block-space / 2);
......
src/app/client/src/assets/styles/components/_dropdowns.scss deleted 100644 → 0
+ 0
− 0
View file @ b6428141
src/app/client/src/assets/styles/components/_icons.scss
+ 2
− 7
View file @ ff15bb3e
@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
@font-face {
font-family: "icomoon";
// src: url("./fonts/sb-icons/icomoon.eot?q5fmh5");
// // src: url('../../../assets/styles/fonts/sb-icons/icomoon.eot');
// src: url("./fonts/sb-icons/icomoon.eot?q5fmh5#iefix")
// format("embedded-opentype"),
// url("./fonts/sb-icons/icomoon.ttf?q5fmh5") format("truetype"),
// url("./fonts/sb-icons/icomoon.woff?q5fmh5") format("woff"),
// url("./fonts/sb-icons/icomoon.svg?q5fmh5#icomoon") format("svg");
font-weight: normal;
font-style: normal;
}
......
src/app/client/src/assets/styles/components/_iframes.scss deleted 100644 → 0
+ 0
− 0
View file @ b6428141
src/app/client/src/assets/styles/components/_lists.scss
+ 1
− 1
View file @ ff15bb3e
@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
@use "~@project-sunbird/sb-styles/assets/varSass" as *;
/* circular list*/
$sb-circular-list-item-padding-ltr: ($base-block-space * 1) 0
......
src/app/client/src/assets/styles/components/_loaders.scss
+ 2
− 0
View file @ ff15bb3e
@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.sb-loader {
position: fixed;
top: 50%;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment