@megafon/ui-shared 2.0.0-beta.226 → 2.0.0-beta.227

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.0.0-beta.227](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@2.0.0-beta.226...@megafon/ui-shared@2.0.0-beta.227) (2021-09-27)
+
+
+### Bug Fixes
+
+* **.stylelintrc.json:** move .stylelint.json to root and extends package configs from it ([ae5eac3](https://github.com/MegafonWebLab/megafon-ui/commit/ae5eac3dbbbea00413cea6b45ecbc22babb723c4))
+* **buttonbanner.less:** fix [@media](https://github.com/media) query position ([955b9b4](https://github.com/MegafonWebLab/megafon-ui/commit/955b9b416933078340e7ad9482073da25ba3a0eb))
+* **textboxpicture:** fix modifiers names ([52e713d](https://github.com/MegafonWebLab/megafon-ui/commit/52e713d60edb8da68a0dafe62df08baec6ad23bf))
+* **ui-shared:** add frontend-presets configs; fix stylelint errors ([06df02d](https://github.com/MegafonWebLab/megafon-ui/commit/06df02d5218c611282fa5aea079bca46afcdbd56))
+
+
+
+
+
 # [2.0.0-beta.226](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@2.0.0-beta.225...@megafon/ui-shared@2.0.0-beta.226) (2021-09-20)
 
 

package/dist/es/components/BenefitsIcons/style/BenefitsIcons.css

@@ -6,8 +6,8 @@ h5 {
   margin: 0;
 }
 .mfui-beta-benefits-icons {
-  font-size: 10px;
   overflow: hidden;
+  font-size: 10px;
 }
 .mfui-beta-benefits-icons__inner {
   margin-bottom: -48px;

package/dist/es/components/BenefitsIcons/style/BenefitsIconsTile.css

@@ -23,8 +23,8 @@ h5 {
   margin-bottom: 0;
 }
 .mfui-beta-benefits-icons-tile__svg-icon {
-  width: 44px;
-  height: 44px;
+  width: 40px;
+  height: 40px;
   overflow: hidden;
 }
 .mfui-beta-benefits-icons-tile_icon-position_left-side {

package/dist/es/components/BenefitsPictures/BenfitsPictures.css

@@ -11,8 +11,8 @@ h5 {
 }
 .mfui-beta-benefits-pictures__img_h-align_center {
   display: block;
-  margin-left: auto;
   margin-right: auto;
+  margin-left: auto;
 }
 .mfui-beta-benefits-pictures__title {
   margin-bottom: 12px;

package/dist/es/components/Breadcrumbs/Breadcrumbs.css

@@ -26,8 +26,8 @@ h5 {
 }
 .mfui-beta-breadcrumbs__item {
   position: relative;
-  padding-left: 22px;
   margin-right: 10px;
+  padding-left: 22px;
 }
 .mfui-beta-breadcrumbs__item:before {
   content: '→';

package/dist/es/components/ButtonBanner/ButtonBanner.css

@@ -19,9 +19,9 @@ h5 {
 .mfui-beta-button-banner:before {
   content: '';
   position: absolute;
-  left: 0;
   top: 0;
   bottom: 0;
+  left: 0;
   width: 12px;
   background-color: #00B956;
   border-radius: 0 12px 12px 0;
@@ -33,8 +33,8 @@ h5 {
 }
 @media screen and (max-width: 767px) {
   .mfui-beta-button-banner:before {
-    bottom: auto;
     right: 0;
+    bottom: auto;
     width: auto;
     height: 12px;
   }
@@ -45,8 +45,8 @@ h5 {
 }
 @media screen and (max-width: 767px) {
   .mfui-beta-button-banner__content {
-    text-align: center;
     padding: 36px 16px 32px;
+    text-align: center;
   }
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
@@ -65,8 +65,6 @@ h5 {
   }
 }
 .mfui-beta-button-banner__media {
-  overflow: hidden;
-  height: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -76,9 +74,11 @@ h5 {
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
+  height: 100%;
+  padding: 0 20px;
+  overflow: hidden;
   background-repeat: no-repeat;
   background-position: center;
-  padding: 0 20px;
   border-radius: 0 8px 8px 0;
 }
 @media screen and (max-width: 767px) {

package/dist/es/components/Card/Card.css

@@ -10,10 +10,10 @@ h5 {
   display: -ms-flexbox;
   display: flex;
   border-radius: 8px;
+  overflow: hidden;
+  background-color: #FFFFFF;
   -webkit-box-shadow: 0 0.25px 3px rgba(0, 0, 0, 0.25);
           box-shadow: 0 0.25px 3px rgba(0, 0, 0, 0.25);
-  background-color: #FFFFFF;
-  overflow: hidden;
 }
 .mfui-beta-card__inner {
   display: -webkit-box;
@@ -28,9 +28,9 @@ h5 {
           flex-grow: 0;
   -ms-flex-negative: 1;
       flex-shrink: 1;
-  width: 100%;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
+  width: 100%;
   padding: 32px 20px;
 }
 @media screen and (max-width: 767px) {
@@ -42,8 +42,8 @@ h5 {
   font-size: 15px;
   line-height: 24px;
   font-weight: 400;
-  color: #333333;
   margin-top: 12px;
+  color: #333333;
 }
 .mfui-beta-card__btns-wrapper {
   display: -webkit-box;
@@ -51,14 +51,14 @@ h5 {
   display: flex;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
-  -webkit-box-pack: space-evenly;
-      -ms-flex-pack: space-evenly;
-          justify-content: space-evenly;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  padding-top: 12px;
+  -webkit-box-pack: space-evenly;
+      -ms-flex-pack: space-evenly;
+          justify-content: space-evenly;
   margin-top: auto;
+  padding-top: 12px;
 }
 .mfui-beta-card__btns-wrapper_left-align {
   -webkit-box-pack: start;
@@ -92,21 +92,21 @@ h5 {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   margin-top: -32px;
-  margin-left: -20px;
   margin-right: -20px;
+  margin-left: -20px;
 }
 @media screen and (max-width: 767px) {
   .mfui-beta-card__pic-wrapper_img {
     margin-top: -24px;
-    margin-left: -16px;
     margin-right: -16px;
+    margin-left: -16px;
   }
 }
 .mfui-beta-card__pic-wrapper_object-fit_fill img {

package/dist/es/components/Container/Container.css

@@ -8,22 +8,6 @@ h5 {
 .mfui-beta-container {
   padding-bottom: 96px;
 }
-.mfui-beta-container_disable-padding-top {
-  padding-top: 0 !important;
-}
-.mfui-beta-container_disable-padding-bottom {
-  padding-bottom: 0 !important;
-}
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-container {
-    padding-bottom: 72px;
-  }
-}
-@media screen and (max-width: 767px) {
-  .mfui-beta-container {
-    padding-bottom: 48px;
-  }
-}
 .mfui-beta-container_bg-color_default {
   background-color: #FFFFFF;
 }
@@ -39,6 +23,16 @@ h5 {
 .mfui-beta-container_bg-color_purple {
   background-color: #731982;
 }
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-beta-container {
+    padding-bottom: 72px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-beta-container {
+    padding-bottom: 48px;
+  }
+}
 .mfui-beta-container_bg-color_default + .mfui-beta-container_bg-color_light-gray {
   padding-top: 96px;
 }
@@ -2806,3 +2800,9 @@ h5 {
 .mfui-beta-container .mfui-beta-page-title + .mfui-beta-button-link-box {
   margin-top: 0 !important;
 }
+.mfui-beta-container_disable-padding-top {
+  padding-top: 0 !important;
+}
+.mfui-beta-container_disable-padding-bottom {
+  padding-bottom: 0 !important;
+}

package/dist/es/components/Instructions/Instructions.css

@@ -6,8 +6,8 @@ h5 {
   margin: 0;
 }
 .mfui-beta-instructions__title_resolution_mobile {
-  text-align: center;
   margin-bottom: 32px;
+  text-align: center;
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-beta-instructions__title_resolution_mobile {
@@ -67,10 +67,10 @@ h5 {
 }
 @media screen and (min-width: 1024px) {
   .mfui-beta-instructions__picture {
-    width: 50%;
     -webkit-box-ordinal-group: 3;
         -ms-flex-order: 2;
             order: 2;
+    width: 50%;
   }
 }
 @media screen and (min-width: 1024px) {
@@ -103,15 +103,15 @@ h5 {
   .mfui-beta-instructions__img-wrapper:before {
     content: '';
     position: absolute;
-    display: block;
+    right: 0;
     bottom: 0;
     left: 0;
-    right: 0;
+    z-index: 2;
+    display: block;
     width: 324px;
     height: 1px;
     margin: 0 auto;
     background: #D8D8D8;
-    z-index: 2;
   }
 }
 .mfui-beta-instructions__device-screen {
@@ -136,8 +136,8 @@ h5 {
 .mfui-beta-instructions_mask_android .mfui-beta-instructions__swiper {
   position: absolute;
   top: 59px;
-  left: 0;
   right: 0;
+  left: 0;
   width: 204px;
   height: 363px;
   margin: auto;
@@ -171,24 +171,24 @@ h5 {
 }
 .mfui-beta-instructions_mask_new-iphone .mfui-beta-instructions__device-screen {
   position: relative;
+  z-index: 2;
   width: 100%;
   height: 490px;
   margin: auto;
   background: url('./img/newIphone.png') 50% no-repeat;
   background-size: contain;
-  z-index: 2;
 }
 .mfui-beta-instructions_mask_new-iphone .mfui-beta-instructions__swiper {
   position: absolute;
   top: 14px;
-  left: 0;
   right: 0;
+  left: 0;
+  z-index: 1;
   width: 214px;
   height: 462px;
   margin: auto;
-  overflow: hidden;
   border-radius: 20px;
-  z-index: 1;
+  overflow: hidden;
 }
 @media screen and (max-width: 1023px) {
   .mfui-beta-instructions_mask_iphone-12 .mfui-beta-instructions__img-wrapper:before {
@@ -197,24 +197,24 @@ h5 {
 }
 .mfui-beta-instructions_mask_iphone-12 .mfui-beta-instructions__device-screen {
   position: relative;
+  z-index: 2;
   width: 100%;
   height: 490px;
   margin: auto;
   background: url('./img/iphone12.png') 50% no-repeat;
   background-size: contain;
-  z-index: 2;
 }
 .mfui-beta-instructions_mask_iphone-12 .mfui-beta-instructions__swiper {
   position: absolute;
   top: 14px;
-  left: 0;
   right: 0;
+  left: 0;
+  z-index: 1;
   width: 214px;
   height: 462px;
   margin: auto;
-  overflow: hidden;
   border-radius: 20px;
-  z-index: 1;
+  overflow: hidden;
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-beta-instructions_mask_laptop .mfui-beta-instructions__img-wrapper {
@@ -278,8 +278,8 @@ h5 {
 .mfui-beta-instructions_mask_laptop .mfui-beta-instructions__swiper {
   position: absolute;
   top: 50%;
-  left: 50%;
   right: 0;
+  left: 50%;
   width: 78%;
   margin: auto;
   overflow: hidden;
@@ -311,10 +311,10 @@ h5 {
 }
 @media screen and (min-width: 1024px) {
   .mfui-beta-instructions__articles {
-    width: 50%;
     -webkit-box-ordinal-group: 2;
         -ms-flex-order: 1;
             order: 1;
+    width: 50%;
   }
 }
 @media screen and (min-width: 1024px) {
@@ -323,9 +323,9 @@ h5 {
   }
 }
 .mfui-beta-instructions__articles-list {
-  list-style-type: none;
-  padding: 0;
   margin: 0;
+  padding: 0;
+  list-style-type: none;
 }
 .mfui-beta-instructions__articles-list_text-after {
   margin-bottom: 48px;
@@ -341,8 +341,8 @@ h5 {
   }
 }
 .mfui-beta-instructions__articles-item {
-  opacity: 0.5;
   position: relative;
+  opacity: 0.5;
 }
 @media screen and (min-width: 1024px) {
   .mfui-beta-instructions__articles-item {
@@ -360,9 +360,9 @@ h5 {
 .mfui-beta-instructions__articles-item:hover .mfui-beta-instructions__articles-item-dot:before,
 .mfui-beta-instructions__articles-item_active .mfui-beta-instructions__articles-item-dot:before {
   top: 0;
-  left: 0;
   right: 0;
   bottom: 0;
+  left: 0;
   background: #00B956;
 }
 @media screen and (min-width: 1024px) {
@@ -376,11 +376,11 @@ h5 {
   display: inline-block;
   width: 40px;
   height: 40px;
+  border-radius: 50%;
+  font-weight: 500;
   font-size: 15px;
   line-height: 40px;
-  font-weight: 500;
   text-align: center;
-  border-radius: 50%;
   -webkit-box-shadow: inset 0 0 0 1px #B2B2B2;
           box-shadow: inset 0 0 0 1px #B2B2B2;
   cursor: pointer;
@@ -396,12 +396,12 @@ h5 {
   content: '';
   position: absolute;
   top: 50%;
-  left: 50%;
   right: 50%;
   bottom: 50%;
+  left: 50%;
+  border-radius: 50%;
   -webkit-transition: all 0.3s ease;
   transition: all 0.3s ease;
-  border-radius: 50%;
 }
 .mfui-beta-instructions__articles-item-dot-number,
 .mfui-beta-instructions__articles-dot-number {
@@ -427,8 +427,8 @@ h5 {
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
-  padding: 0;
   margin: 0;
+  padding: 0;
   list-style-type: none;
 }
 .mfui-beta-instructions__articles-dots_text-after {
@@ -454,9 +454,9 @@ h5 {
 .mfui-beta-instructions__articles-dot:hover:before,
 .mfui-beta-instructions__articles-dot_active:before {
   top: 0;
-  left: 0;
   right: 0;
   bottom: 0;
+  left: 0;
   background: #00B956;
 }
 .mfui-beta-instructions__articles-dot:last-child {

package/dist/es/components/PageTitle/PageTitle.css

@@ -41,9 +41,9 @@ h5 {
   display: inline-block;
   margin-top: 16px;
   padding: 2px 14px;
+  color: #FFFFFF;
   font-weight: 500;
   background-color: #731982;
-  color: #FFFFFF;
 }
 @media screen and (min-width: 1280px) {
   .mfui-beta-page-title__badge_under-breadcrumbs {

package/dist/es/components/Partners/Partners.css

@@ -46,8 +46,8 @@ h5 {
   position: absolute;
   top: 50%;
   left: 50%;
+  max-width: 100%;
+  max-height: 100%;
   -webkit-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
-  max-height: 100%;
-  max-width: 100%;
 }

package/dist/es/components/PictureWithDescription/PictureWithDescription.css

@@ -34,10 +34,10 @@ h5 {
 }
 @media screen and (min-width: 1024px) {
   .mfui-beta-picture-with-description__picture {
-    width: 50%;
     -webkit-box-ordinal-group: 3;
         -ms-flex-order: 2;
             order: 2;
+    width: 50%;
   }
 }
 @media screen and (min-width: 1024px) {
@@ -61,10 +61,10 @@ h5 {
 }
 @media screen and (min-width: 1024px) {
   .mfui-beta-picture-with-description__articles {
-    width: 50%;
     -webkit-box-ordinal-group: 2;
         -ms-flex-order: 1;
             order: 1;
+    width: 50%;
   }
 }
 @media screen and (min-width: 1024px) {

package/dist/es/components/Property/Property.css

@@ -35,19 +35,19 @@ h5 {
   display: flex;
 }
 .mfui-beta-property__icon {
+  display: inline-block;
   width: 24px;
   height: 24px;
-  overflow: hidden;
   margin-right: 9px;
   margin-left: 1px;
-  display: inline-block;
+  overflow: hidden;
   vertical-align: bottom;
 }
 .mfui-beta-property__badge {
-  border-radius: 2px;
-  font-size: 12px;
   padding: 2px 8px;
+  border-radius: 2px;
   color: #FFFFFF;
+  font-size: 12px;
   background: #FFA717;
 }
 .mfui-beta-property__inner {
@@ -70,18 +70,18 @@ h5 {
   width: 100%;
 }
 .mfui-beta-property__value-wrapper {
-  width: 35%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
   -webkit-box-align: start;
       -ms-flex-align: start;
           align-items: flex-start;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+  width: 35%;
 }
 @media screen and (max-width: 479px) {
   .mfui-beta-property__value-wrapper {
@@ -90,10 +90,10 @@ h5 {
   }
 }
 .mfui-beta-property__value-wrapper_merged {
-  border-left: 1px solid #D8D8D8;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  border-left: 1px solid #D8D8D8;
 }
 .mfui-beta-property__desc {
   margin-top: 8px;

package/dist/es/components/Property/PropertyDescription.css

@@ -6,8 +6,8 @@ h5 {
   margin: 0;
 }
 .mfui-beta-property-description__collapse {
-  font-size: 12px;
   color: #34AAF2;
+  font-size: 12px;
   -webkit-text-decoration: underline dashed #34AAF2;
           text-decoration: underline dashed #34AAF2;
   cursor: pointer;

package/dist/es/components/Steps/Steps.css

@@ -7,8 +7,8 @@ h5 {
 }
 .mfui-beta-steps {
   width: 66%;
-  margin-left: auto;
   margin-right: auto;
+  margin-left: auto;
 }
 @media screen and (min-width: 1280px) {
   .mfui-beta-steps {
@@ -24,9 +24,9 @@ h5 {
   margin-bottom: 40px;
 }
 .mfui-beta-steps__list {
-  list-style: none;
   margin: 0;
   padding: 0;
+  list-style: none;
 }
 .mfui-beta-steps__item {
   margin-bottom: 48px;

package/dist/es/components/Steps/StepsItem.css

@@ -17,19 +17,19 @@ h5 {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  background-color: #00B956;
   color: #FFFFFF;
+  background-color: #00B956;
 }
 .mfui-beta-steps-item__text-wrapper {
   padding-top: 8px;

package/dist/es/components/StoreBanner/StoreBanner.css

@@ -29,8 +29,8 @@ h5 {
   background-image: url('./img/new-iphone.png');
 }
 .mfui-beta-store-banner_mask_new-iphone .mfui-beta-store-banner__screen {
-  z-index: 1;
   top: 13px;
+  z-index: 1;
   width: 87%;
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
@@ -110,9 +110,9 @@ h5 {
 }
 @media screen and (max-width: 767px) {
   .mfui-beta-store-banner__content {
+    padding-right: 15px;
     padding-bottom: 32px;
     padding-left: 15px;
-    padding-right: 15px;
     text-align: center;
   }
 }
@@ -122,12 +122,12 @@ h5 {
   background-size: cover;
 }
 .mfui-beta-store-banner__device-wrapper {
-  width: 235px;
   position: relative;
   bottom: calc(2 * (32px - 1px));
+  width: 235px;
   height: calc(100% + 2 * 32px + 30px);
-  margin-left: auto;
   margin-right: auto;
+  margin-left: auto;
   overflow: hidden;
 }
 @media screen and (min-width: 1024px) and (max-width: 1279px) {
@@ -192,12 +192,12 @@ h5 {
   margin-bottom: 10px;
 }
 .mfui-beta-store-banner__stores {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
 }
@@ -242,10 +242,10 @@ h5 {
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
-    max-width: 305px;
     -webkit-box-pack: start;
         -ms-flex-pack: start;
             justify-content: flex-start;
+    max-width: 305px;
   }
 }
 .mfui-beta-store-banner__links_three .mfui-beta-store-banner__qr-code + .mfui-beta-store-banner__stores .mfui-beta-store-banner__store-link {
@@ -255,8 +255,8 @@ h5 {
   margin-right: 0;
 }
 .mfui-beta-store-banner__links_three .mfui-beta-store-banner__store-link {
-  height: 35px;
   width: 119px;
+  height: 35px;
 }
 @media screen and (max-width: 1023px) {
   .mfui-beta-store-banner__links_three .mfui-beta-store-banner__store-link:not(:first-child) {

package/dist/es/components/StoreButton/StoreButton.css

@@ -1,8 +1,8 @@
 .mfui-beta-store-button {
-  background-size: cover;
+  border-radius: 8px;
   background-repeat: no-repeat;
   background-position: center;
-  border-radius: 8px;
+  background-size: cover;
 }
 .mfui-beta-store-button_theme_app-store {
   background-image: url('./img/app-store.png');