Skip to content

G
getme
Commit c139e682 by Arjun
Options

storelist style fix

parent 4b4b4683
Showing with 356 additions and 356 deletions
src/app/catstorelist/catstorelist.page.scss
.home_wrapper { .home_wrapper {
width: 100%;
.home_banner {
width: 100%; width: 100%;
height: 300px; padding-bottom: 50px;
padding-top: 80px; .home_banner {
position: relative;
background-color: #fff;
.home_banner_title {
padding: 10px;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
img {
width: 100px;
}
p {
margin: 0px;
text-align: right;
background-image: url('../../assets/Path 55_2.png');
background-position: left;
background-repeat: no-repeat;
background-size: 12px;
padding-left: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
ion-slides {
width: 100%;
height: 100%;
ion-slide {
width: 100%; width: 100%;
height: 100%; height: 300px;
padding-top: 80px;
position: relative; position: relative;
img { background-color: #fff;
width: 100%; .home_banner_title {
height: 100%; padding: 10px;
object-fit: cover; position: absolute;
top: 0px;
left: 0px;
right: 0px;
img {
width: 100px;
}
p {
margin: 0px;
text-align: right;
background-image: url('../../assets/Path 55_2.png');
background-position: left;
background-repeat: no-repeat;
background-size: 12px;
padding-left: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
} }
.banner_slide { ion-slides {
position: absolute; width: 100%;
top: 0px; height: 100%;
left: 0px; ion-slide {
right: 0px; width: 100%;
bottom: 0px; height: 100%;
-webkit-box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75); position: relative;
-moz-box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75); img {
box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75); width: 100%;
padding-top: 160px; height: 100%;
padding-left: 20px; object-fit: cover;
padding-right: 20px; }
h5 { .banner_slide {
color: #fff; position: absolute;
margin: 0px; top: 0px;
padding: 0px; left: 0px;
text-align: left; right: 0px;
font-weight: bold; bottom: 0px;
letter-spacing: 2px; -webkit-box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75);
padding-bottom: 5px; -moz-box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75);
font-size: 14px; box-shadow: inset 0px -128px 63px -45px rgba(0, 0, 0, 0.75);
overflow: hidden; padding-top: 160px;
white-space: nowrap; padding-left: 20px;
text-overflow: ellipsis; padding-right: 20px;
} h5 {
p { color: #fff;
color: #fff; margin: 0px;
margin: 0px; padding: 0px;
padding: 0px; text-align: left;
text-align: left; font-weight: bold;
font-size: 20px; letter-spacing: 2px;
font-weight: lighter; padding-bottom: 5px;
overflow: hidden; font-size: 14px;
white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap;
} text-overflow: ellipsis;
}
p {
color: #fff;
margin: 0px;
padding: 0px;
text-align: left;
font-size: 20px;
font-weight: lighter;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
} }
}
} }
} .home_sub_header {
.home_sub_header { padding: 10px;
padding: 10px; padding-top: 20px;
padding-top: 20px; padding-bottom: 20px;
padding-bottom: 20px; color: rgba(59, 57, 77, 1);
color: rgba(59, 57, 77, 1); font-weight: 900;
font-weight: 900;
}
.featured_slider {
padding-left: 10px;
padding-right: 10px;
.feature_product {
width: 100%;
height: 130px;
position: relative;
background-color: #a8a8a8;
border: 2px solid #fff;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.feature_overlay {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.75);
padding: 15px;
padding-top: 60px;
h5 {
color: #fff;
margin: 0px;
padding: 0px;
text-align: left;
font-weight: bold;
letter-spacing: 2px;
padding-bottom: 2px;
font-size: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
p {
color: #fff;
margin: 0px;
padding: 0px;
text-align: left;
font-size: 20px;
font-weight: lighter;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
} }
} .featured_slider {
.nearby_shop_list { padding-left: 10px;
ul { padding-right: 10px;
margin: 0px; .feature_product {
padding-left: 10px;
padding-right: 10px;
li {
list-style: none;
padding-bottom: 10px;
.nearby_image {
width: 120px;
height: 125px;
float: left;
background-color: #a8a8a8;
border-radius: 8px;
img {
width: 100%; width: 100%;
height: 100%; height: 130px;
object-fit: cover; position: relative;
object-position: center; background-color: #a8a8a8;
} border: 2px solid #fff;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.feature_overlay {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.75);
padding: 15px;
padding-top: 60px;
h5 {
color: #fff;
margin: 0px;
padding: 0px;
text-align: left;
font-weight: bold;
letter-spacing: 2px;
padding-bottom: 2px;
font-size: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
p {
color: #fff;
margin: 0px;
padding: 0px;
text-align: left;
font-size: 20px;
font-weight: lighter;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
} }
.nearby_detail { }
width: calc(100% - 120px); .nearby_shop_list {
float: left; ul {
padding-left: 20px;
padding-top: 40px;
h5 {
margin: 0px; margin: 0px;
padding: 0px; padding-left: 10px;
color: rgba(59, 57, 77, 1); padding-right: 10px;
font-weight: 900; li {
padding-bottom: 2px; list-style: none;
overflow: hidden; padding-bottom: 10px;
white-space: nowrap; .nearby_image {
text-overflow: ellipsis; width: 120px;
img { height: 125px;
width: 16px; float: left;
border-radius: 8px;
img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
}
.nearby_detail {
width: calc(100% - 120px);
float: left;
padding-left: 20px;
padding-top: 40px;
h5 {
margin: 0px;
padding: 0px;
color: rgba(59, 57, 77, 1);
font-weight: 900;
padding-bottom: 2px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
img {
width: 16px;
}
}
p {
margin: 0px;
padding: 0px;
color: rgb(176, 174, 199);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
} }
} }
p { }
.featured_catagory_list {
padding: 10px;
ul {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
color: rgb(176, 174, 199); li {
overflow: hidden; list-style: none;
white-space: nowrap; position: relative;
text-overflow: ellipsis; height: 120px;
} width: 100%;
border-radius: 8px;
margin-bottom: 10px;
&:nth-child(odd) {
text-align: left;
}
&:nth-child(even) {
text-align: right;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.featured_overlay {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
border-radius: 8px;
background-color: rgba(0, 0, 0, 0.75);
color: #fff;
padding: 45px;
padding-left: 20px;
padding-right: 20px;
h4 {
margin: 0px;
font-size: 26px;
font-weight: 900;
}
}
}
} }
}
} }
} }
.featured_catagory_list {
padding: 10px; .sort_wrappper {
ul { height: 100vh;
margin: 0px; width: 100%;
padding: 0px; position: fixed;
li { top: 0px;
list-style: none; left: 0px;
right: 0px;
bottom: 0px;
background: rgba(0, 0, 0, 0.6);
z-index: 99;
.sort_inner {
margin: 0 auto;
width: 90%;
padding: 10px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
background-color: #fff;
position: relative; position: relative;
height: 120px; -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
width: 100%; -moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
border-radius: 8px; box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
margin-bottom: 10px; top: 25%;
&:nth-child(odd) { border-radius: 0px;
text-align: left; h4 {
text-align: center;
color: rgba(59, 57, 77, 1);
margin: 0px;
font-weight: bold;
padding: 10px;
font-size: 18px;
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
padding-bottom: 20px;
margin-bottom: 30px;
} }
&:nth-child(even) { .search_box {
text-align: right; width: calc(100% - 100px);
height: 45px;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
} }
img { .search_btn {
width: 100%; width: 100px;
height: 100%; height: 45px;
object-fit: cover; background-color: rgba(41, 40, 91, 1);
object-position: center; border: none;
color: #fff;
font-size: 16px;
} }
.featured_overlay { ul {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
border-radius: 8px;
background-color: rgba(0, 0, 0, 0.75);
color: #fff;
padding: 45px;
padding-left: 20px;
padding-right: 20px;
h4 {
margin: 0px; margin: 0px;
font-size: 26px; padding: 0px;
font-weight: 900; li {
} list-style: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
padding-top: 10px;
padding-bottom: 10px;
.styled-checkbox {
position: absolute; // take it out of document flow
opacity: 0; // hide it
&+label {
position: relative;
cursor: pointer;
padding: 0;
width: 100%;
}
// Box.
&+label:before {
content: '';
margin-right: 10px;
display: inline-block;
vertical-align: text-top;
width: 20px;
height: 20px;
border-radius: 5px;
background: white;
border: 1px solid rgba(215, 213, 228, 1);
}
&:checked+label:before {
background: #29285b;
}
// Disabled state label.
&:disabled+label {
color: #b8b8b8;
cursor: auto;
}
// Disabled box.
&:disabled+label:before {
box-shadow: none;
background: #ddd;
}
// Checkmark. Could be replaced with an image
&:checked+label:after {
content: '';
position: absolute;
left: 6px;
top: 10px;
background: white;
width: 2px;
height: 2px;
box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
transform: rotate(45deg);
}
}
}
}
.sort_footer {
padding-top: 10px;
button {
border-radius: 8px;
height: 40px;
width: 48%;
color: #fff;
font-size: 15px;
font-weight: lighter;
}
.submit {
background-color: rgba(41, 40, 91, 1);
}
.cancel {
background-color: rgba(215, 213, 228, 1);
}
} }
}
} }
}
} }
.sort_wrappper { .no-result-wrapper {
height: 100vh; text-align: center;
width: 100%; img {
position: fixed; width: 100px;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: rgba(0, 0, 0, 0.6);
z-index: 99;
.sort_inner {
margin: 0 auto;
width: 90%;
padding: 10px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
background-color: #fff;
position: relative;
-webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
top: 25%;
border-radius: 0px;
h4 {
text-align: center;
color: rgba(59, 57, 77, 1);
margin: 0px;
font-weight: bold;
padding: 10px;
font-size: 18px;
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
padding-bottom: 20px;
margin-bottom: 30px;
}
.search_box {
width: calc(100% - 100px);
height: 45px;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
} }
.search_btn { h1 {
width: 100px; font-size: 18px;
height: 45px; font-weight: bolder;
background-color: rgba(41, 40, 91, 1); text-transform: uppercase;
border: none; color: #3b394d;
color: #fff;
font-size: 16px;
} }
ul { button {
margin: 0px; background-color: #29285b;
padding: 0px;
li {
list-style: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
padding-top: 10px;
padding-bottom: 10px;
.styled-checkbox {
position: absolute; // take it out of document flow
opacity: 0; // hide it
& + label {
position: relative;
cursor: pointer;
padding: 0;
width: 100%;
}
// Box.
& + label:before {
content: '';
margin-right: 10px;
display: inline-block;
vertical-align: text-top;
width: 20px;
height: 20px;
border-radius: 5px;
background: white;
border: 1px solid rgba(215, 213, 228, 1);
}
&:checked + label:before {
background: #29285b;
}
// Disabled state label.
&:disabled + label {
color: #b8b8b8;
cursor: auto;
}
// Disabled box.
&:disabled + label:before {
box-shadow: none;
background: #ddd;
}
// Checkmark. Could be replaced with an image
&:checked + label:after {
content: '';
position: absolute;
left: 6px;
top: 10px;
background: white;
width: 2px;
height: 2px;
box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white,
4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
transform: rotate(45deg);
}
}
}
}
.sort_footer {
padding-top: 10px;
button {
border-radius: 8px; border-radius: 8px;
height: 40px; height: 50px;
width: 48%; width: 48%;
color: #fff; color: #fff;
font-size: 15px; font-size: 18px;
font-weight: lighter; font-weight: lighter;
} text-transform: uppercase;
.submit { margin-top: 10px;
background-color: rgba(41, 40, 91, 1);
}
.cancel {
background-color: rgba(215, 213, 228, 1);
}
} }
} }
} \ No newline at end of file
.no-result-wrapper {
text-align: center;
img {
width: 100px;
}
h1 {
font-size: 18px;
font-weight: bolder;
text-transform: uppercase;
color: #3b394d;
}
button {
background-color: #29285b;
border-radius: 8px;
height: 50px;
width: 48%;
color: #fff;
font-size: 18px;
font-weight: lighter;
text-transform: uppercase;
margin-top: 10px;
}
}
Markdown is supported
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