Skip to content

Commit

Permalink
add the right cursor states
Browse files Browse the repository at this point in the history
  • Loading branch information
arunshenoy99 committed Dec 21, 2022
1 parent 64679c6 commit c1072a5
Show file tree
Hide file tree
Showing 9 changed files with 180 additions and 168 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,11 @@ const SelectableCardWithInfo = ( {
};

return (
<div
className={ `${ className }` }
>
<div className={ `${ className }__live-preview-container` }>
<div className={ `${ className }` }>
<div
className={ `${ className }__live-preview-container` }
onClick={ () => handleCheck( ! selected ) }
>
<LivePreview
styling={ styling }
blockGrammer={ blockGrammer }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,14 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
align-items: center;
border: 1px solid #e3dfdf;

&:hover {
cursor: pointer;
}

.live-preview {

&__container {

&-custom {
width: 100%;
overflow: hidden;
Expand All @@ -36,4 +41,3 @@ $main-border-main: var(--nfd-onboarding-primary-alt);
}
}


111 changes: 57 additions & 54 deletions src/OnboardingSPA/pages/Steps/DesignColors/stylesheet.scss
Original file line number Diff line number Diff line change
@@ -1,55 +1,58 @@


.theme-colors-preview {
flex: 1;
margin: 16px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;

&__title-bar {
width: 70%;
height: 15px;
display: flex;
align-items: center;
background-color: #ccc;
justify-content: space-between;
border: 1px solid transparent;

&__browser {
display: flex;
align-items: center;
justify-content: center;

&__dot {
background-color: #989ea7;
width: 8px;
margin: 3px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
}
}

&__live-preview-container {
width: 70%;
min-height: 90vh;
overflow: hidden;
position: relative;
align-items: center;
border: 1px solid #e3dfdf;
margin-bottom: 30px;

.live-preview {

&__container {

&-custom {
width: 100%;
}
}
}
}
}
flex: 1;
margin: 16px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;

&__title-bar {
width: 70%;
height: 15px;
display: flex;
align-items: center;
background-color: #ccc;
justify-content: space-between;
border: 1px solid transparent;

&__browser {
display: flex;
align-items: center;
justify-content: center;

&__dot {
background-color: #989ea7;
width: 8px;
margin: 3px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
}
}

&__live-preview-container {
width: 70%;
min-height: 90vh;
overflow: hidden;
position: relative;
align-items: center;
border: 1px solid #e3dfdf;
margin-bottom: 30px;


&:hover {
cursor: not-allowed;
}

.live-preview {

&__container {

&-custom {
width: 100%;
}
}
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@
background-color: #ccc;
justify-content: space-between;
border: 1px solid transparent;
margin-top: 20px;
margin-top: 20px;

&__browser {
display: flex;
Expand All @@ -93,6 +93,11 @@
border: 1px solid #e3dfdf;
margin-bottom: 30px;


&:hover {
cursor: not-allowed;
}

.live-preview {

&__container {
Expand All @@ -103,4 +108,4 @@
}
}
}
}
}
192 changes: 89 additions & 103 deletions src/OnboardingSPA/pages/Steps/DesignHomepageMenu/stylesheet.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,121 +5,107 @@ $main-border-light: var(--nfd-onboarding-border);
$main-border-main: var(--nfd-onboarding-primary-alt);

.homepage_preview {
display: flex;
padding-top: 60px;
align-items: center;
flex-direction: column;
justify-content: center;

&__list {
width: 60vw;
height: 100%;
display: flex;
align-items: center;
justify-content: center;

@media (max-width: #{ ($break-large) }) {
width: 95vw;
align-items: center;
flex-direction: column;
}

&__item {
flex: 1;
width: 100%;
margin: 24px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;

&__title-bar {
width: 90%;
height: 15px;
display: flex;
align-items: center;
background-color: #E4E4E4;
justify-content: space-between;
border: 1px solid transparent;

&__browser {
display: flex;
align-items: center;
justify-content: center;

&__dot {
width: 8px;
margin: 3px;
height: 8px;
border-radius: 50%;
display: inline-block;
background-color: #989ea7;
}
}

&--selected {
z-index: 2;
width: 40px;
height: 40px;
display: flex;
margin-right: -15px;
border-radius: 50%;
align-items: center;
justify-content: center;
background-clip: padding-box;
background-color: $main-border-main;

&__path {
fill: $main-color-light;
transform: scale(0.7);
}
}

&--unselected {
display: none;
}
}
&__live-preview-container {
display: flex;
padding-top: 60px;
align-items: center;
flex-direction: column;
justify-content: center;

&__list {
width: 60vw;
height: 100%;
display: flex;
align-items: center;
justify-content: center;

@media (max-width: #{ ($break-large) }) {
width: 95vw;
align-items: center;
flex-direction: column;
}

&__item {
flex: 1;
width: 100%;
margin: 24px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;

&__title-bar {
width: 90%;
height: 15px;
display: flex;
align-items: center;
background-color: #e4e4e4;
justify-content: space-between;
border: 1px solid transparent;

&__browser {
display: flex;
align-items: center;
justify-content: center;

&__dot {
width: 8px;
margin: 3px;
height: 8px;
border-radius: 50%;
display: inline-block;
background-color: #989ea7;
}
}

&--selected {
z-index: 2;
width: 40px;
height: 40px;
display: flex;
margin-right: -15px;
border-radius: 50%;
align-items: center;
justify-content: center;
background-clip: padding-box;
background-color: $main-border-main;

&__path {
fill: $main-color-light;
transform: scale(0.7);
}
}

&--unselected {
display: none;
}
}

&__live-preview-container {
position: relative;
width: 90%;
align-items: center;
border: 1px solid #e3dfdf;


&:hover {
cursor: pointer;
}

.live-preview {

&__container {

&-custom {
width: 100%;
overflow: hidden;
height: 300px;
height: 45vh;
min-height: 400px;
// Enable Scrolling in Live Preview
overflow-y: scroll;
}

}
}

}

&__live-preview-container {
position: relative;
width: 90%;
align-items: center;
border: 1px solid #e3dfdf;

.live-preview {

&__container {

&-custom {
width: 100%;
height: 45vh;
min-height: 400px;
// Enable Scrolling in Live Preview
overflow-y: scroll;
}

}
}
}
}
}
}
}
}
}
Loading

0 comments on commit c1072a5

Please sign in to comment.