From 7d332ea938e94ebe2e9a71055538f9425768d3f0 Mon Sep 17 00:00:00 2001
From: Atanas Angelov <atanas.angelov.dev@gmail.com>
Date: Sat, 27 Oct 2018 22:08:28 +0300
Subject: [PATCH] sassify generic wordpress styles

---
 .../styles/theme/_generic.wordpress.scss      | 531 +++++++++---------
 1 file changed, 260 insertions(+), 271 deletions(-)

diff --git a/resources/styles/theme/_generic.wordpress.scss b/resources/styles/theme/_generic.wordpress.scss
index 014b7d0..63b409f 100644
--- a/resources/styles/theme/_generic.wordpress.scss
+++ b/resources/styles/theme/_generic.wordpress.scss
@@ -33,10 +33,10 @@
 
 .wp-caption {
   position: relative;
-}
 
-.wp-caption img {
-  width: 100%;
+  img {
+    width: 100%;
+  }
 }
 
 .wp-caption-text {
@@ -57,23 +57,23 @@
   position: relative;
   overflow: hidden;
   padding-bottom: 20px;
-}
 
-.gallery .wp-caption-text {
-  right: 10px;
-  bottom: 10px;
-  left: 10px;
-  text-align: left;
+  .wp-caption-text {
+    right: 10px;
+    bottom: 10px;
+    left: 10px;
+    text-align: left;
+  }
 }
 
 .gallery-item {
   float: left;
   position: relative;
   padding: 10px;
-}
 
-.gallery-item img {
-  width: 100%;
+  img {
+    width: 100%;
+  }
 }
 
 .gallery-columns-1 .gallery-item {
@@ -112,10 +112,12 @@
   width: 11.11%;
 }
 
-.gallery-columns-7 .wp-caption,
-.gallery-columns-8 .wp-caption,
-.gallery-columns-9 .wp-caption {
-  display: none;
+.gallery-columns-7,
+.gallery-columns-8,
+.gallery-columns-9 {
+  .wp-caption {
+    display: none;
+  }
 }
 
 /* ------------------------------------------------------------ *\
@@ -125,32 +127,32 @@
 .paging {
   padding: 0 0 20px;
   text-align: center;
-}
-
-.paging ul {
-  list-style: none outside none;
-}
 
-.paging ul,
-.paging li {
-  display: inline-block;
-  vertical-align: top;
-}
-
-.paging a {
-  display: inline-block;
-  padding: 4px 10px;
-  border: 1px solid #000;
-  margin: 0 2px;
-  text-decoration: none;
-  border-radius: 4px;
-}
-
-.paging .current a,
-.paging a:hover {
-  text-decoration: none;
-  background: #000;
-  color: #fff;
+  ul {
+    list-style: none outside none;
+  }
+
+  ul,
+  li {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  a {
+    display: inline-block;
+    padding: 4px 10px;
+    border: 1px solid #000;
+    margin: 0 2px;
+    text-decoration: none;
+    border-radius: 4px;
+  }
+
+  .current a,
+  a:hover {
+    text-decoration: none;
+    background: #000;
+    color: #fff;
+  }
 }
 
 .paging-label {
@@ -163,207 +165,203 @@
 
 .section-comments {
   padding-top: 15px;
-}
-
-.section-comments a {
-  text-decoration: none;
-}
-
-.section-comments p {
-  padding-bottom: 18.2px;
-}
-
-.section-comments ol,
-.section-comments ul {
-  padding: 0;
-  margin: 0;
-  list-style: none outside none;
-}
-
-.section-comments h3 {
-  position: relative;
-  padding: 0 0 10px;
-}
-
-.section-comments h3 small {
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-
-.comments,
-.comments .children {
-  position: relative;
-}
-
-.comments .children:before,
-.comments .children:after {
-  content: '';
-  position: absolute;
-  display: block;
-}
-
-.comments .children:before {
-  top: 33px;
-  left: 23px;
-  width: 32px;
-  height: 27px;
-  border-left: 8px solid #c3c3c3;
-  border-bottom: 8px solid #c3c3c3;
-  border-radius: 0 0 0 8px;
-}
-
-.comments .children:after {
-  top: -5px;
-  left: 8px;
-  border: 20px solid transparent;
-  border-width: 20px 19px;
-  border-bottom-color: #c3c3c3;
-}
-
-.comments .comment {
-  position: relative;
-  border-top: 1px dashed #363636;
-}
-
-.comments .children {
-  padding-left: 70px;
-}
-
-.comments .avatar {
-  position: absolute;
-  top: 28px;
-  left: 0;
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  border: 1px solid #ccc;
-}
 
-.comments .says {
-  padding-left: 5px;
-}
-
-.comments .moderation-notice {
-  display: inline-block;
-  margin: 3px 0 8px;
-  color: #999;
-}
-
-.comments .comment-entry {
-  position: relative;
-  padding: 30px 0 30px 65px;
-}
-
-.comments .comment-text p:last-child {
-  padding-bottom: 0;
-  margin-bottom: 0;
-}
-
-.comments .comment-meta {
-  padding-bottom: 12px;
-}
-
-.comments .comment-meta a {
-  color: #363636;
-}
-
-.comments .comment-reply {
-  padding-top: 10px;
-  text-align: right;
-}
-
-.comments .comment-reply a {
-  display: inline-block;
-  padding: 5px 10px;
-  background: #363636;
-  color: #fff;
-  border-radius: 6px;
-}
-
-.comments .comment-reply a:hover {
-  text-decoration: none;
-  opacity: .8;
+  a {
+    text-decoration: none;
+  }
+
+  p {
+    padding-bottom: 18.2px;
+  }
+
+  ol,
+  ul {
+    padding: 0;
+    margin: 0;
+    list-style: none outside none;
+  }
+
+
+  h3 {
+    position: relative;
+    padding: 0 0 10px;
+
+    small {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+  }
+}
+
+.comments {
+  &,
+  & .children {
+    position: relative;
+  }
+
+  .children {
+    padding-left: 70px;
+
+    &:before,
+    &:after {
+      content: '';
+      position: absolute;
+      display: block;
+    }
+
+    &:before {
+      top: 33px;
+      left: 23px;
+      width: 32px;
+      height: 27px;
+      border-left: 8px solid #c3c3c3;
+      border-bottom: 8px solid #c3c3c3;
+      border-radius: 0 0 0 8px;
+    }
+
+    &:after {
+      top: -5px;
+      left: 8px;
+      border: 20px solid transparent;
+      border-width: 20px 19px;
+      border-bottom-color: #c3c3c3;
+    }
+  }
+
+  .comment {
+    position: relative;
+    border-top: 1px dashed #363636;
+  }
+
+  .avatar {
+    position: absolute;
+    top: 28px;
+    left: 0;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    border: 1px solid #ccc;
+  }
+
+  .says {
+    padding-left: 5px;
+  }
+
+  .moderation-notice {
+    display: inline-block;
+    margin: 3px 0 8px;
+    color: #999;
+  }
+
+  .comment-entry {
+    position: relative;
+    padding: 30px 0 30px 65px;
+  }
+
+  .comment-text p:last-child {
+    padding-bottom: 0;
+    margin-bottom: 0;
+  }
+
+  .comment-meta {
+    padding-bottom: 12px;
+
+    a {
+      color: #363636;
+    }
+  }
+
+  .comment-reply {
+    padding-top: 10px;
+    text-align: right;
+
+    a {
+      display: inline-block;
+      padding: 5px 10px;
+      background: #363636;
+      color: #fff;
+      border-radius: 6px;
+
+      &:hover {
+        text-decoration: none;
+        opacity: .8;
+      }
+    }
+  }
 }
 
 .comment-respond {
   width: 100%;
   padding-top: 30px;
   border-top: 1px solid #363636;
-}
-
-.comment-respond h3 {
-  position: relative;
-}
 
-.comment-respond small {
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-
-.comment-respond label {
-  display: block;
-  padding-bottom: 4px;
-}
-
-.comment-respond input[type="text"],
-.comment-respond textarea {
-  display: block;
-  width: 80%;
-  padding: 10px;
-  border: 1px solid #ccc;
-  background: #f7f7f7;
-}
-
-.comment-respond textarea {
-  width: 100%;
-  height: 100px;
-}
-
-.comment-respond input[type="text"]:focus {
-  background-color: #fff;
-}
-
-.comment-respond input[type="text"]::-webkit-input-placeholder {
-  color: #777;
-}
-
-.comment-respond input[type="text"]::-moz-placeholder {
-  color: #777;
-}
-
-.comment-respond input[type="text"]:-ms-input-placeholder {
-  color: #777;
-}
-
-.comment-respond input[type="text"]::placeholder {
-  color: #777;
-}
-
-.comment-respond textarea {
-  width: 100%;
-}
-
-.comment-respond .required {
-  color: #e40000;
-}
-
-.comment-respond .comment-notes {
-  padding-top: 15px;
-}
-
-.comment-respond .form-submit input {
-  display: block;
-  width: 160px;
-  height: 40px;
-  border: 0;
-  font-size: 14px;
-  font-weight: bold;
-  color: #fff;
-  background: #363636;
-  cursor: pointer;
-  border-radius: 4px;
+  h3 {
+    position: relative;
+  }
+
+  small {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
+  label {
+    display: block;
+    padding-bottom: 4px;
+  }
+
+  input[type="text"],
+  input[type="email"],
+  input[type="url"],
+  textarea {
+    display: block;
+    width: 80%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    background: #f7f7f7;
+  }
+
+  textarea {
+    width: 100%;
+    height: 100px;
+  }
+
+  input[type="text"],
+  input[type="email"],
+  input[type="url"] {
+    &:focus {
+      background-color: #fff;
+    }
+
+    &::-webkit-input-placeholder,
+    &::-moz-placeholder,
+    &:-ms-input-placeholder,
+    &::placeholder {
+      color: #777;
+    }
+  }
+
+  .required {
+    color: #e40000;
+  }
+
+  .comment-notes {
+    padding-top: 15px;
+  }
+
+  .form-submit input {
+    display: block;
+    width: 160px;
+    height: 40px;
+    border: 0;
+    font-size: 14px;
+    font-weight: bold;
+    color: #fff;
+    background: #363636;
+    cursor: pointer;
+    border-radius: 4px;
+  }
 }
 
 .nocomments {
@@ -379,42 +377,33 @@
 .search-form {
   position: relative;
   overflow: hidden;
-}
-
-.search-form .search-form__field {
-  display: block;
-  width: 100%;
-  padding: 10px;
-  border: 1px solid #ccc;
-  background: #f7f7f7;
-}
-
-.search-form .search-form__field:focus {
-  background-color: #fff;
-}
-
-.search-form .search-form__field::-webkit-input-placeholder {
-  color: #777;
-}
 
-.search-form .search-form__field::-moz-placeholder {
-  color: #777;
-}
-
-.search-form .search-form__field:-ms-input-placeholder {
-  color: #777;
-}
-
-.search-form .search-form__field::placeholder {
-  color: #777;
-}
-
-.search-form .screen-reader-text {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 0;
-  opacity: 0.5;
-  visibility: hidden;
+  .search-form__field {
+    display: block;
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    background: #f7f7f7;
+
+    &:focus {
+      background-color: #fff;
+    }
+
+    &::-webkit-input-placeholder,
+    &::-moz-placeholder,
+    &:-ms-input-placeholder,
+    &::placeholder {
+      color: #777;
+    }
+  }
+
+  .screen-reader-text {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 0;
+    opacity: 0.5;
+    visibility: hidden;
+  }
 }