@rypen-dev/shared-components 5.0.5 → 5.0.7

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

package/scss/_variables.scss

@@ -143,6 +143,7 @@ $checkbox-image: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGlu
 $checkbox-image-disabled: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIiB2aWV3Qm94PSIwIDAgMzAgMzAiPg0KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlPSIjZGNkNmU4Ij4NCiAgICAgICAgPHBhdGggc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjMiIGQ9Ik04IDE3bDUgNSA5LTEzIi8+DQogICAgPC9nPg0KPC9zdmc+DQo=" !default;
 $checkbox-image-secondary: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiB2aWV3Qm94PSIwIDAgMzAgMzAiPg0KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlPSIjYTZkNmQ2Ij4NCiAgICAgICAgPHBhdGggc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjMiIGQ9Ik04IDE3bDUgNSA5LTEzIi8+DQogICAgPC9nPg0KPC9zdmc+DQo=" !default;
 $checkbox-image-warning: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDMwIDMwIj4NCiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI2ZmYjUzYiI+DQogICAgICAgIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzIiBkPSJNOCAxN2w1IDUgOS0xMyIvPg0KICAgIDwvZz4NCjwvc3ZnPg0K" !default;
+$checkbox-image-success-alt: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDMwIDMwIj4NCiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iIzNBOEE4MSI+DQogICAgICAgIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzIiBkPSJNOCAxN2w1IDUgOS0xMyIvPg0KICAgIDwvZz4NCjwvc3ZnPg0K" !default;
 
 // Fonts
 $body-font-family: 'Open Sans', sans-serif !default;

package/scss/partials/_forms.scss

@@ -192,6 +192,26 @@ select {
         }
     }
 
+    &.success-alt {
+        label {
+            &::before {
+                border-color: $success-alt;
+            }
+        }
+
+        input:checked + label::after {
+            background-image: url($checkbox-image-success-alt);
+        }
+
+        input:focus + label::before {
+            border-color: $primary;
+        }
+
+        &:not(.plain-label) label {
+            color: $success-alt;
+        }
+    }
+
     &.warning {
         label {
             &::before {

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/_typography.scss

@@ -250,6 +250,22 @@ h5 {
             margin-bottom: 10px;
             padding-bottom: 12px;
         }
+
+        &.color-secondary {
+            color: $secondary;
+        }
+
+        &.color-secondary-alt {
+            color: $secondary-alt;
+        }
+
+        &.color-success-alt {
+            color: $success-alt;
+        }
+
+        &.color-warning {
+            color: $warning;
+        }
     }
 
     &.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;
@@ -821,9 +811,5 @@ a.color-callout {
     font-weight: 600;
 }
 
-.strike {
-    text-decoration: line-through;
-}
-
 @import './partials/proposalsgallery';
 @import './partials/proposalsmodals';

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;
+            }
+        }
+    }
+}