0

Bom estou precisando adicionar um item a div quando tiver selecionado, a imagem real deve ficar assim:

inserir a descrição da imagem aqui

Seria este ponto banco a esquerda no item verde.

Como faria isso no css, utilizando after ou before pode ser feito com css3 e sass.

MEU HTML

<ion-row margin-top>
 <ion-col col-4 class="plans-options active">
   <div class="detail-point"></div>
  <div>
   <span class="name-plan">{{namePlan}}</span> <br>
   <ion-row>
      <span class="currency">{{currency}}</span>
      <h1>{{price}}</h1>
   </ion-row>
   <span class="timeDuration">{{timeDuration}}</span>
   <div class="div-discount" *ngIf="discount">
     <span class="discount">{{discount}}</span>
   </div>
  </div>
 </ion-col>
 <ion-col col-4 class="plans-options">
   <div class="detail-point"></div>
  <div>
   <span class="name-plan">{{namePlan}}</span> <br>
   <ion-row>
      <span class="currency">{{currency}}</span>
      <h1>{{price}}</h1>
   </ion-row>
   <span class="timeDuration">{{timeDuration}}</span>
   <div class="div-discount" *ngIf="discount">
     <span class="discount">{{discount}}</span>
   </div>
  </div>
 </ion-col>
 <ion-col col-4 class="plans-options">
  <div class="detail-point"></div>
  <div>
   <span class="name-plan">{{namePlan}}</span> <br>
   <ion-row>
      <span class="currency">{{currency}}</span>
      <h1>{{price}}</h1>
   </ion-row>
   <span class="timeDuration">{{timeDuration}}</span>
   <div class="div-discount" *ngIf="discount">
     <span class="discount">{{discount}}</span>
   </div>
  </div>
 </ion-col>
</ion-row>

MEU CSS

    .active {
  background-color: #1fb49c;
  color: white;
}
.plans-options {
  height: 95px;
  page-price {
    .name-plan {
      text-align: center;
      font-size: .7em;
    }

    ion-row {
      justify-content: center;
      margin-top: 5px;
      margin-bottom: -5px;
      .currency {
        font-size: .5em;
        margin-right: 2px;
        margin-top: 5px;
      }
      h1 {
        font-size: 1.4em;
        margin: 0 !important;
        font-weight: 600;
      }
    }
    .timeDuration {
      font-size: .5em;
    }
    .div-discount {
      margin-top: 5px;
      .discount {
        background-color: #afafaf;
        font-size: 0.5em;
        padding: 4px 10px 4px 10px;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        border-top-left-radius: 15px;
        color: black;
        border-top-right-radius: 15px;
      }
    }
  }
}

.plans-options {
  &.active {
    .detail-point {
      height: 25px;
      width: 25px;
      border-radius: 50%;
      background-color: red;
    }
  }
}
3
  • Já tentou alguma coisa? Seria interessante você adicionar o HTML que gera estes elementos para que seja reproduzível nas respostas.
    – Woss
    24/08/2018 às 12:43
  • @AndersonCarlosWoss Esta adicionado, talvez não entenda um pouco as tags diferenciadas, porém ela produz para mim a mesma questão que uma div. Este código é mobile (ionic 3) 24/08/2018 às 12:49
  • Consegui resolver de uma forma não ideal, que é fazendo uma div e colocando a cor da bordar de branco, porém não é o ideal pois se eu alterar a cor do fundo irá ficar desconecto. 24/08/2018 às 12:51

1 Resposta 1

2

Pode utilizar a mesma técnica dessa resposta e usar um checkbox como controlador de qual item está selecionado. A questão de colocar a bolinha no canto superior, basta setar o elemento pai com posição relativa e a "bolinha", com posição absoluta de 2% do topo/esquerda:

input[type=checkbox]{
  display: none
}

div {
  height: 150px;
  width: 150px;
}

div,
label {
  align-items: center;
  display: inline-flex;
  justify-content: center
}

label {
  font-size: 2em;
  background: #ccc;
  color: #333;
  width: 100%;
  height: 100%;
  position: relative
}

input[type=checkbox]:checked ~ label {
  background: #1fb49c;
  color: #fff
}

input[type=checkbox]:checked ~ label::before {
  display: block;
  position: absolute;
  top: 2%;
  left: 2%;
  content: '😊'
}
<div>
  <input id='item-001' type='checkbox'>
  <label for='item-001'>22.55</label>
</div>
<div>
  <input id='item-002' type='checkbox'>
  <label for='item-002'>212.20</label>
</div>
<div>
  <input id='item-003' type='checkbox'>
  <label for='item-003'>232.15</label>
</div>

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .