today changes

Author: sarasnmsp21

src/assets/scss/Sstyle/roominfo.scss

@@ -10,15 +10,15 @@
 .outline-whole-row {
   border: 1px solid #8080807a;
   font-size: 10px;
-  border-radius: 6px;
+  border-radius: 3px;
   box-shadow: 0.01px 0.01px 0.01px 0.01px grey;
   height: 158px;
 }
-.outline-whole-row-review 
+.roominfo-col3-review 
 {
   border: 1px solid #8080807a;
   font-size: 12px;
-  border-radius: 6px;
+  border-radius: 3px;
   box-shadow: 0.01px 0.01px 0.01px 0.01px grey;
   height: 104px;
 }
@@ -30,27 +30,23 @@
 .outline-button {
   margin-left: 25px;
 }
-.img-row-p {
-  padding-left: 15px;
-  padding-right: 15px;
-}
 .outline-whole-row2 {
   border: 1px solid #8080807a;
   font-size: 12px;
   margin-top: 10px;
   height: 112px;
   border-radius: 6px;
 }
-.outline-whole-row3 {
-  border: 1px solid #8080807a;
+.roominfo-col-3 {
   font-size: 11px;
-  padding: 3px;
-  width: 274px;
+  width: 277px;
   height: 28px;
   text-align: center;
   border-radius: 3px;
   color: red;
   background-color: #ff00002e;
+  margin-top: -28px;
+  padding: 6px 6px 6px 0px;
 }
 .price-per-night-text
 {
@@ -71,11 +67,12 @@
   background-size: 16px 44px;
 }
 .div-back-image-restaurant {
-  background: linear-gradient(rgba(13, 14, 14, 0.12), rgba(19, 21, 21, 0.83)),
+  background:
     url("../assets/ImagesS/rest.jpeg");
 
   height: 104px;
   width: 164px;
+  position: relative;
 }
 .div-back-image-map {
   background: linear-gradient(rgba(13, 14, 14, 0.12), rgba(19, 21, 21, 0.83)),
@@ -91,26 +88,35 @@
   margin-top: 87px;
   margin-left: 11px;
   font-weight: bold;
+  position: absolute;
+  bottom: 5px;
+  left: 8px;
 }
 .div-back-image-room {
-  background: linear-gradient(rgba(13, 14, 14, 0.12), rgba(19, 21, 21, 0.28)),
+  background-image:
     url("../assets/ImagesS/room.jpeg");
 
   height: 158px;
-  width: 340px;
+  width: 100%;
   border-radius: 0px 3px 3px 0px;
+  position: relative;
+  background-repeat: round;
 }
 .font-room {
   color: white;
   font-size: 10px;
   margin-top: 108px;
   font-weight: bold;
+  position: absolute;
+  bottom: 5px;
+  left: 8px;
+
 }
 .border-style {
   border-top: 1px solid #80808057;
 }
 .bed-queen {
-  font-size: 10px;
+  font-size: 12px;
   color: $alltextbluecolor;
 }
 .price-per-night {
@@ -151,8 +157,8 @@
   background-color: $textgreencolor;
   color: white;
   height: 30px;
-  width: 56px;
-  border-radius: 5px;
+  width: 48px;
+  border-radius: 3px;
   text-align: center;
   font-size: 15px;
   padding-top: 3px;
@@ -169,22 +175,30 @@
   font-size: 11px;
   padding-bottom: 5px;
   color: $alltextheadcolor;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: 244px;
+  height: 3.2em;
+  white-space: nowrap;
 }
 .north-star {
   font-size: 10px;
   color:$allgraytextcolor;
 }
-.star-padding{
+.hotel-star-size{
   font-size: 9px;
+  display: inline-block;
+  vertical-align: middle;
 }
 .more-review-font {
   color: $alltextbluecolor;
 }
-.ibis-font {
+.ibis-hotel-head {
   font-size: 18px;
-  display: inline-flex;
+  display: inline-block;
+    vertical-align: baseline;
 }
-.ibis-hotel-below {
+.ibis-hotel-subhead {
   color: $alltextbluecolor;
   font-size: 13px;
   margin-top: -7px;
@@ -203,4 +217,14 @@
 .room-only-refund-tick{
   font-size: 9px;
   color: $textgreencolor;
+}
+.northstar-text-overflow{
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: 78px;
+  height: 3.2em;
+  white-space: nowrap;
+}
+.standard-room-div-width{
+  width: 60%;
 }

src/assets/scss/Sstyle/table.scss

@@ -13,10 +13,10 @@
     box-shadow: 2px 2px 2px 2px #70809021;
     border-radius: 5px;
     margin: 12px 4px 12px;
-  }
-  .break-inc {
-    margin-top: 12px;
+    text-align: center;
+    padding: 12px 0px;
     font-size: 14px;
+
   }
   .free-cance-margin {
     margin-left: -382px;
@@ -54,7 +54,7 @@
     font-weight: bold;
   }
  .break-cancel-display{
-   display: inline-flex;
+  display: inline-block;
  }
 
 

src/assets/scss/_svariables.scss

@@ -1,6 +1,6 @@
 $alltextbluecolor:#008cff;
 $allgradientbluecolor:linear-gradient(96deg, #53b2fe, #065af3);
-$textgreencolor:#1ea270c4;
+$textgreencolor:#48a783;
 $greentooltipcolor:#d7fae2;
 $textredcolor:#eb2026;
 $textwhitecolor:#fff;
@@ -9,6 +9,7 @@ $mybuttoncolor:linear-gradient(45deg,#ace143,#219393);
 $tablepricebgcolor:#d7fae2;
 $citysearchWdiv:#0a223d;
 $citysearchWdivbox:rgba(255,255,255, 0.1);
-$allgraytextcolor:#808080cf;
-$alltextheadcolor:#000000bf;
+$allgraytextcolor:#545050;
+$alllightgraytext:#c5c5c5;
+$alltextheadcolor:#484848;
 

src/components/facilities.vue

@@ -15,25 +15,25 @@
       <div class="div-border">
         <div class="facility-display">
           <div>
-            <span class="mr-3">
+            <span class="mr-2">
               <font-awesome-icon :icon="['fas', 'wifi']" />
             </span>
             <span class="facility-head">Free Wi-fi</span>
           </div>
           <div>
-            <span class="mr-3">
+            <span class="mr-2">
               <font-awesome-icon :icon="['fas', 'utensils']"
             /></span>
             <span class="facility-head">Restaurant</span>
           </div>
           <div>
-            <span class="mr-3">
+            <span class="mr-2">
               <font-awesome-icon :icon="['fas', 'parking']" />
             </span>
             <span class="facility-head"> Parking</span>
           </div>
           <div>
-            <span class="mr-3"
+            <span class="mr-2"
               ><font-awesome-icon :icon="['fab', 'centos']"
             /></span>
             <span class="facility-head">Fitness Centre</span>
@@ -423,5 +423,4 @@
 .facility-head {
   margin-right: 168px;
 }
-
 </style>

src/components/price.vue

@@ -2,16 +2,17 @@
   <b-row>
     <div>
       <div class="price-title ">
-        <span class="table-text-color">
-          Deal Applied:<b>INTL_CBCARDDTACC.</b> You Get Cashback of Rs. 285 to
-          all credit and debit card within next 72 hours, T&C apply
+        <span class="price-table-head">
+          Deal Applied:<span class="font-weight-bold">INTL_CBCARDDTACC.</span>
+          You Get Cashback of Rs. 285 to all credit and debit card within next
+          72 hours, T&C apply
         </span>
       </div>
       <div class="option-div-display">
         <div>
-          <div class="price-light-through pt-2 table-text-color">₹3529</div>
+          <div class="price-light-through pt-2 price-table-prices">₹3529</div>
           <div class="price-color font-weight-bold">₹ 3,177</div>
-          <div class="table-text-color">Per Night</div>
+          <div class="price-table-prices">Per Night</div>
         </div>
         <div class="my-auto ml-3">
           <button class="booknow-box-button  button-style">
@@ -39,7 +40,11 @@
   font-size: 17px;
   color: $alltextheadcolor;
 }
-.table-text-color{
+.price-table-prices {
+  color: $alllightgraytext;
+}
+.price-table-head
+{
   color: $allgraytextcolor;
 }
 </style>

src/components/reviews.vue

@@ -7,7 +7,7 @@
             <div class="zero-bg-color m-0 ">
               <div class="mx-auto">
                 <div>
-                  <span class="mx-auto zero-font">4.0</span>
+                  <span class="mx-auto zero-font font-weight-bold">4.0</span>
                 </div>
                 <div>
                   <span class="review-font">920 Reviews</span>
@@ -53,7 +53,7 @@
           </div>
         </b-col>
         <b-col md="7">
-          <div class="loc-sleep-display">
+          <div class="review-col-3">
             <div class="location-margin">
               <div class="my-auto ">
                 <font-awesome-icon :icon="['fas', 'dot-circle']" />
@@ -130,7 +130,7 @@
             <font-awesome-icon :icon="['far', 'circle']" />
           </span>
         </div>
-        <div class="nt-text-color pb-2">
+        <div class="comment-lightgray-head pb-2">
           {{ review.reviewname }}
         </div>
         <div class="para-font-size">{{ review.reviewpara }}</div>
@@ -201,17 +201,17 @@ export default {
   box-shadow: 1px 1px 1px 1px #8888882b;
 }
 .grade-review {
-  margin-left: -66px;
+  margin-left: -87px;
   margin-top: 6px;
 }
 .icon-color {
   color: $textgreencolor;
   font-size: 14px;
   vertical-align: middle;
 }
-.nt-text-color {
-  color: #80808059;
-  font-size: 13px;
+.comment-lightgray-head {
+  color: $alllightgraytext;
+  font-size: 12px;
 }
 .para-font-size {
   font-size: 13px;
@@ -232,7 +232,7 @@ export default {
   font-size: 13px;
 }
 .icon-size {
-  font-size: 14px;
+  font-size: 10px;
 }
 .zero-font {
   font-size: 30px;
@@ -244,7 +244,7 @@ export default {
 .zero-col-border {
   border: 1px solid $textgreencolor;
   border-radius: 4px;
-  width: 106px;
+  width: 94px;
 }
 
 .review-number-size {
@@ -253,7 +253,7 @@ export default {
 }
 .review-border {
   border-right: 1px solid #b6b3b32e;
-  margin-right: 71px;
+  margin-right: 103px;
 }
 .location-margin {
   margin-top: 33px;
@@ -279,8 +279,9 @@ export default {
   text-decoration: none;
   color: $alltextbluecolor;
 }
-.loc-sleep-display {
-  display: inline-flex;
+.review-col-3{
+  display:flex;
+  margin-left:-55px;
 }
 .review-dot-icon {
   font-size: 10px;