@rypen-dev/shared-components 5.0.9 → 5.0.11

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@rypen-dev/shared-components",
 	"description": "Shared styles and Vuejs ui components for Rypen projects.",
-	"version": "5.0.9",
+	"version": "5.0.11",
 	"main": "./dist/index.js",
 	"scripts": {
 		"build": "webpack --config ./webpack.config.js",

package/scss/partials/_buttons.scss

@@ -214,7 +214,7 @@ $button-transition-time: 200ms;
 a.info {
     vertical-align: middle;
 
-    > span {
+    > span:not(.tooltip) {
         display: inline-block;
         background-color: $medium-gray;
         border-radius: 50%;
@@ -240,7 +240,7 @@ a.info {
     }
 
     @media print, screen and (min-width: map-get($breakpoints, medium)) {
-        > span {
+        > span:not(.tooltip) {
             width: 24px;
             height: 24px;
             line-height: 24px;

package/scss/partials/_layout.scss

@@ -287,6 +287,10 @@ hr {
         color: $dark-gray;
     }
 
+    &.no-top-space {
+        margin-top: 0;
+    }
+
     &.inline {
         li {
             display: flex;

package/scss/partials/_notifications.scss

@@ -78,6 +78,10 @@
         strong {
             color: $secondary-alt;
             font-weight: 600;
+
+            &.secondary {
+                color: $secondary;
+            }
         }
 
         a {
@@ -151,6 +155,10 @@
             &:first-child {
                 border-top: 0;
             }
+
+            &:last-child {
+                padding-bottom: 0;
+            }
         }
     }
 

package/scss/partials/_print.scss

@@ -0,0 +1,80 @@
+@media print {
+    @page {
+        size: 8.5in 11in;
+        margin: 0.5in;
+    }
+
+    html {
+        font-size: 12pt;
+    }
+
+    body {
+        width: 7.5in;
+    }
+
+    .body-container {
+        min-height: 0 !important;
+        padding-top: 0 !important;
+    }
+
+    .grid-container {
+        max-width: none !important;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+    }
+
+    hr {
+        max-width: none;
+    }
+
+    a[href]::after,
+    a[href]:visited::after {
+        content: '';
+    }
+
+    .print-double-space {
+        margin-bottom: 40px !important;
+    }
+    
+    .print-single-space {
+        margin-bottom: 20px !important;
+    }
+    
+    .print-half-space {
+        margin-bottom: 10px !important;
+    }
+    
+    .print-quarter-space {
+        margin-bottom: 5px !important;
+    }
+    
+    .print-no-space {
+        margin-bottom: 0 !important;
+    }
+
+    .print-double-space-top {
+        margin-top: 40px !important;
+    }
+    
+    .print-single-space-top {
+        margin-top: 20px !important;
+    }
+    
+    .print-half-space-top {
+        margin-top: 10px !important;
+    }
+    
+    .print-quarter-space-top {
+        margin-top: 5px !important;
+    }
+    
+    .print-no-space-top {
+        margin-top: 0 !important;
+    }
+
+    button,
+    .button,
+    .info-icon {
+        display: none !important;
+    }
+}

package/scss/partials/_typography.scss

@@ -224,6 +224,36 @@ h5 {
         margin-bottom: 40px;
     }
 
+    &.block-divider {
+        font-size: 0.9375rem;
+        line-height: 1.2;
+        font-weight: 500;
+        letter-spacing: 1px;
+        color: $text-gray;
+        margin-bottom: 15px;
+
+        &.inverse {
+            background-color: $text-gray;
+            color: $white;
+            padding: 0.25rem 0.5rem;
+        }
+    
+        &.lite {
+            font-size: 0.875rem;
+            padding-bottom: 0.25rem;
+            border-bottom: solid 2px $text-gray;
+            margin-bottom: 0.25rem;
+        }
+
+        a {
+            color: $divider-a-color;
+        }
+        
+        span {
+            border: 0;
+        }
+    }
+
     &.divider {
         font-size: 1rem;
         color: $primary;
@@ -251,6 +281,12 @@ h5 {
             padding-bottom: 12px;
         }
 
+        &.filled-in {
+            background-color: $medium-gray;
+            border-bottom: 0;
+            padding: 5px 10px;
+        }
+
         &.color-secondary {
             color: $secondary;
         }

package/scss/proposals.scss

@@ -281,6 +281,14 @@
                 margin-bottom: 0;
             }
 
+            &.top-card header {
+                .button,
+                a.callout,
+                a.arrow-link {
+                    margin-right: 30px;
+                }
+            }
+
             header {
                 margin: 0 -20px 20px;
                 padding: 0 20px 20px;

package/scss/proposalsshared.scss

@@ -5,14 +5,29 @@
 .project-footer {
     margin-top: 30px;
 
+    h5 {
+        font-size: 1.5rem;
+        margin-bottom: 1rem;
+    }
+
     .project-notes-container {
         padding-bottom: 20px;
         margin-bottom: 20px;
         border-bottom: 3px solid $medium-gray;
 
-        h5 {
-            font-size: 1.5rem;
-            margin-bottom: 1rem;
+        .content {
+            white-space: pre-wrap;
+        }
+
+        h4 {
+            font-family: $headline-font-family;
+            font-size: 0.875rem;
+            line-height: 1.2;
+            font-weight: $headline-weight-bold;
+            letter-spacing: 1px;
+            text-transform: uppercase;
+            margin: 20px 0 0;
+            color: $text-gray;
         }
     }
 
@@ -45,11 +60,6 @@
 }
 
 .project-totals {
-    h5 {
-        font-size: 1.5rem;
-        margin-bottom: 1rem;
-    }
-
     .discount-container {
         margin-bottom: 30px;
         background-color: $light-gray;

package/scss/styles.scss

@@ -63,4 +63,5 @@
 @import './partials/content';
 @import './partials/specsheet';
 @import './partials/notifications';
-@import './partials/progressbar';
+@import './partials/progressbar';
+@import './partials/print';