Remove unused styles and other cleanup (#4963)

- Removes unused styles - Improves formatting and spacing - Moves some code to proper locations - Removes now unnecessary files Preparation to make future work towards #4164 easier. Has the added benefit of reducing final CSS size a bit.
dart-lang · Jun 9, 2023 · 6fb8091 · 6fb8091
1 parent 4666246
commit 6fb8091
Show file tree

Hide file tree

Showing 19 changed files with 462 additions and 703 deletions.
diff --git a/src/_sass/README.md b/src/_sass/README.md
diff --git a/src/_sass/_books.scss b/src/_sass/_books.scss
@@ -1,12 +1,18 @@
 .book-img-with-details {
   margin-bottom: 1.5rem;
+
   img {
-    @include media-breakpoint-down(sm) { max-width: 200px; }
+    @include media-breakpoint-down(sm) {
+      max-width: 200px;
+    }
     width: 100%;
   }
+
   .details {
     .title {
-      @include media-breakpoint-up(sm) { margin-top: 0; }
+      @include media-breakpoint-up(sm) {
+        margin-top: 0;
+      }
       margin-bottom: 0;
     }
   }

diff --git a/src/_sass/_dartvm.scss b/src/_sass/_dartvm.scss
@@ -4,9 +4,10 @@
   tbody {
     tr {
       @include transition();
+
       &.hidden {
-        display:none;
+        display: none;
       }
     }
   }
-}
+}
diff --git a/src/_sass/_dash.scss b/src/_sass/_dash.scss
@@ -41,16 +41,19 @@ $dash-dartpad-border: #293542;
     flex-direction: column;
     align-items: center;
     margin-top: 17px;
+
     > button {
       display: flex;
       flex-direction: row;
       text-decoration: none;
       align-items: center;
       color: $site-color-card-link;
+
       &:hover {
         text-decoration: none;
         color: darken($site-color-card-link, 20%);
       }
+
       > i {
         margin-right: 8px;
       }
@@ -63,8 +66,8 @@ $dash-dartpad-border: #293542;
 
     @include media-breakpoint-down(md) {
       font-size: 17px;
-      margin-left:30px;
-      margin-right:30px;
+      margin-left: 30px;
+      margin-right: 30px;
     }
   }
 
@@ -75,12 +78,13 @@ $dash-dartpad-border: #293542;
 
     @include media-breakpoint-down(md) {
       font-size: 14px;
-      margin-left:30px;
-      margin-right:30px;
+      margin-left: 30px;
+      margin-right: 30px;
     }
 
     a {
       color: $dash-dark-grey;
+
       &:hover, &:focus, &:active {
         color: $white-base;
       }
@@ -89,7 +93,7 @@ $dash-dartpad-border: #293542;
 
   .made-by {
     width: 180px;
-    margin-top:27px;
+    margin-top: 27px;
     opacity: 0.5;
   }
 }
@@ -121,12 +125,14 @@ $dash-dartpad-border: #293542;
       width: 225px;
     }
   }
+
   .feature-title {
     font-size: 28px;
     color: $dash-off-white;
     margin-top: 25px;
     margin-bottom: 20px;
     line-height: 33px;
+
     @include media-breakpoint-down(md) {
       font-size: 22px;
     }
@@ -154,7 +160,7 @@ $dash-dartpad-border: #293542;
   a, button {
     color: $dash-dark-black;
 
-    &:focus{
+    &:focus {
       outline: $dash-highlight auto 2px;
     }
   }
@@ -166,14 +172,16 @@ $dash-dartpad-border: #293542;
     .content-container {
       padding: $dash-info-padding;
       max-width: $dash-info-size;
+
       @include media-breakpoint-down(md) {
         position: relative;
         left: 0;
         top: 0;
         margin: 20px auto 0;
         transform: none !important;
-        padding:20px;
+        padding: 20px;
       }
+
       @include media-breakpoint-down(sm) {
         width: 100%;
       }
@@ -195,6 +203,7 @@ $dash-dartpad-border: #293542;
       margin-bottom: 34px;
       line-height: 1.2;
       color: $dash-dark-black;
+
       @include media-breakpoint-down(md) {
         font-size: 24px;
       }
@@ -215,7 +224,7 @@ $dash-dartpad-border: #293542;
           height: 25px;
           background-color: $dash-highlight;
         }
-      
+
         a, button {
           color: $dash-highlight;
         }
@@ -228,6 +237,7 @@ $dash-dartpad-border: #293542;
       ul li {
         margin-bottom: 10px;
         list-style: none;
+
         &:focus {
           outline: none;
         }
@@ -239,20 +249,20 @@ $dash-dartpad-border: #293542;
     }
   }
 
-  .animated-bullet{
-    background-color: $dark-darker-black; 
+  .animated-bullet {
+    background-color: $dark-darker-black;
     height: 10px;
     width: 5px;
     margin-top: 5px;
     transition: height 0.5s, background-color 0.5s;
   }
 
-  .bullet-container{
-    float: left; 
+  .bullet-container {
+    float: left;
     margin-right: 10px;
   }
 
-  .bullet-text{
+  .bullet-text {
     margin-left: 20px;
   }
 
@@ -268,13 +278,13 @@ $dash-dartpad-border: #293542;
       max-height: $dash-row-height;
     }
   }
-
 }
 
 .dash-try-dart {
   background-color: $dash-off-black;
   padding: 40px 80px !important;
   height: 745px;
+
   .title {
     color: $dash-off-white;
     font-size: 43px;
@@ -292,9 +302,10 @@ $dash-dartpad-border: #293542;
   width: 100%;
   max-width: $dash-max-width;
   margin-bottom: -10px;
+
   @include media-breakpoint-down(md) {
-    padding-top:30px;
-    padding-bottom:30px;
+    padding-top: 30px;
+    padding-bottom: 30px;
   }
 }
 
@@ -330,9 +341,11 @@ $dash-dartpad-border: #293542;
   select {
     margin: 8px 0 8px 0;
     border-radius: 4px;
+
     &:focus, &:active {
       outline: none;
-      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .08), 0 0 0 0.2rem rgba(255, 255, 255, 0.5)
+      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .08),
+      0 0 0 0.2rem rgba(255, 255, 255, 0.5);
     }
   }
 
@@ -356,7 +369,7 @@ $dash-dartpad-border: #293542;
 .banner {
   background-color: $dash_callout;
 
-  .banner__text {
+  &__text {
     color: white;
 
     a {
@@ -381,13 +394,13 @@ $dash-dartpad-border: #293542;
     text-decoration: underline;
   }
 
-  .selector{
+  .selector {
     margin-left: -30px;
   }
 }
 
-.nav-link{
-  &:focus{
+.nav-link {
+  &:focus {
     outline: $dash-highlight auto 2px;
   }
 }

diff --git a/src/_sass/_os-tabs.scss b/src/_sass/_os-tabs.scss
@@ -1,5 +1,3 @@
-// Copied from site-webdev/src/_assets/stylesheets/main.scss
-
 $tab-accent-color: $brand-primary;
 
 ul.tabs__top-bar {
@@ -16,18 +14,18 @@ ul.tabs__top-bar li {
   cursor: pointer;
 }
 
-ul.tabs__top-bar li.current{
+ul.tabs__top-bar li.current {
   background: $tab-accent-color;
   color: $white-base;
 }
 
-.tabs__content{
+.tabs__content {
   display: none;
   border: 2px solid $tab-accent-color;
   padding: 15px;
   margin-bottom: 15px;
 }
 
-.tabs__content.current{
+.tabs__content.current {
   display: inherit;
 }