@rypen-dev/shared-components 5.0.4 → 5.0.6

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.4",
+	"version": "5.0.6",
 	"main": "./dist/index.js",
 	"scripts": {
 		"build": "webpack --config ./webpack.config.js",

package/scss/partials/_layout.scss

@@ -341,4 +341,64 @@ hr {
             margin-bottom: 8px;
         }
     }
+}
+
+.switch-views {
+    text-align: center;
+
+    a {
+        display: inline-block;
+        font-family: $headline-font-family;
+        text-transform: uppercase;
+        font-weight: 500;
+        color: $secondary;
+        margin: 0 10px;
+
+        &:first-child {
+            margin-left: 0;
+        }
+
+        &:last-child {
+            margin-right: 0;
+        }
+
+        span {
+            display: inline-block;
+            border-bottom: solid 2px transparent;
+            padding: 3px 0;
+            margin-left: 3px;
+        }
+
+        i {
+            color: $tertiary;
+        }
+
+        &:hover,
+        &.active {
+            color: $primary !important;
+
+            span {
+                border-bottom-color: $primary;
+            }
+
+            i {
+                color: $primary;
+            }
+        }
+    }
+
+    @media (min-width: map-get($breakpoints, large)) {
+        a {
+            font-size: 1.125rem;
+            margin: 0 20px;
+        
+            span {
+                border-bottom-width: 3px;
+            }
+        
+            i {
+                font-size: 1.25rem;
+            }
+        }
+    }
 }

package/scss/partials/_modals.scss

@@ -154,7 +154,7 @@
 
     &.no-header {
         .modal-header {
-            margin: 0;
+            margin-bottom: 0;
 
             h3 {
                 display: none;

package/scss/partials/_typography.scss

@@ -238,6 +238,18 @@ h5 {
         &.tertiary-alt {
             border-bottom-color: $tertiary-alt;
         }
+
+        &.no-line {
+            border-bottom: 0;
+            padding-bottom: 5px;
+        }
+
+        &.lite {
+            border-bottom-width: 1px;
+            color: $headline-small-color;
+            margin-bottom: 10px;
+            padding-bottom: 12px;
+        }
     }
 
     &.card-style {

package/scss/proposals.scss

@@ -3,27 +3,6 @@
 /// <reference path="./vendor/foundation-settings" />
 
 // --> Originally from layout.scss
-.icon {
-    .color-target {
-        fill: $primary;
-        transition: fill 80ms ease-in;
-    }
-}
-
-.pill-container {
-    &:not(.text-right) {
-        .pill:first-child {
-            margin-left: 0;
-        }
-    }
-
-    &.text-right {
-        .pill:last-child {
-            margin-right: 0;
-        }
-    }
-}
-
 .pill.menu {
     &::before,
     &::after {
@@ -88,6 +67,7 @@
     letter-spacing: 1px;
     font-weight: 500;
     background-color: $white;
+    transition: border-color 200ms, color 200ms;
     z-index: 200;
 
     .mini-loader {
@@ -95,6 +75,7 @@
         top: -3px;
         margin-right: 5px;
         border-color: $success-alt;
+        transition: border-color 200ms;
     }
 
     &::after {
@@ -119,6 +100,19 @@
             background-color: fade-out($primary, 0.75);
         }
     }
+
+    &.error {
+        border-color: $alert;
+        color: $alert;
+    
+        .mini-loader {
+            border-color: $alert;
+        }
+    
+        &::after {
+            background-color: fade-out($alert, 0.75);
+        }
+    }
 }
 
 .button-with-count {
@@ -790,10 +784,6 @@
     }
 }
 
-.working-screen-container {
-    position: relative;
-}
-
 // --> Originally from typography.scss
 label {
     text-transform: none;

package/scss/proposalsshared.scss

@@ -0,0 +1,152 @@
+/// <reference path="./variables" />
+/// <reference path="./mixins" />
+/// <reference path="./vendor/foundation-settings" />
+
+.project-footer {
+    margin-top: 30px;
+
+    .project-notes-container {
+        padding-bottom: 20px;
+        margin-bottom: 20px;
+        border-bottom: 3px solid $medium-gray;
+
+        h5 {
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+        }
+    }
+
+    .project-totals-container {
+        margin-bottom: 30px;
+    }
+
+    @media (min-width: map-get($breakpoints, medium)) {
+        margin-top: 50px;
+        display: flex;
+        justify-content: space-between;
+    
+        .project-notes-container {
+            flex-grow: 1;
+            padding-right: 50px;
+            margin-right: 50px;
+            border-right: 3px solid $medium-gray;
+            border-bottom: 0;
+            padding-bottom: 0;
+            margin-bottom: 0;
+        }
+    
+        .project-totals-container {
+            flex-shrink: 0;
+            margin-left: auto;
+            margin-bottom: 0;
+            width: 450px;
+        }
+    }
+}
+
+.project-totals {
+    h5 {
+        font-size: 1.5rem;
+        margin-bottom: 1rem;
+    }
+
+    .discount-container {
+        margin-bottom: 30px;
+        background-color: $light-gray;
+        padding: 20px;
+        font-size: 0.9375rem;
+        color: $dark-gray;
+
+        h5 {
+            font-size: 1.1325rem;
+            letter-spacing: 1px;
+
+            &.inline {
+                display: inline-block;
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    .totals {
+        margin: 1rem 0;
+        font-size: 0.9375rem;
+        color: $dark-gray;
+
+        .row {
+            display: flex;
+            flex-wrap: nowrap;
+            justify-content: space-between;
+            align-items: flex-end;
+            margin-bottom: 12px;
+
+            .item-cell {
+                &.value {
+                    width: 150px;
+                }
+            }
+
+            &.warning-row {
+                display: block;
+                color: $warning;
+                text-align: center;
+                font-size: 1.0625rem;
+                font-weight: 600;
+                margin-top: 24px;
+            }
+        }
+    }
+}
+
+.proposal-group,
+.moodboard-group {
+    .group-name {
+        background-color: $medium-gray;
+        padding: 10px 15px;
+        font-weight: 400;
+        font-size: 1.125rem;
+        text-transform: uppercase;
+        font-family: $headline-font-family;
+        color: $secondary-alt;
+        margin-bottom: 8px;
+        position: relative;
+
+        span {
+            display: inline-block;
+        }
+
+        a {
+            display: block;
+            color: $secondary-alt;
+
+            i {
+                margin-left: 5px;
+            }
+        }
+
+        .actions {
+            position: absolute;
+            right: 15px;
+            top: 10px;
+            white-space: nowrap;
+
+            > div {
+                display: inline-block;
+            }
+        }
+
+        &.with-actions {
+            padding-right: 80px;
+        }
+    }
+
+    @media (min-width: map-get($breakpoints, medium)) {
+        .group-name {
+            font-size: 1.25rem;
+
+            a i {
+                margin-left: 10px;
+            }
+        }
+    }
+}