تكليفات الدروس من [ 11 ] إلى [ 15 ]

.element {
  &:before {
    @include arrow("top");
  }
}

// Output

.element:before {
  content: "";
  position: absolute;
  border: 20px solid transparent;
  left: 50%;
  transform: translateX(-50%);
  top: -40px;
  border-bottom-color: red;
}

/////////////////////////////

.element {
  &:before {
    @include arrow("right");
  }
}

// Output

.element:before {
  content: "";
  position: absolute;
  border: 20px solid transparent;
  top: 50%;
  transform: translateY(-50%);
  right: -40px;
  border-left-color: red;
}

/////////////////////////////

.element {
  &:before {
    @include arrow("bottom");
  }
}

// Output

.element:before {
  content: "";
  position: absolute;
  border: 20px solid transparent;
  left: 50%;
  transform: translateX(-50%);
  bottom: -40px;
  border-top-color: red;
}

/////////////////////////////

.element {
  &:before {
    @include arrow("left");
  }
}

// Output

.element:before {
  content: "";
  position: absolute;
  border: 20px solid transparent;
  top: 50%;
  transform: translateY(-50%);
  left: -40px;
  border-right-color: red;
}

.col-1 {
  width: 6.25%;
}

.col-2 {
  width: 12.5%;
}

.col-3 {
  width: 18.75%;
}

.col-4 {
  width: 25%;
}

.col-5 {
  width: 31.25%;
}

.col-6 {
  width: 37.5%;
}

.col-7 {
  width: 43.75%;
}

.col-8 {
  width: 50%;
}

.col-9 {
  width: 56.25%;
}

.col-10 {
  width: 62.5%;
}

.col-11 {
  width: 68.75%;
}

.col-12 {
  width: 75%;
}

.col-13 {
  width: 81.25%;
}

.col-14 {
  width: 87.5%;
}

.col-15 {
  width: 93.75%;
}

.col-16 {
  width: 100%;
}

$names:
  "books" 20px red 18,
  "games" 30px green 18,
  "dvds" 20px blue;

// Output

.books {
  padding: 20px;
  font-size: 18px;
  border-bottom: 2px solid red;
  color: #444;
}

.games {
  padding: 30px;
  font-size: 18px;
  border-bottom: 2px solid green;
  color: #444;
}

.dvds {
  padding: 20px;
  font-size: 16px;
  border-bottom: 2px solid blue;
  color: #444;
}

$init: 1;

// Output

.circle-100 {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}
.circle-200 {
  width: 200px;
  height: 200px;
  border-radius: 100px;
}
.circle-300 {
  width: 300px;
  height: 300px;
  border-radius: 150px;
}
.circle-400 {
  width: 400px;
  height: 400px;
  border-radius: 200px;
}
.circle-500 {
  width: 500px;
  height: 500px;
  border-radius: 250px;
}

// Write Mixin Code Here

// Using
textarea {
  @include placeholder {
    color: #777;
  }
}

// Output
textarea.placeholder {
  color: #777;
}
textarea:-moz-placeholder {
  color: #777;
}
textarea::-moz-placeholder {
  color: #777;
}
textarea:-ms-input-placeholder {
  color: #777;
}
textarea::-webkit-input-placeholder {
  color: #777;
}

// Write Mixin Code Here

// Using
.box-one {
  @include flex-center(400px);
}
.box-two {
  @include flex-center;
}

// Output
.box-one {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400px;
}

.box-two {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400px;
}