Merge efffe9c into 7a723d1

liqd · Jul 25, 2019 · 9d24285 · 9d24285
2 parents 7a723d1 + efffe9c
commit 9d24285
Show file tree

Hide file tree

Showing 11 changed files with 63 additions and 39 deletions.
diff --git a/apps/cms/contacts/templates/a4_candy_cms_contacts/form_field.html b/apps/cms/contacts/templates/a4_candy_cms_contacts/form_field.html
@@ -3,7 +3,7 @@
 {% if field|is_checkbox %}
   <div class="form-group form-check">
     {% render_field field class="form-check-input" %}
-    <label class="form-check-label mb-1" for="{{ field.id }}">{{ field.help_text }} {% if field.required %} *{% endif %}</label>
+    <label class="form-check-label my-4" for="{{ field.id }}">{{ field.help_text }} {% if field.required %} *{% endif %}</label>
     {% if field.errors %}
       <div class="alert alert-danger pb-0" role="alert">
       {{ field.errors }}

diff --git a/apps/cms/contacts/templates/a4_candy_cms_contacts/form_page.html b/apps/cms/contacts/templates/a4_candy_cms_contacts/form_page.html
@@ -3,7 +3,7 @@
 
 {% block content %}
     <div class="l-wrapper">
-        <div class="contact_form p-3 py-md-5">
+        <div class="contact_form p-sm-3 py-md-5">
             <div class="l-center-6 text-center mb-md-5">
                 <h2>{{ page.form_page.header }}</h2>
                 <p>{{ page.form_page.intro|richtext }}</p>
@@ -17,7 +17,7 @@ <h2>{{ page.form_page.header }}</h2>
                           {% include 'a4_candy_cms_contacts/form_fields.html' with fields=page.form %}
                         </div>
                         <div class="u-spacer-bottom">
-                            <button class="btn btn--primary btn--full" type="submit">{% trans "Send" %}</button>
+                            <button class="btn btn--transparent btn--full" type="submit">{% trans "Send" %}</button>
                         </div>
                     </form>
                 </div>

diff --git a/apps/cms/pages/templates/a4_candy_cms_pages/blocks/col_background_cta_block.html b/apps/cms/pages/templates/a4_candy_cms_pages/blocks/col_background_cta_block.html
@@ -6,7 +6,7 @@
             {{ column.body }}
             {% if column.link %}
             <div class="block-col_cta-content">
-                <a href="{{ column.link }}" class="btn btn--full btn--transparent">{{ column.link_text }}</a>
+                <a href="{{ column.link }}" class="btn btn--full btn--transparent block-bg_btn-{{ forloop.counter }}">{{ column.link_text }}</a>
             </div>
         {% endif %}
         </div>

diff --git a/apps/cms/pages/templates/a4_candy_cms_pages/home_page.html b/apps/cms/pages/templates/a4_candy_cms_pages/home_page.html
@@ -18,7 +18,7 @@ <h1 class="homepage-header__teaser">{{ page.teaser|richtext }}</h1>
         <div>{{ page.body_streamfield }}</div>
 
         {% if page.form_page %}
-        <div class="contact_form p-3 py-md-5">
+        <div class="contact_form p-sm-3 py-md-5">
             <div class="l-center-6 text-center mb-md-5">
                 <h2>{{ page.form_page.header }}</h2>
                 <p>{{ page.form_page.intro|richtext }}</p>
@@ -32,7 +32,7 @@ <h2>{{ page.form_page.header }}</h2>
                         {% include 'a4_candy_cms_contacts/form_fields.html' with fields=page.form %}
                         </div>
                         <div class="u-spacer-bottom">
-                            <button class="btn btn--primary btn--full" type="submit">{% trans "Send" %}</button>
+                            <button class="btn btn--transparent btn--full" type="submit">{% trans "Send" %}</button>
                         </div>
                     </form>
                 </div>

diff --git a/apps/contrib/templates/a4_candy_contrib/component_library.html b/apps/contrib/templates/a4_candy_contrib/component_library.html
@@ -210,37 +210,41 @@ <h4>Lists</h4>
                      <li>Milk</li>
                     </ol>
 
-                    <ul class="colour-list">Colours:
-
-                    <li>Brand primary <span class="primary colour-block"></span></li>
-                    <li>Brand primary tint<span class="primary-tint colour-block"></span></li>
-                    <li>Brand-secondary<span class="secondary colour-block"></span></li>
-                    <li>Brand-success<span class="sucess colour-block"></span></li>
-                    <li>Brand-info<span class="info colour-block"></span></li>
-                    <li>Brand-warning<span class="warning colour-block"></span></li>
-                    <li>Brand-danger<span class="danger colour-block"></span></li>
-                    <li>Body-background<span class="background colour-block"></span></li>
-                    <li>Body-background-darker<span class="background-darker colour-block"></span></li>
-                    <li>Background-secondary<span class="bg-secondary colour-block"></span></li>
-                    <li>Background-tertiary<span class="bg-tertiary colour-block"></span></li>
-                    <li>Gray-light<span class="gray-light colour-block"></span></li>
-                    <li>Gray-lighter<span class="gray-lighter colour-block"></span></li>
-                    <li>Text-colour<span class="text-colour colour-block"></span></li>
-                    <li>Text-color-inverted<span class="text-inverted colour-block"></span></li>
-                    <li>Text-color-gray<span class="text-gray colour-block"></span></li>
-                    <li>Print-black<span class="print-black colour-block"></span></li>
-                    <li>Print-link<span class="print-link colour-block"></span></li>
-                    <li>Link-color<span class="link-color colour-block"></span></li>
-                    <li>link-hover-color<span class="link-hover-color colour-block"></span></li>
-                    <li>Border-color<span class="border colour-block"></span></li>
-                    <li>Input-border-color<span class="input-border colour-block"></span></li>
-                    <li>Feedback-color-accepted<span class="feedback-accepted colour-block"></span></li>
-                    <li>Feedback-color-rejected<span class="feedback-rejected colour-block"></span></li>
-                    <li>Feedback-color-consideration<span class="feedback-color-consideration colour-block"></span></li>
-                    <li>Feedback-color-consideration<span class="idea-remark-bg colour-block"></span></li>
-                    <li>Feedback-color-consideration<span class="idea-remark colour-block"></span></li>
-                  </ul>
-                </div>
+                    <span class="colour-list">Colours:</span>
+                    <div class="row">
+                        <div class="col-6">
+                            <li>Brand primary <span class="primary colour-block"></span></li>
+                            <li>Brand primary tint<span class="primary-tint colour-block"></span></li>
+                            <li>Brand-secondary<span class="secondary colour-block"></span></li>
+                            <li>Brand-success<span class="sucess colour-block"></span></li>
+                            <li>Brand-info<span class="info colour-block"></span></li>
+                            <li>Brand-warning<span class="warning colour-block"></span></li>
+                            <li>Brand-danger<span class="danger colour-block"></span></li>
+                            <li>Body-background<span class="background colour-block"></span></li>
+                            <li>Body-background-darker<span class="background-darker colour-block"></span></li>
+                            <li>Background-secondary<span class="bg-secondary colour-block"></span></li>
+                            <li>Background-tertiary<span class="bg-tertiary colour-block"></span></li>
+                            <li>Gray-light<span class="gray-light colour-block"></span></li>
+                            <li>Gray-lighter<span class="gray-lighter colour-block"></span></li>
+                            <li>Gray-lightest<span class="gray-lightest colour-block"></span></li>
+                        </div>
+                        <div class="col-6">
+                            <li>Text-colour<span class="text-colour colour-block"></span></li>
+                            <li>Text-color-inverted<span class="text-inverted colour-block"></span></li>
+                            <li>Text-color-gray<span class="text-gray colour-block"></span></li>
+                            <li>Print-black<span class="print-black colour-block"></span></li>
+                            <li>Print-link<span class="print-link colour-block"></span></li>
+                            <li>Link-color<span class="link-color colour-block"></span></li>
+                            <li>link-hover-color<span class="link-hover-color colour-block"></span></li>
+                            <li>Border-color<span class="border colour-block"></span></li>
+                            <li>Input-border-color<span class="input-border colour-block"></span></li>
+                            <li>Feedback-color-accepted<span class="feedback-accepted colour-block"></span></li>
+                            <li>Feedback-color-rejected<span class="feedback-rejected colour-block"></span></li>
+                            <li>Feedback-color-consideration<span class="feedback-color-consideration colour-block"></span></li>
+                            <li>Feedback-color-consideration<span class="idea-remark-bg colour-block"></span></li>
+                            <li>Feedback-color-consideration<span class="idea-remark colour-block"></span></li>
+                        </div>
+                    </div>
 
                 <h2 id="cl-errorlist">Errorlist</h2>
 

diff --git a/liqd_product/assets/scss/_form.scss b/liqd_product/assets/scss/_form.scss
@@ -10,6 +10,7 @@ label {
     line-height: 1.6;
     font-family: inherit;
     font-size: inherit;
+    border-radius: 0;
 }
 
 input,
@@ -22,6 +23,7 @@ select {
     color: contrast-color($body-bg);
     border-color: $brand-primary;
     box-shadow: 0 0 2px $brand-primary-tint inset;
+    border-radius: 0;
 
     &:invalid {
         border-color: $brand-primary;
@@ -127,6 +129,7 @@ div.cke_focus {
 
 .form-control {
     height: auto !important;
+    border-radius: 0 !important;
 }
 
 .input-group {

diff --git a/liqd_product/assets/scss/_variables.scss b/liqd_product/assets/scss/_variables.scss
@@ -38,6 +38,7 @@ $bg-light: #f7f7f7;
 
 $gray-light: #4d4d4d;
 $gray-lighter: $text-secondary-color;
+$gray-lightest: #d8d8d8;
 
 $demi-bold: 600;
 $headings-font-weight: $demi-bold !default;

diff --git a/liqd_product/assets/scss/components/_blocks.scss b/liqd_product/assets/scss/components/_blocks.scss
@@ -117,6 +117,12 @@ $block-padding-md: 5*$padding;
     color: $text-color-inverted;
 }
 
+//linked for specificty
+.btn--transparent.block-bg_btn-2 {
+    color: $body-bg;
+    border-color: $body-bg;
+}
+
 .block-background_cta_block {
     margin-left: -17px;
     margin-right: -17px;

diff --git a/liqd_product/assets/scss/components/_button.scss b/liqd_product/assets/scss/components/_button.scss
@@ -63,11 +63,11 @@
 
 %button-base {
     @extend %input-base;
-    border-radius: 0.3em;
+    border-radius: 0;
     text-decoration: none;
     display: inline-block;
     text-align: center;
-    font-weight: bold;
+    font-weight: normal;
     padding-left: 1em;
     padding-right: 1em;
     margin: 0;

diff --git a/liqd_product/assets/scss/components/_contact_form.scss b/liqd_product/assets/scss/components/_contact_form.scss
@@ -1,5 +1,11 @@
 //nasty hack until forms are refactored
 .contact_form {
+    .form-control {
+        background-color: $bg-light !important;
+        box-shadow: none;
+        border-color: $gray-lightest;
+    }
+
     .form-check-input {
         width: 5% !important;
     }

diff --git a/liqd_product/assets/scss/components/_style_guide.scss b/liqd_product/assets/scss/components/_style_guide.scss
@@ -63,6 +63,10 @@
     background-color: $gray-lighter;
 }
 
+.gray-lightest.colour-block {
+    background-color: $gray-lightest;
+}
+
 .text-colour.colour-block {
     background-color: $text-color;
 }