From 87a548a2980c5a0c069724d25b656c1309b52e56 Mon Sep 17 00:00:00 2001
From: Amaia Castro <amaia@amaiac.net>
Date: Tue, 10 Jan 2017 18:23:02 +0100
Subject: [PATCH] Adjust panel widths to maintain the same width for the center
 text

---
 .../stylesheets/legislation_process.scss      | 364 +++++++++---------
 1 file changed, 182 insertions(+), 182 deletions(-)

diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss
index 245ea0a7f..d5ab74130 100644
--- a/app/assets/stylesheets/legislation_process.scss
+++ b/app/assets/stylesheets/legislation_process.scss
@@ -38,21 +38,21 @@
 // -----------------
 .legislation-hero {
   padding-top: 1.5rem;
-  
+
   @include breakpoint(medium) {
     padding-top: 3.5rem;
   }
-  
+
   h4 {
     color: #878787;
     text-transform: uppercase;
     font-weight: 400;
   }
-  
+
   ul {
     list-style: none;
     margin-left: 0;
-    
+
     li:before {
       vertical-align: text-bottom;
       padding-right: 0.5rem;
@@ -60,25 +60,25 @@
       color: #8AA8BE;
     }
   }
-  
+
   #debate-info {
     display: none;
     margin-top: 1rem;
-    
+
     @include breakpoint(medium) {
       margin-bottom: 2rem;
     }
-        
+
     .debate-info-wrapper {
 
       h2 {
         font-size: $lead-font-size;
-        
+
         @include breakpoint(medium) {
           float: left;
         }
       }
-      
+
       p {
         @include breakpoint(medium) {
           margin-left: 25%;
@@ -86,7 +86,7 @@
       }
     }
   }
-  
+
   .half-gradient {
     /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e6e6e6+0,e6e6e6+50,ffffff+50 */
     background: #e6e6e6; /* Old browsers */
@@ -95,45 +95,45 @@
     background: linear-gradient(to bottom, #e6e6e6 0%,#e6e6e6 50%,#ffffff 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e6e6', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
   }
-  
+
   .center .button {
     background: #004A83;
     margin-bottom: 0;
   }
-  
+
   .headline {
     margin-bottom: 1rem;
-    
+
     @include breakpoint(medium) {
       margin-bottom: 4rem;
-      
+
     }
   }
-  
+
   .description {
     margin-bottom: 1rem;
-    
+
     @include breakpoint(medium) {
         margin-bottom: 0;
     }
   }
-  
+
   .button-subscribe {
     margin-top: 1rem;
-    
+
     h3 {
       margin-bottom: 0;
     }
-    
+
     p {
       margin-bottom: 0;
       font-size: $small-font-size;
     }
-    
+
     &:hover h3 {
       color: white;
     }
-    
+
     @include breakpoint(medium) {
       padding: 0.5em 1em;
       margin-top: 3rem;
@@ -145,59 +145,59 @@
 // -----------------
 .legislation-process-categories {
   position: relative;
-  
+
   svg {
     position: absolute;
     top: 1.5rem;
     left: 0;
-    
+
     @include breakpoint(medium) {
       transform: rotate(-8deg);
       top: 0.75rem;
     }
   }
-  
+
   ul {
     padding-top: 4rem;
     list-style: none;
     margin-left: 0;
     padding-left: 0;
     border-bottom: 1px solid $medium-gray;
-    
+
     li {
       cursor: pointer;
       margin-left: 0;
       display: inline-block;
       margin-bottom: 1rem;
       margin-right: 1rem;
-      
+
       @media (min-width: 950px) {
         margin-right: 0;
         margin-left: 3rem;
         margin-bottom: 0;
       }
-      
+
       a,
       h4 {
         color: #6D6D6D;
         margin-bottom: 0;
       }
-      
+
       a {
         &:hover, &:active {
           text-decoration: none;
         }
-        
+
         p {
           margin-bottom: 0;
-          
+
           @include breakpoint(medium) {
             margin-bottom: 1rem;
           }
         }
       }
     }
-    
+
     .active {
       border-bottom: 2px solid $brand;
     }
@@ -208,42 +208,42 @@
 // -----------------
 .debate-chooser {
   padding: 2rem 1rem;
-  
+
   @include breakpoint(medium) {
     .debate-chooser {
       padding: 2rem 3rem;
     }
   }
-  
+
   .debate-block {
     margin-bottom: 2.5rem;
-    
+
     .debate-type {
       text-transform: uppercase;
       color: #178DCC;
       font-weight: 700;
       font-size: $small-font-size;
-      
+
       .icon-debates {
         margin-left: 0.2rem;
       }
     }
-    
+
     .debate-title a {
       color: $brand;
     }
-    
+
     .debate-meta,
     .debate-meta a {
       font-size: $small-font-size;
       color: #6D6D6D;
-      
+
       .icon-comments {
         margin-right: 0.2rem;
       }
     }
   }
-  
+
   .debate-info {
     padding: 1rem;
     background: #F4F4F4;
@@ -253,18 +253,18 @@
 // 05. Debate quiz
 // -----------------
 .debate-quiz {
-  
+
   .quiz-header {
     margin-bottom: 2rem;
-    
+
     .quiz-title, .quiz-next {
       padding: 1rem;
       height: 6rem;
     }
-    
+
     .quiz-title {
       background: #E5ECF2;
-      
+
       .quiz-header-title {
         margin-bottom: 0;
         text-transform: uppercase;
@@ -273,21 +273,21 @@
         font-size: $small-font-size;
       }
     }
-    
+
     h4 a {
       color: $brand;
     }
-    
+
     h4 a:hover {
       text-decoration: none;
     }
-    
+
     .quiz-next-link {
-      
+
       &:hover, &:active {
         text-decoration: none;
       }
-      
+
       .quiz-next {
         background: #CCDBE5;
         font-weight: 700;
@@ -296,16 +296,16 @@
         text-align: right;
         text-transform: uppercase;
         transition: background 0.25s ease-out, background 0.25s ease-out;
-        
+
         .icon-angle-right {
           vertical-align: sub;
         }
-        
+
         &:hover, &:active {
           text-decoration: none;
           background: $brand;
           color: white;
-          
+
           .icon-angle-right {
             color: white;
           }
@@ -313,15 +313,15 @@
       }
     }
   }
-  
+
   .quiz-question {
     margin-bottom: 2rem;
   }
-  
+
   .debate-questions {
     position: relative;
     list-style: none;
-    
+
     .control {
       position: relative;
       display: inline-block;
@@ -333,27 +333,27 @@
       padding: 0.75rem 2.5rem;
       margin-right: 1.5rem;
     }
-    
+
     .active {
       background: #CCDBE6;
       border: none;
     }
-    
+
     .control input {
       position: absolute;
       opacity: 0;
       z-index: -1;
     }
-    
+
     .control input:checked ~ .control-indicator {
       background-color: $brand;
       border: none;
     }
-    
+
     .radio .control-indicator {
       border-radius: 50%;
     }
-    
+
     .control-indicator {
       position: absolute;
       top: 0.95rem;
@@ -380,14 +380,14 @@
   padding: 10rem 2rem 15rem 2rem;
   display: block;
   background: #F2F2F2;
-  
+
   button {
     height: 90px;
-    
+
     h3 {
       margin-bottom: 0;
     }
-    
+
     p {
       margin-bottom: 0;
       font-size: $small-font-size;
@@ -399,44 +399,44 @@
 // -----------------
 .legislation-allegation {
   padding-top: 1rem;
-  
+
   .headline {
     margin-bottom: 0;
   }
-  
+
   .button-circle {
     line-height: 0;
     padding: 0.5em;
     border-radius: 50%;
   }
-  
+
   .icon-checkmark-circle {
     font-size: 1.5rem;
     vertical-align: bottom;
     color: $text-medium;
     margin-right: 0.5rem;
   }
-  
+
   .button-subscribed {
     margin-top: 1rem;
     border: 1px solid #D1D1D1;
     background: #F2F2F2;
-    
+
     h3 {
       display: inline-block;
       color: $text;
       margin-bottom: 0;
     }
-    
+
     p {
       margin-bottom: 0;
       font-size: $small-font-size;
     }
-    
+
     &:hover h3 {
       color: $text;
     }
-    
+
     @include breakpoint(medium) {
       padding: 0.5em 1em;
     }
@@ -445,96 +445,96 @@
 
 .draft-panels {
   padding: 2rem 0;
-  
+
   .draft-chooser {
     margin-bottom: 2rem;
-    
+
     h3 {
       vertical-align: top;
       display: inline-block;
       font-weight: 400;
       margin-right: 0.5rem;
     }
-    
+
     span {
       margin-left: 0.75rem;
       font-style: italic;
       font-size: $small-font-size;
       color: $text-medium;
       vertical-align: top;
-      
+
       @include breakpoint(medium) {
         margin-left: 1rem;
       }
     }
-    
+
     .select-box {
       position: relative;
-      
+
       @include breakpoint(medium) {
         display: inline-block;
       }
-      
+
       select {
         margin-bottom: 0;
         display: block;
       }
-      
+
       span {
         vertical-align: inherit;
         font-style: normal;
-        
+
         a {
           text-decoration: underline;
           color: $text-medium
         }
       }
     }
-    
+
     .button {
       margin-top: 1rem;
-      
+
       @include breakpoint(medium) {
         margin-top: 0;
       }
     }
   }
-  
+
   .draft-allegation {
     @include breakpoint(medium) {
       display: flex;
       padding-left: 0.9375rem;
       padding-right: 0.9375rem;
     }
-    
+
     .calc-index {
       .draft-panel {
         cursor: pointer;
       }
-      
+
       .draft-index-rotated {
         display: none;
       }
     }
-    
+
     // Panel calcs for desktop
     @media screen and (min-width: 40em) {
       .calc-index {
         transition: all 0.25s;
-        width: calc(25% - 25px);
+        width: calc(35% - 25px);
       }
-      
+
       .calc-text {
         transition: all 0.25s;
-        width: calc(75% - 25px)
+        width: calc(65% - 25px)
       }
-      
+
       .calc-comments {
         transition: all 0.25s;
         cursor: pointer;
         background: #F2F2F2;
         width: 50px;
-        
+
         .draft-panel {
           .panel-title {
             display: none;
@@ -542,13 +542,13 @@
         }
       }
     }
-    
+
     .border-right {
       @include breakpoint(medium) {
         border-right: 1px solid $border;
       }
     }
-    
+
     .draft-panel {
       text-transform: uppercase;
       font-weight: 700;
@@ -556,11 +556,11 @@
       color: #696969;
       background: #F2F2F2;
       font-size: $small-font-size;
-      
+
       .icon-comments {
         margin-right: 0.25rem;
       }
-      
+
       .icon-banner {
         line-height: 0;
         color: $text-medium;
@@ -568,50 +568,50 @@
         margin-right: 0.25rem;
       }
     }
-    
+
     .draft-index {
       table {
         tbody {
           border: none;
-          
+
           tr {
             background: white;
-            
+
             td {
               padding: 0.25rem 1rem;
-              
+
               .icon-plus-square,
               .icon-minus-square {
                 color: $text-medium;
                 cursor: pointer;
                 vertical-align: sub;
               }
-              
+
               a {
                 color: $brand;
                 text-decoration: underline;
                 font-size: $small-font-size;
               }
             }
-            
+
             .collapse-all {
               padding: 1rem;
-              
+
               a {
                 color: $text-medium;
               }
-              
+
               .icon-plus-square,
               .icon-minus-square {
                 color: $text-medium;
               }
             }
           }
-          
+
           .child_group {
             td {
               padding: 0 1rem;
-              
+
               table {
                 margin-bottom: 0.5rem;
               }
@@ -620,64 +620,64 @@
         }
       }
     }
-    
+
     .draft-text {
       position: relative;
       padding: 1rem;
-      
+
       @include breakpoint(medium) {
         padding: 2rem 2rem 2rem 3rem;
       };
-      
+
       h2 {
         font-weight: 400;
         margin-bottom: 2rem;
         margin-top: 2rem;
       }
-      
+
       h3 {
         font-weight: 400;
         margin-bottom: 1rem;
       }
-      
+
       .anchor::before {
         display: none;
         content: "#";
         color: $text-medium;
         position: absolute;
         left: 0;
-        
+
         @include breakpoint(medium) {
           left: 1.5rem;
         }
       }
-      
+
       a {
         color: $text;
-        
+
         &:hover,
         &:active,
         &:focus {
           text-decoration: none;
-          
+
           h3 {
             color: $text;
           }
-          
+
           .anchor::before {
             display: block;
           }
         }
       }
     }
-    
+
     .calc-comments {
       position: relative;
-      
+
       .comment-box {
         display: none;
       }
-    
+
       .draft-comments-rotated {
         @include breakpoint(medium) {
           font-size: $small-font-size;
@@ -692,16 +692,16 @@
           filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
         }
       }
-      
+
     }
   }
-  
+
   .comments-on {
     .calc-index {
       width: 50px;
       background: #F2F2F2;
       cursor: pointer;
-      
+
       .panel-title {
         display: none;
       }
@@ -709,7 +709,7 @@
       .draft-index {
         display: none;
       }
-      
+
       .draft-index-rotated {
         @include breakpoint(medium) {
           display: block;
@@ -723,18 +723,18 @@
           -ms-transform: rotate(-90deg);
           -o-transform: rotate(-90deg);
           filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-          
+
           .panel-title {
             display: block;
           }
         }
       }
     }
-    
+
     .calc-text {
       width: calc(65% - 25px);
       border-right: none;
-      
+
       .show-comments {
         width: 105%;
         background: #FAFAFA;
@@ -746,22 +746,22 @@
           margin-bottom: 0;
         }
       }
-      
+
     }
-    
+
     .calc-comments {
       background: white;
       cursor: auto;
       width: calc(35% - 25px);
-      
+
       .draft-panel {
         cursor: pointer;
       }
-      
+
       .draft-comments-rotated {
         display: none;
       }
-      
+
       .comment-box {
         width: 375px;
         padding: 1rem;
@@ -770,44 +770,44 @@
         display: block;
         position: absolute;
         top: 230px;
-        
+
         .button {
           font-size: $small-font-size;
           padding: 0.5em 1em;
         }
-        
+
         .publish-comment {
           float: right;
         }
-        
+
         .comment-header {
           color: #838383;
           padding-bottom: 0.5rem;
           margin-bottom: 1rem;
           border-bottom: 1px solid $border;
-          
+
           .comment-number {
             color: $text;
             display: inline-block;
           }
-          
+
           .icon-comment {
             margin-right: 0.5rem;
           }
-          
+
           a .icon-expand {
             color: #838383;
             font-size: $small-font-size;
             float: right;
           }
         }
-        
+
         .comment-input {
           padding-bottom: 4rem;
           margin-bottom: 1rem;
           margin-top: 1rem;
           border-bottom: 1px solid $border;
-          
+
           .comment-advice {
             border-top: 1px solid #D0D0D0;
             border-right: 1px solid #D0D0D0;
@@ -817,17 +817,17 @@
             display: inline-block;
             font-size: $small-font-size;
             background: #DFDFDF;
-            
+
             .icon-proposals {
               color: #838383;
             }
-            
+
             a {
                 color: #87A3B9;
                 text-decoration: underline;
               }
           }
-          
+
           textarea {
             border-radius: 0;
             box-shadow: none;
@@ -839,7 +839,7 @@
             height: 200px;
             margin-bottom: 0.5rem;
           }
-          
+
           .comment-actions {
             .cancel-comment {
               color: #87A3B9;
@@ -849,7 +849,7 @@
             }
           }
         }
-        
+
         .comment {
           border-bottom: 1px solid $border;
           padding-bottom: 0.75rem;
@@ -858,25 +858,25 @@
 
           .comment-text {
             margin-bottom: 0.5rem;
-            
+
             p {
               line-height: 1.5;
               font-size: $small-font-size;
-              
+
               &:last-child {
                 margin-bottom: 0.5rem;
               }
             }
           }
-          
+
           .comment-meta {
-            
+
             .comment-more-info {
               display: inline-block;
-              
+
               .comment-expand {
                 display: inline-block;
-                
+
                 &::after {
                   content: "|";
                   color: #838383;
@@ -884,36 +884,36 @@
               }
               .comment-replies {
                 display: inline-block;
-              }              
+              }
             }
-            
+
             .comment-votes {
               color: #838383;
               float: right;
               display: inline-block;
-              
+
               .comment-votes-number {
                 margin-right: 0.25rem;
                 display: inline-block;
-                
+
                 &::after {
                   margin-left: 0.25rem;
                   content: "|";
                 }
               }
-              
+
               .icon-like,
               .icon-unlike {
                 cursor: pointer;
                 color: #C7C7C7;
-                
+
                 &:hover,
                 &:active,
                 &:focus {
                   color: #838383;
                 }
               }
-              
+
               .icon-like {
                 margin-right: 0.25rem;
               }
@@ -921,11 +921,11 @@
           }
         }
       }
-      
+
       .comment-box:nth-child(4) {
         top: 838px;
       }
-      
+
       .comment-box:nth-child(5) {
         top: 2035px;
       }
@@ -933,12 +933,12 @@
       .draft-panel {
         background: #E5E5E5;
         border-left: 1px solid #D4D4D4;
-        
+
         .panel-title {
           display: inline-block;
         }
       }
-      
+
       .show-for-medium {
         .panel-title {
           display: none;
@@ -954,29 +954,29 @@
   ul {
     list-style: none;
     margin-left: 0;
-    
+
     li {
       margin-bottom: 1rem;
-      
+
       &::before {
         margin-right: 0.25rem;
         content: "—"
       }
-      
+
       .changes-link {
         display: block;
         margin-left: 1rem;
         font-size: $small-font-size;
-        
+
         @include breakpoint(medium) {
           display: inline-block;
         }
-        
+
         a {
           span {
             text-decoration: underline;
           }
-          
+
           .icon-external {
             text-decoration: none;
             color: #999999;
@@ -984,7 +984,7 @@
             vertical-align: sub;
             margin-left: 0.5rem;
           }
-          
+
           &:active,
           &:focus,
           &:hover {
@@ -999,11 +999,11 @@
 // 09. Legislation comments
 // -----------------
 .legislation-comments {
-  
+
   .pull-right {
     float: right;
   }
-  
+
   .comment-section {
     background: #FAFAFA;
     padding: 1rem;
@@ -1011,30 +1011,30 @@
     margin-top: 0.25rem;
     margin-bottom: 1rem;
   }
-  
+
   .comment {
     margin-bottom: 3rem;
-    
+
     a {
       span {
         text-decoration: underline;
       }
-      
+
       .icon-expand,
       .icon-comments {
         text-decoration: none;
         color: #999999;
         line-height: 0;
       }
-      
+
       .icon-expand {
         margin-left: 0.25rem;
       }
-      
+
       .icon-comments {
         margin-right: 0.25rem;
       }
-      
+
       &:active,
       &:focus,
       &:hover {
@@ -1047,11 +1047,11 @@
 // 10. Legislation draft comment
 // -----------------
 .legislation-comment {
-  
+
   .pull-right {
     float: right;
   }
-  
+
   .comment-section {
     background: #FAFAFA;
     padding: 1rem;
@@ -1059,30 +1059,30 @@
     margin-top: 0.25rem;
     margin-bottom: 1rem;
   }
-  
+
   .comment {
     margin-bottom: 3rem;
-    
+
     a {
       span {
         text-decoration: underline;
       }
-      
+
       .icon-expand,
       .icon-comments {
         text-decoration: none;
         color: #999999;
         line-height: 0;
       }
-      
+
       .icon-expand {
         margin-left: 0.25rem;
       }
-      
+
       .icon-comments {
         margin-right: 0.25rem;
       }
-      
+
       &:active,
       &:focus,
       &:hover {