iran-vehicle-plate/dist/iran-vehicle-plate.css

This component provide ability to show iran license plate. for now it only support basic template. and it is provide new feature called shadow-root, and intended to be used on pages without use of any framework and be used with pure or any supporting appl

.iran-vehicle-plate {
  margin: 0 auto;
  min-width: 7.8em;
  display: inline-block;
  border-radius: 0.2em;
  border: 0.08em solid #333;
  font-family: "Markazi Text";
  height: 1.2em;
  line-height: 1.1em;
  background-color: #ddd;
  text-align: center;
  color: #282f25;
  box-shadow: inset 0.05em 0.05em 0.1em rgba(0, 0, 0, 0.3), inset -0.05em -0.05em 0.1em #ffffff, 0.05em 0.05em 0.1em rgba(0, 0, 0, 0.3);
}
.iran-vehicle-plate > .blue-column {
  width: 0.7em;
  height: inherit;
  float: left;
  background-color: #042591;
  position: relative;
}
.iran-vehicle-plate > .blue-column > .flag {
  margin: 0.1em;
}
.iran-vehicle-plate > .blue-column > .flag :nth-child(1) {
  height: 0.1em;
  background-color: green;
}
.iran-vehicle-plate > .blue-column > .flag :nth-child(2) {
  height: 0.1em;
  background-color: #fff;
}
.iran-vehicle-plate > .blue-column > .flag :nth-child(3) {
  height: 0.1em;
  background-color: red;
}
.iran-vehicle-plate > .blue-column > .text {
  color: #ffffff;
  font-size: 0.2em;
  line-height: 1em;
  text-align: left;
  font-family: sans-serif;
  position: absolute;
  bottom: 0.5em;
  left: 0.5em;
}
.iran-vehicle-plate > span {
  margin: 0 0.1em;
  font-size: 1.3em;
  padding: 0.05em;
  display: inline-block;
  text-shadow: 0.02em 0.02em 0.03em rgba(0, 0, 0, 0.3), -0.03em -0.03em 0.02em #fff;
  float: left;
}
.iran-vehicle-plate > .alphabet-column {
  line-height: 0.5em;
  margin: 0;
}
.iran-vehicle-plate > .iran-column {
  width: 1.2em;
  text-align: center;
  float: right;
  border-left: 0.08em solid #333;
  height: inherit;
}
.iran-vehicle-plate > .iran-column > span {
  font-size: 0.3em;
  display: block;
  line-height: 1em;
}
.iran-vehicle-plate > .iran-column > strong {
  font-weight: normal;
  font-size: 1.1em;
  line-height: 0.9em;
  text-shadow: 0.03em 0.03em 0.03em rgba(0, 0, 0, 0.3), -0.04em -0.04em 0.02em #fff;
}