RanchiMall/ranchimall
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.19.30

Browse Source 
Unifying accent and primary colours
This commit is contained in:
sairaj mote 2021-04-17 17:23:54 +05:30
parent d60d43427c
commit a16e7e3700
4 changed files with 57 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
bitcoinbonds.html
View File

@ -154,7 +154,6 @@
</p> </p>
</scroll-tab-panels> </scroll-tab-panels>
</main> </main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="js/components.js"></script> <script src="js/components.js"></script>
<script src="js/index.js"></script> <script src="js/index.js"></script>

53
css/main.css
View File

@ -7,14 +7,13 @@
} }
body { body {
--primary-color: #115FF0; --accent-color: #e72c45;
--light-shade: rgba(var(--text-color), 0.06); --light-shade: rgba(var(--text-color), 0.06);
--text-color: 17, 17, 17; --text-color: 17, 17, 17;
--text-color-light: 100, 100, 100; --text-color-light: 100, 100, 100;
--foreground-color: 255, 255, 255; --foreground-color: 255, 255, 255;
--background-color: #F6f6f6; --background-color: #F6f6f6;
--error-color: red; --error-color: red;
--accent-color: #F55B5D;
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
height: calc(100%); height: calc(100%);
font-size: clamp(1rem, 1.2vmax, 3rem); font-size: clamp(1rem, 1.2vmax, 3rem);
@ -22,7 +21,7 @@ body {
} }
body[data-theme=dark] { body[data-theme=dark] {
--primary-color:#79A5F6; --accent-color: #ff3949;
--text-color: 240, 240, 240; --text-color: 240, 240, 240;
--text-color-light: 170, 170, 170; --text-color-light: 170, 170, 170;
--foreground-color: 20, 20, 20; --foreground-color: 20, 20, 20;
@ -80,11 +79,11 @@ img {
object-fit: cover; object-fit: cover;
} }
a:any-link { a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
a:any-link:focus-visible { a:focus-visible {
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset; box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
} }
@ -108,7 +107,7 @@ button {
} }
.button--primary { .button--primary {
background: var(--primary-color); background: var(--accent-color);
color: rgba(var(--foreground-color), 1); color: rgba(var(--foreground-color), 1);
} }
.button--primary .icon { .button--primary .icon {
@ -551,7 +550,7 @@ ul {
} }
.tag { .tag {
background: var(--primary-color); background: var(--accent-color);
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
} }
@ -694,12 +693,6 @@ ul {
align-items: center; align-items: center;
display: grid; display: grid;
} }
.outlet-preview:nth-of-type(even) .outlet-preview__info {
grid-column: 2/3;
}
.outlet-preview:nth-of-type(even) .outlet-preview__border {
right: 0;
}
.outlet-number { .outlet-number {
display: grid; display: grid;
@ -740,15 +733,17 @@ ul {
height: 100%; height: 100%;
width: 100%; width: 100%;
z-index: -1; z-index: -1;
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.2);
border-radius: 0.5rem; border-radius: 0.5rem;
background: var(--background-color);
box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 2rem 3rem -2rem rgba(0, 0, 0, 0.1);
} }
.outlet-preview__button { .outlet-preview__button {
justify-self: flex-start; justify-self: flex-start;
border-radius: 0.2rem; border-radius: 0.2rem;
padding: 0.3rem 1rem; padding: 0.3rem 1rem;
box-shadow: 0 0 0 1px rgba(var(--text-color), 1); color: white;
background-color: var(--accent-color);
} }
/* .outlet-preview__carousel{ /* .outlet-preview__carousel{
@ -792,7 +787,7 @@ sm-carousel {
--arrow-box-shadow: none; --arrow-box-shadow: none;
--arrow-bottom: -3.5rem; --arrow-bottom: -3.5rem;
--indicator-bottom: -2.5rem; --indicator-bottom: -2.5rem;
--active-indicator-color: var(--primary-color); --active-indicator-color: var(--accent-color);
} }
.bit-bond-series__row, .bit-bond-series__row,
@ -856,7 +851,7 @@ sm-carousel {
font-weight: 500; font-weight: 500;
} }
.outlet_switcher__button--active { .outlet_switcher__button--active {
color: var(--primary-color) !important; color: var(--accent-color) !important;
} }
.outlet_switcher__button:not(:last-of-type)::after { .outlet_switcher__button:not(:last-of-type)::after {
content: ""; content: "";
@ -871,12 +866,12 @@ sm-carousel {
display: flex; display: flex;
align-items: center; align-items: center;
justify-self: flex-start; justify-self: flex-start;
color: var(--primary-color); color: var(--accent-color);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
font-size: 1rem; font-size: 1rem;
} }
.outlet-label .icon { .outlet-label .icon {
fill: var(--primary-color); fill: var(--accent-color);
margin-right: 0.5rem; margin-right: 0.5rem;
} }
@ -894,9 +889,9 @@ scroll-tab-panels {
--background: transparent; --background: transparent;
} }
scroll-tab-panels > * { scroll-tab-panels > * {
min-height: 100vh;
padding-top: 4rem;
opacity: 0.4; opacity: 0.4;
padding-top: 4rem;
min-height: 100vh;
transition: opacity 0.6s; transition: opacity 0.6s;
} }
scroll-tab-panels > [active] { scroll-tab-panels > [active] {
@ -923,10 +918,10 @@ scroll-tab-panels > [active] {
} }
.room-button[active] { .room-button[active] {
opacity: 1; opacity: 1;
color: var(--primary-color); color: var(--accent-color);
} }
.room-button[active] .icon { .room-button[active] .icon {
fill: var(--primary-color); fill: var(--accent-color);
} }
.room-button[active]::after { .room-button[active]::after {
content: ""; content: "";
@ -936,7 +931,7 @@ scroll-tab-panels > [active] {
bottom: 0; bottom: 0;
left: 0; left: 0;
border-radius: 0.2rem 0.2rem 0 0; border-radius: 0.2rem 0.2rem 0 0;
background: var(--primary-color); background: var(--accent-color);
} }
table { table {
@ -1064,6 +1059,12 @@ table {
gap: 1rem; gap: 1rem;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
.outlet-preview:nth-of-type(even) .outlet-preview__info {
grid-column: 2/3;
}
.outlet-preview:nth-of-type(even) .outlet-preview__border {
right: 0;
}
.carousel-holder { .carousel-holder {
align-self: flex-start; align-self: flex-start;
@ -1158,10 +1159,10 @@ table {
transition: color 0.3s; transition: color 0.3s;
} }
.page-link:hover { .page-link:hover {
color: var(--primary-color); color: var(--accent-color);
} }
.page-link:hover .icon { .page-link:hover .icon {
fill: var(--primary-color); fill: var(--accent-color);
} }
.floor__button:hover { .floor__button:hover {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

57
css/main.scss
View File

@ -5,23 +5,21 @@
box-sizing: border-box; box-sizing: border-box;
font-family: 'Roboto Slab', serif; font-family: 'Roboto Slab', serif;
} }
body { body {
--primary-color: #115FF0; --accent-color: #e72c45;
--light-shade: rgba(var(--text-color), 0.06); --light-shade: rgba(var(--text-color), 0.06);
--text-color: 17, 17, 17; --text-color: 17, 17, 17;
--text-color-light: 100, 100, 100; --text-color-light: 100, 100, 100;
--foreground-color: 255, 255, 255; --foreground-color: 255, 255, 255;
--background-color: #F6f6f6; --background-color: #F6f6f6;
--error-color: red; --error-color: red;
--accent-color: #F55B5D;
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
height: calc(100%); height: calc(100%);
font-size: clamp(1rem, 1.2vmax, 3rem); font-size: clamp(1rem, 1.2vmax, 3rem);
background: var(--background-color); background: var(--background-color);
} }
body[data-theme='dark']{ body[data-theme='dark']{
--primary-color:#79A5F6; --accent-color: #ff3949;
--text-color: 240, 240, 240; --text-color: 240, 240, 240;
--text-color-light: 170, 170, 170; --text-color-light: 170, 170, 170;
--foreground-color: 20, 20, 20; --foreground-color: 20, 20, 20;
@ -74,7 +72,7 @@ img{
object-fit: cover; object-fit: cover;
} }
a:any-link{ a{
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
&:focus-visible{ &:focus-visible{
@ -100,7 +98,7 @@ button{
padding: 0.5rem 0.6rem; padding: 0.5rem 0.6rem;
} }
.button--primary{ .button--primary{
background: var(--primary-color); background: var(--accent-color);
color: rgba(var(--foreground-color), 1); color: rgba(var(--foreground-color), 1);
.icon{ .icon{
fill: rgba(var(--foreground-color), 1); fill: rgba(var(--foreground-color), 1);
@ -479,7 +477,7 @@ ul{
} }
.tag{ .tag{
background: var(--primary-color); background: var(--accent-color);
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
} }
@ -617,14 +615,6 @@ ul{
position: relative; position: relative;
align-items: center; align-items: center;
display: grid; display: grid;
&:nth-of-type(even){
.outlet-preview__info{
grid-column: 2/3;
}
.outlet-preview__border{
right: 0;
}
}
} }
.outlet-number{ .outlet-number{
display: grid; display: grid;
@ -661,14 +651,17 @@ ul{
height: 100%; height: 100%;
width: 100%; width: 100%;
z-index: -1; z-index: -1;
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.2);
border-radius: 0.5rem; border-radius: 0.5rem;
background: var(--background-color);
box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 2rem 3rem -2rem rgba(0, 0, 0, 0.1);
} }
.outlet-preview__button{ .outlet-preview__button{
justify-self: flex-start; justify-self: flex-start;
border-radius: 0.2rem; border-radius: 0.2rem;
padding: 0.3rem 1rem; padding: 0.3rem 1rem;
box-shadow: 0 0 0 1px rgba(var(--text-color), 1); // box-shadow: 0 0 0 1px rgba(var(--text-color), 1);
color: white;
background-color: var(--accent-color);
} }
/* .outlet-preview__carousel{ /* .outlet-preview__carousel{
@ -709,7 +702,7 @@ sm-carousel{
--arrow-box-shadow: none; --arrow-box-shadow: none;
--arrow-bottom: -3.5rem; --arrow-bottom: -3.5rem;
--indicator-bottom: -2.5rem; --indicator-bottom: -2.5rem;
--active-indicator-color: var(--primary-color); --active-indicator-color: var(--accent-color);
} }
.bit-bond-series__row, .bit-bond-series__row,
@ -766,7 +759,7 @@ sm-carousel{
flex-shrink: 0; flex-shrink: 0;
font-weight: 500; font-weight: 500;
&--active{ &--active{
color: var(--primary-color) !important; color: var(--accent-color) !important;
} }
&:not(:last-of-type)::after{ &:not(:last-of-type)::after{
content: ''; content: '';
@ -781,11 +774,11 @@ sm-carousel{
display: flex; display: flex;
align-items: center; align-items: center;
justify-self: flex-start; justify-self: flex-start;
color: var(--primary-color); color: var(--accent-color);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
font-size: 1rem; font-size: 1rem;
.icon{ .icon{
fill: var(--primary-color); fill: var(--accent-color);
margin-right: 0.5rem; margin-right: 0.5rem;
} }
} }
@ -802,9 +795,9 @@ scroll-tab-header{
scroll-tab-panels{ scroll-tab-panels{
--background: transparent; --background: transparent;
& > *{ & > *{
min-height: 100vh;
padding-top: 4rem;
opacity: 0.4; opacity: 0.4;
padding-top: 4rem;
min-height: 100vh;
transition: opacity 0.6s; transition: opacity 0.6s;
} }
& > [active]{ & > [active]{
@ -828,9 +821,9 @@ scroll-tab-panels{
padding: 0.6rem 0.8rem; padding: 0.6rem 0.8rem;
&[active]{ &[active]{
opacity: 1; opacity: 1;
color: var(--primary-color); color: var(--accent-color);
.icon{ .icon{
fill: var(--primary-color); fill: var(--accent-color);
} }
&::after{ &::after{
content: ''; content: '';
@ -840,7 +833,7 @@ scroll-tab-panels{
bottom: 0; bottom: 0;
left: 0; left: 0;
border-radius: 0.2rem 0.2rem 0 0; border-radius: 0.2rem 0.2rem 0 0;
background: var(--primary-color); background: var(--accent-color);
} }
} }
@ -959,6 +952,14 @@ table{
.outlet-preview{ .outlet-preview{
gap: 1rem; gap: 1rem;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
&:nth-of-type(even){
.outlet-preview__info{
grid-column: 2/3;
}
.outlet-preview__border{
right: 0;
}
}
} }
.carousel-holder{ .carousel-holder{
align-self: flex-start; align-self: flex-start;
@ -1043,9 +1044,9 @@ table{
cursor: pointer; cursor: pointer;
transition: color 0.3s; transition: color 0.3s;
&:hover{ &:hover{
color: var(--primary-color); color: var(--accent-color);
.icon{ .icon{
fill: var(--primary-color); fill: var(--accent-color);
} }
} }
} }