Merge pull request #435 from basecamp/rework-css

Rework CSS class names
basecamp · Aug 14, 2017 · 177ec0a · 177ec0a
2 parents 19bc507 + aa0fc77
commit 177ec0a
Show file tree

Hide file tree

Showing 13 changed files with 322 additions and 359 deletions.
diff --git a/assets/trix/stylesheets/attachments.scss b/assets/trix/stylesheets/attachments.scss
@@ -11,7 +11,7 @@ trix-editor {
       box-shadow: 0 0 0 2px highlight;
     }
 
-    &.attachment.attachment-file {
+    &.attachment.attachment--file {
       box-shadow: 0 0 0 2px highlight;
       border-color: transparent;
     }
@@ -23,93 +23,88 @@ trix-editor {
     &::selection { background: none; }
   }
 
-
   .attachment {
     &:hover {
       cursor: default;
     }
+  }
 
-    &.attachment-preview {
-      .caption:hover {
-        cursor: text;
-      }
+  .attachment--preview {
+    .attachment__caption:hover {
+      cursor: text;
     }
+  }
 
-    button.remove {
-      cursor: pointer;
+  .attachment__progress {
+    position: absolute;
+    z-index: 1;
+    height: 20px;
+    top: calc(50% - 10px);
+    left: 5%;
+    width: 90%;
+    opacity: 0.9;
+  }
 
-      &.icon {
-        text-indent: -9999px;
-        display: block;
-        position: absolute;
-        z-index: 1;
-        padding: 0;
-        margin: 0;
-        top: -1.1em;
-        left: calc(50% - 0.8em);
-        width: 1.8em;
-        height: 1.8em;
-        line-height: 1.8em;
-        border-radius: 50%;
-        text-indent: -9999px;
-        background-color: #fff;
-        border: 2px solid highlight;
-        box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
+  .attachment__caption-editor {
+    display: inline-block;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    font-size: inherit;
+    font-family: inherit;
+    line-height: inherit;
+    color: inherit;
+    text-align: center;
+    vertical-align: top;
+    border: none;
+    outline: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+  }
 
-        &::before {
-          display: inline-block;
-          position: absolute;
-          top: 0.1em;
-          right: 0.1em;
-          bottom: 0.1em;
-          left: 0.1em;
-          opacity: 0.75;
-          content: "";
-          background-image: $icon-remove;
-          background-position: center;
-          background-repeat: no-repeat;
-          background-size: contain;
-        }
-      }
+  .attachment__remove {
+    cursor: pointer;
+  }
 
-      &:hover {
-        border-color: #333;
+  .attachment__remove--icon {
+    text-indent: -9999px;
+    display: block;
+    position: absolute;
+    z-index: 1;
+    padding: 0;
+    margin: 0;
+    top: -1.1em;
+    left: calc(50% - 0.8em);
+    width: 1.8em;
+    height: 1.8em;
+    line-height: 1.8em;
+    border-radius: 50%;
+    text-indent: -9999px;
+    background-color: #fff;
+    border: 2px solid highlight;
+    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
 
-        &::before {
-          opacity: 1;
-        }
-      }
+    &::before {
+      display: inline-block;
+      position: absolute;
+      top: 0.1em;
+      right: 0.1em;
+      bottom: 0.1em;
+      left: 0.1em;
+      opacity: 0.75;
+      content: "";
+      background-image: $icon-remove;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
     }
 
-    .caption {
-      &.caption-editing {
-        textarea {
-          display: inline-block;
-          width: 100%;
-          margin: 0;
-          padding: 0;
-          font-size: inherit;
-          font-family: inherit;
-          line-height: inherit;
-          color: inherit;
-          text-align: center;
-          vertical-align: top;
-          border: none;
-          outline: none;
-          -webkit-appearance: none;
-          -moz-appearance: none;
-        }
-      }
-    }
+    &:hover {
+      border-color: #333;
 
-    progress {
-      position: absolute;
-      z-index: 1;
-      height: 20px;
-      top: calc(50% - 10px);
-      left: 5%;
-      width: 90%;
-      opacity: 0.9;
+      &::before {
+        opacity: 1;
+      }
     }
   }
 }
diff --git a/assets/trix/stylesheets/content.scss b/assets/trix/stylesheets/content.scss
@@ -53,36 +53,36 @@
     max-width: 100%;
     margin: 0;
     padding: 0;
+  }
 
-    .caption {
-      padding: 0;
-      text-align: center;
+  .attachment__caption {
+    padding: 0;
+    text-align: center;
 
-      .name + .size {
-        &::before {
-          content: ' · ';
-        }
+    .attachment__name + .attachment__size {
+      &::before {
+        content: ' · ';
       }
     }
+  }
 
-    &.attachment-preview {
-      width: 100%;
-      text-align: center;
+  .attachment--preview {
+    width: 100%;
+    text-align: center;
 
-      .caption {
-        color: #666;
-        font-size: 0.9em;
-        line-height: 1.2;
-      }
+    .attachment__caption {
+      color: #666;
+      font-size: 0.9em;
+      line-height: 1.2;
     }
+  }
 
-    &.attachment-file {
-      color: #333;
-      line-height: 1;
-      margin: 0 2px 2px 0;
-      padding: 0.4em 1em;
-      border: 1px solid #bbb;
-      border-radius: 5px;
-    }
+  .attachment--file {
+    color: #333;
+    line-height: 1;
+    margin: 0 2px 2px 0;
+    padding: 0.4em 1em;
+    border: 1px solid #bbb;
+    border-radius: 5px;
   }
 }