text stroke

by Richard Hunter

HTML

<div class="">
  <div class="node error">
    <div class="primary-label">Blister</div>
    <div class="secondary-label">Morning</div>
    <div class="link">
      <label>link</label>
      <input type="checkbox">
    </div>
  </div>
</div>

<div class="stroke">
  <div class="node error">
    <div class="primary-label">Blister</div>
    <div class="secondary-label">Morning</div>
    <div class="link">
      <label>link</label>
      <input type="checkbox">
    </div>
  </div>
</div>

<div class="background">
  <div class="node error">
    <div class="primary-label">Blister</div>
    <div class="secondary-label">Morning</div>
    <div class="link">
      <label>link</label>
      <input type="checkbox">
    </div>
  </div>
</div>

<div class="test-3">
  <div class="node error">
    <div class="primary-label">Blister</div>
    <div class="secondary-label">Morning</div>
    <div class="link">
      <label>link</label>
      <input type="checkbox">
    </div>
  </div>
</div>

<div class="test-4">
  <div class="node error">
    <div class="primary-label">Blister</div>
    <div class="secondary-label">Morning</div>
    <div class="link">
      <label>link</label>
      <input type="checkbox">
    </div>
  </div>
</div>

SCSS

$green: #66bb6a;

.node {
  padding: 10px;
  background: $green;
  font-family: arial;
  width: 100px;
  margin: 10px;
  color: #d32f2f;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.primary-label {
  font-size: 14px;
  font-weight: bold;
}

.secondary-label,
.link {
  font-size: 12px;
}

.link {
  display: flex;
  align-items: center;
}

.buttons {
  display: flex;
}

.stroke {

  .error .primary-label,
  .error .secondary-label,
  .error .link {
    color: red;
    -webkit-text-stroke-width: 0.7px;
    -webkit-text-stroke-color: white;
  }
}

.background {

  .error .primary-label,
  .error .secondary-label,
  .error .link {
    background: white;
    margin: 2px;
    padding: 2px 4px;
    border-radius: 4px;

  }
}

.test-3 {
  .node {
    box-shadow: 0 0 0 2px #d32f2f;
  }

  .error .primary-label,
  .error .secondary-label,
  .error .link {

color: black;

  }

}

.test-4 {
  .node {
    background: transparent;
    border: solid 1px grey;
    box-shadow: 0 0 1px 4px $green inset;
  }
  
}