kj
/
mall-app
1
0
Forkuj 0
Kod Zgłoszenia 0 Oczekujące zmiany 0 Wydania 0 Wiki Aktywność
Project: Mall App Client: Maiora
Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.
29 Commity
1 Gałąź
5.5 MiB
 
 
 
 
Drzewo: cd2de5fe9e
Gałęzie Tagi
${ item.name }
Utwórz gałąź ${ searchTerm }
z 'cd2de5fe9e'
${ noResults }
mall-app/src/app/profile/profile.page.scss

152 wiersze
3.2 KiB
Czysty Wina Historia 

  1. .profile {

  2.     background-image: url('../../assets/custom/background-5.svg');

  3.     background-size: cover;

  4.     background-repeat: no-repeat;

  5.     background-position: left top;

  6.     color: white;

  7.     padding: 15px;

  8. 

  9.     .profile-details-holder {

  10.         display: flex;

  11.         align-items: stretch;

  12.         justify-content: space-between;

  13.         border-bottom: 1px solid var(--brand-blue);

  14.         padding-bottom: 15px;

  15. 

  16.         .profile-image {

  17.             width: 40px;

  18.             height: 40px;

  19.             border-radius: 50%;

  20.             background-color: white;

  21.         }

  22. 

  23.         h5 {

  24.             margin: 0 auto;

  25.             font-size: 14px;

  26.             display: flex;

  27.             align-items: center;

  28.             justify-content: space-between;

  29. 

  30.             ion-button {

  31.                 margin: 0;

  32.                 font-size: 10px;

  33.             }

  34.         }

  35. 

  36.         .contact {

  37.             padding: 0;

  38.             margin: 10px 0 0;

  39.             font-size: 10px;

  40.             display: flex;

  41.             justify-content: space-between;

  42.             flex-wrap: wrap;

  43.             width: 90%;

  44. 

  45.             li {

  46.                 width: 48%;

  47.             }

  48. 

  49.             li:first-child {

  50.                 list-style: none;

  51.             }

  52.         }

  53. 

  54.         .content {

  55.             width: calc(100% - 55px);

  56.         }

  57.     }

  58. 

  59.     .location-details {

  60.         display: flex;

  61.         width: 100%;

  62.         justify-content: space-between;

  63.         align-items: center;

  64.         padding-top: 15px;

  65.         font-size: 12px;

  66. 

  67.         ion-button {

  68.             margin: 0;

  69.             --padding-top: 0;

  70.             --padding-bottom: 0;

  71.             --padding-start: 0;

  72.             --padding-end: 0;

  73.             width: 30px;

  74.             height: 30px;

  75.             border-radius: 50%;

  76.             font-size: 12px;

  77.             --color: var(--brand-blue);

  78.             --border-radius: 50%;

  79.             --background: white;

  80.         }

  81.     }

  82. }

  83. 

  84. .tabs-holder {

  85.     display: flex;

  86.     align-items: stretch;

  87.     padding: 10px 0;

  88. 

  89.     .tab {

  90.         width: 25%;

  91. 

  92.         &.active {

  93.             figure {

  94.                 border-color: var(--brand-blue);

  95.                 background-color: transparent;

  96.             }

  97.             span {

  98.                 color: var(--brand-blue);

  99.             }

  100.         }

  101.     }

  102. 

  103.     figure {

  104.         margin: 10px auto;

  105.         padding: 10px;

  106.         background-color: #efefef;

  107.         border: 2px solid #efefef;

  108.         width: 50px;

  109.         height: 50px;

  110.         border-radius: 50%;

  111.         transition: border-color 0.3s;

  112. 

  113.         img {

  114.             display: block;

  115.             width: 100%;

  116.             height: 100%;

  117.         }

  118.     }

  119. 

  120.     span {

  121.         display: block;

  122.         text-align: center;

  123.         font-size: 10px;

  124.         color: var(--brand-dark-grey);

  125.         font-weight: 500;

  126.         transition: color 0.4s;

  127.     }

  128. }

  129. 

  130. .tab-utilities-holder {

  131.     display: flex;

  132.     align-items: center;

  133.     justify-content: space-between;

  134.     width: 100%;

  135.     padding: 0 15px;

  136.     margin: 0 auto;

  137.     background-color: #efefef;

  138. 

  139.     h5 {

  140.         color: var(--brand-dark-grey);

  141.         font-size: 12px;

  142.         margin: 0;

  143.     }

  144. 

  145.     ion-button {

  146.         --padding-end: 0;

  147.         --color: var(--brand-blue);

  148.         font-size: 10px;

  149.         margin: 0;

  150.     }

  151. }