styles/*: include bs buttons and replace styling and update classes

liqd · Sep 6, 2022 · 5dc79b9 · 5dc79b9
1 parent c8d5e0a
commit 5dc79b9
Show file tree

Hide file tree

Showing 27 changed files with 52 additions and 71 deletions.
diff --git a/meinberlin/apps/budgeting/templates/meinberlin_budgeting/proposal_list.html b/meinberlin/apps/budgeting/templates/meinberlin_budgeting/proposal_list.html
@@ -15,7 +15,7 @@
 {% block project_action %}
     {% has_or_would_have_perm 'meinberlin_budgeting.add_proposal' request.user module as propose_allowed %}
     {% if propose_allowed %}
-        <a href="{% url 'meinberlin_budgeting:proposal-create' module_slug=module.slug %}" class="btn btn--full u-spacer-bottom btn--huge">
+        <a href="{% url 'meinberlin_budgeting:proposal-create' module_slug=module.slug %}" class="btn btn--primary btn--full u-spacer-bottom btn--huge">
             {% trans 'Submit proposal' %}
         </a>
     {% endif %}
@@ -32,7 +32,7 @@
                         {% csrf_token %}
                         <div class="widget--{{ token_form.token|widget_type }}">
                             {{ token_form.token }}
-                            <button type="submit" class="btn">{% trans 'Enter code' %}</button>
+                            <button type="submit" class="btn btn--primary">{% trans 'Enter code' %}</button>
                         </div>
                         {{ token_form.token.errors }}
                     </div>

diff --git a/meinberlin/apps/cms/templates/meinberlin_cms/blocks/projects_block.html b/meinberlin/apps/cms/templates/meinberlin_cms/blocks/projects_block.html
@@ -9,6 +9,6 @@ <h2>{{ value.title }}</h2>
         {% endfor %}
     </ul>
     <div class="block__actions">
-        <a href="{% url 'meinberlin_plans:plan-list' %}" class="btn">{% trans 'Show all projects' %}</a>
+        <a href="{% url 'meinberlin_plans:plan-list' %}" class="btn btn--primary">{% trans 'Show all projects' %}</a>
     </div>
 </div>
diff --git a/meinberlin/apps/cms/templates/meinberlin_cms/includes/storefronts.html b/meinberlin/apps/cms/templates/meinberlin_cms/includes/storefronts.html
@@ -9,7 +9,7 @@
     <h2 class="storefront__district-text">
         {% blocktrans with district=item.district %}What is happening in <strong>{{ district }}</strong>?{% endblocktrans %}
     </h2>
-    <button class="btn btn-primary">
+    <button class="btn btn--primary">
         {% blocktrans count counter=item.district_project_count %}display {{ counter }} project{% plural %}display {{ counter }} projects{% endblocktrans %}
     </button>
 </a>

diff --git a/meinberlin/apps/contrib/templates/meinberlin_contrib/component_library.html b/meinberlin/apps/contrib/templates/meinberlin_contrib/component_library.html
@@ -5,8 +5,8 @@
 
 {% block content %}
 <div class="container">
-    <div class="l-menu">
-        <div class="l-menu__menu">
+    <div class="row">
+        <div class="col-lg-3">
             <nav class="dashboard-nav">
                 <div class="dashboard-nav__dropdown">
                     <div class="dashboard-nav__item">Form</div>
@@ -185,7 +185,7 @@
             </nav>
         </div>
 
-        <div class="l-menu__content">
+        <div class="col-lg-9">
 
             <h1 class="u-first-heading">Style Guide</h1>
 
@@ -490,7 +490,7 @@ <h2 id="cl-buttons">Buttons</h2>
                 </p>
                 <button class="btn btn--light" type="button" disabled>Light Button</button>
                 <button class="btn btn--transparent" type="button" disabled>Transparent Button</button>
-                <button class="btn btn-primary" type="button" disabled>Primary Button</button>
+                <button class="btn btn--primary" type="button" disabled>Primary Button</button>
                 <button class="btn btn--secondary" type="button" disabled>Secondary Button</button>
                 <button class="btn btn--danger" type="button" disabled>Danger Button</button>
                 <p>
@@ -508,10 +508,10 @@ <h2 id="cl-buttons">Buttons</h2>
                     <button class="btn btn--attached-top" type="button">Top Button</button>
                 </p>
                 <p>
-                    <button class="btn btn--full u-spacer-bottom" type="button">Full Button</button>
+                    <button class="btn btn--primary btn--full u-spacer-bottom" type="button">Full Button</button>
                 </p>
                 <div class="btn-group" role="group">
-                    <button class="btn btn-primary" type="button">But</button><button class="btn" type="button">ton</button><button class="btn" type="button">group</button>
+                    <button class="btn btn--primary" type="button">But</button><button class="btn btn--primary" type="button">ton</button><button class="btn btn--primary" type="button">group</button>
                 </div>
                 <div class="switch__group" role="group" aria-labelledby="switch-primary">
                     <div class="switch-filter__btn-group">
@@ -871,7 +871,7 @@ <h3 class="paragraph__title">
                         Why is the Table of contents expanded when we are in the first chapter and collapsed in the following ones?
                     </div>
                     <div class="paragraph__actions">
-                        <a class="btn" href="#">
+                        <a class="btn btn--primary" href="#">
                             <i class="far fa-comment" aria-hidden="true"></i>
                             10 Comments
                         </a>
@@ -887,7 +887,7 @@ <h3 class="paragraph__title">
                         surrounded by grey.
                     </div>
                     <div class="paragraph__actions">
-                        <a class="btn" href="#">
+                        <a class="btn btn--primary" href="#">
                             <i class="far fa-comment" aria-hidden="true"></i>
                             1 Comment
                         </a>
@@ -1713,7 +1713,7 @@ <h3 class="participation-tile__title">Project name</h3>
                                                 </div>
                                                 <div class="participation-tile__spacer"></div>
                                                 <div class="participation-tile__btn">
-                                                    <a class="btn btn--full u-spacer-bottom btn--small" href="">Join now</a>
+                                                    <a class="btn btn--primary btn--full u-spacer-bottom btn--small" href="">Join now</a>
                                                 </div>
                                             </div>
                                         </div>
@@ -1729,7 +1729,7 @@ <h3 class="participation-tile__title">Project name</h3>
                                                     </div>
                                                     <div class="participation-tile__spacer"></div>
                                                     <div class="participation-tile__btn">
-                                                        <a class="btn btn--full u-spacer-bottom btn--small" href="">Join now</a>
+                                                        <a class="btn btn--primary btn--full u-spacer-bottom btn--small" href="">Join now</a>
                                                     </div>
                                                 </div>
                                             </div>
@@ -1745,7 +1745,7 @@ <h3 class="participation-tile__title">Project name</h3>
                                                     </div>
                                                     <div class="participation-tile__spacer"></div>
                                                     <div class="participation-tile__btn">
-                                                        <a class="btn btn--full u-spacer-bottom btn--small" href="">Join now</a>
+                                                        <a class="btn btn--primary btn--full u-spacer-bottom btn--small" href="">Join now</a>
                                                     </div>
                                                 </div>
                                             </div>
@@ -1945,7 +1945,7 @@ <h1 class="storefront__lg-text">Help shape Berlin: Your opinion is important to
                                 </div>
                                 <a href="/" class="storefront__item storefront__district tile__md">
                                     <h2 class="storefront__district-text">Whats happening in <strong>Neukölln</strong>?</h2>
-                                    <button class="btn btn-primary">
+                                    <button class="btn btn--primary">
                                         2 Projekte anzeigen
                                     </button>
                                 </a>

diff --git a/...in/apps/dashboard/templates/meinberlin_dashboard/includes/module_blueprint_list_tile.html b/...in/apps/dashboard/templates/meinberlin_dashboard/includes/module_blueprint_list_tile.html
@@ -12,6 +12,6 @@ <h3 class="tile__title">{{ blueprint.title }}</h3>
             {{ blueprint.description | linebreaks }}
         </div>
 
-        <input type="submit" class="btn" value="{% trans 'Select'%}" />
+        <input type="submit" class="btn btn--primary" value="{% trans 'Select'%}" />
     </form>
 </li>
diff --git a/meinberlin/apps/ideas/templates/meinberlin_ideas/idea_list.html b/meinberlin/apps/ideas/templates/meinberlin_ideas/idea_list.html
@@ -4,7 +4,7 @@
 {% block project_action %}
     {% has_or_would_have_perm 'meinberlin_ideas.add_idea' request.user module as propose_allowed %}
     {% if propose_allowed %}
-        <a href="{% url 'meinberlin_ideas:idea-create' module_slug=module.slug %}" class="btn btn--full u-spacer-bottom btn--huge">
+        <a href="{% url 'meinberlin_ideas:idea-create' module_slug=module.slug %}" class="btn btn--primary btn--full u-spacer-bottom btn--huge">
             {% trans 'Submit idea' %}
         </a>
     {% endif %}

diff --git a/meinberlin/apps/kiezkasse/templates/meinberlin_kiezkasse/proposal_list.html b/meinberlin/apps/kiezkasse/templates/meinberlin_kiezkasse/proposal_list.html
@@ -14,7 +14,7 @@
 {% block project_action %}
     {% has_or_would_have_perm 'meinberlin_kiezkasse.add_proposal' request.user module as propose_allowed %}
     {% if propose_allowed %}
-        <a href="{% url 'meinberlin_kiezkasse:proposal-create' module_slug=module.slug %}" class="btn btn--full u-spacer-bottom btn--huge">
+        <a href="{% url 'meinberlin_kiezkasse:proposal-create' module_slug=module.slug %}" class="btn btn--primary btn--full u-spacer-bottom btn--huge">
             {% trans 'Submit proposal' %}
         </a>
     {% endif %}

diff --git a/meinberlin/apps/livequestions/templates/meinberlin_livequestions/livequestion_form.html b/meinberlin/apps/livequestions/templates/meinberlin_livequestions/livequestion_form.html
@@ -18,7 +18,7 @@ <h2>{% trans 'Here you can ask your question'%}</h2>
 
                 <div class="row">
                     <div class="col-12 col-sm-2">
-                        <button type="submit" class="btn btn-primary btn-block">{% trans 'post'%}</button>
+                        <button type="submit" class="btn btn--primary btn-block">{% trans 'post'%}</button>
                     </div>
                 </div>
             </form>

diff --git a/meinberlin/apps/mapideas/templates/meinberlin_mapideas/mapidea_list.html b/meinberlin/apps/mapideas/templates/meinberlin_mapideas/mapidea_list.html
@@ -14,7 +14,7 @@
 {% block project_action %}
     {% has_or_would_have_perm 'meinberlin_mapideas.add_mapidea' request.user module as propose_allowed %}
     {% if propose_allowed %}
-        <a href="{% url 'meinberlin_mapideas:mapidea-create' module_slug=module.slug %}" class="btn btn--full u-spacer-bottom btn--huge">
+        <a href="{% url 'meinberlin_mapideas:mapidea-create' module_slug=module.slug %}" class="btn btn--primary btn--full u-spacer-bottom btn--huge">
             {% trans 'Submit Idea' %}
         </a>
     {% endif %}

diff --git a/meinberlin/apps/maptopicprio/templates/meinberlin_maptopicprio/maptopic_dashboard_list.html b/meinberlin/apps/maptopicprio/templates/meinberlin_maptopicprio/maptopic_dashboard_list.html
@@ -9,7 +9,7 @@ <h1 class="u-first-heading lr-bar__left">
             {% trans 'Places' %}
         </h1>
         <div class="lr-bar__right">
-            <a href="{% url 'a4dashboard:maptopic-create' module_slug=module.slug %}" class="btn">
+            <a href="{% url 'a4dashboard:maptopic-create' module_slug=module.slug %}" class="btn btn--primary">
                 {% trans 'Add Place' %}
             </a>
         </div>

diff --git a/meinberlin/apps/offlineevents/templates/meinberlin_offlineevents/offlineevent_list.html b/meinberlin/apps/offlineevents/templates/meinberlin_offlineevents/offlineevent_list.html
@@ -9,7 +9,7 @@ <h1 class="u-first-heading lr-bar__left">
             {% trans 'Offline Events' %}
         </h1>
         <div class="lr-bar__right">
-            <a href="{% url 'a4dashboard:offlineevent-create' project_slug=project.slug %}" class="btn">
+            <a href="{% url 'a4dashboard:offlineevent-create' project_slug=project.slug %}" class="btn btn--primary">
                 {% trans 'Add offline event' %}
             </a>
         </div>

diff --git a/meinberlin/apps/projects/templates/meinberlin_projects/includes/project_module_tile.html b/meinberlin/apps/projects/templates/meinberlin_projects/includes/project_module_tile.html
@@ -36,7 +36,7 @@ <h3 class="participation-tile__title">{{ module.name }}</h3>
                 {% if module.module_running_time_left %}
                 <div class="participation-tile__btn">
                     {% has_perm 'a4projects.participate_in_project' request.user project as user_may_participate_in_project %}
-                    <a class="btn btn--full u-spacer-bottom btn--small" href="{% url 'module-detail' module.slug %}">{% if user_may_participate_in_project %}{% trans 'Join now' %}{% else %}{% trans 'Read now' %}{% endif %}</a>
+                    <a class="btn btn--primary btn--full u-spacer-bottom btn--small" href="{% url 'module-detail' module.slug %}">{% if user_may_participate_in_project %}{% trans 'Join now' %}{% else %}{% trans 'Read now' %}{% endif %}</a>
                 </div>
                 {% endif %}
             </div>

diff --git a/meinberlin/apps/topicprio/templates/meinberlin_topicprio/topic_dashboard_list.html b/meinberlin/apps/topicprio/templates/meinberlin_topicprio/topic_dashboard_list.html
@@ -9,7 +9,7 @@ <h1 class="u-first-heading lr-bar__left">
             {% trans 'Topics' %}
         </h1>
         <div class="lr-bar__right">
-            <a href="{% url 'a4dashboard:topic-create' module_slug=module.slug %}" class="btn">
+            <a href="{% url 'a4dashboard:topic-create' module_slug=module.slug %}" class="btn btn--primary">
                 {% trans 'Add Topic' %}
             </a>
         </div>

diff --git a/meinberlin/assets/scss/_base.scss b/meinberlin/assets/scss/_base.scss
@@ -20,7 +20,7 @@ fieldset {
 
 html {
     background-color: $body-bg !important;
-    color: contrast-color($body-bg);
+    // color: $text-color;
     box-sizing: border-box;
     font-family: $font-family-base;
     line-height: 1.4;

diff --git a/meinberlin/assets/scss/_form.scss b/meinberlin/assets/scss/_form.scss
@@ -19,7 +19,7 @@ select {
     display: block;
     max-width: 100%;
     background-color: $body-bg;
-    color: contrast-color($body-bg);
+    color: $text-color;
 
     &:invalid {
         border-color: $danger;
@@ -56,7 +56,7 @@ div.cke_focus {
     list-style: none;
     text-align: center;
     background-color: $danger;
-    color: contrast-color($danger);
+    color: $text-color-inverted;
 }
 
 .django-ckeditor-widget {

diff --git a/meinberlin/assets/scss/_shame.scss b/meinberlin/assets/scss/_shame.scss
@@ -22,7 +22,7 @@ input[type="search"] {
 
 // used by adhocracy4
 .submit-button {
-    @extend %button-base;
+    @extend .btn;
     @extend .btn--primary;
 }
 

diff --git a/meinberlin/assets/scss/components/_alert.scss b/meinberlin/assets/scss/components/_alert.scss
@@ -16,24 +16,24 @@ $messages-margin-bottom: 25px;
 .alert {
     margin: 0;
     padding: $padding * 1.2 0;
-    background-color: contrast-stretch($info, $info, 7);
+    background-color: lighten($info, 60%);
     color: $info;
     text-align: center;
 }
 
 .alert--success {
-    background-color: contrast-stretch($success, $success);
+    background-color: lighten($success, 70%);
     color: $success;
 }
 
 .alert--error,
 .alert--danger {
-    background-color: contrast-stretch($danger, $danger);
+    background-color: lighten($danger, 50%);
     color: $danger;
 }
 
 .alert--warning {
-    background-color: lighten($warning, 45%);
+    background-color: lighten($warning, 48%);
     color: $warning;
 }
 

diff --git a/meinberlin/assets/scss/components/_blocks.scss b/meinberlin/assets/scss/components/_blocks.scss
@@ -8,7 +8,7 @@
     padding: 2.8em 0;
 
     background-color: $secondary;
-    color: contrast-color($secondary);
+    color: $text-color-inverted;
     text-align: center;
 
     .col-lg-6 > :first-child {

diff --git a/meinberlin/assets/scss/components/_button.scss b/meinberlin/assets/scss/components/_button.scss
@@ -35,21 +35,13 @@
 
 %button-base {
     @extend %input-base;
-    border-radius: 0.3em;
     text-decoration: none;
-    display: inline-block;
-    text-align: center;
     font-weight: bold;
-    padding-left: 1em;
-    padding-right: 1em;
-    margin: 0;
-    vertical-align: middle;
 }
 
-// .btn {
-//     @extend %button-base;
-//     @include button-color($link-color-btn, $link-hover-color-btn);
-// }
+.btn {
+    @extend %button-base;
+}
 
 .btn--flex {
     @extend %button-base;
@@ -63,21 +55,9 @@
 }
 
 .btn--light {
-    font-weight: inherit;
-
-    @include button-color($body-bg, $bg-secondary);
+    @extend .btn-light;
 
-    &,
-    &:disabled,
-    &.is-disabled {
-        border-color: $border-color;
-    }
-
-    &:focus,
-    &:hover,
-    &:active {
-        border-color: $idea-remark-color;
-    }
+    font-weight: inherit;
 }
 
 .btn--transparent {
@@ -94,15 +74,15 @@
 }
 
 .btn--primary {
-    @include button-color($primary, darken($primary, 15%));
+    @extend .btn-primary;
 }
 
 .btn--secondary {
-    @include button-color($secondary, darken($secondary, 15%));
+    @extend .btn-secondary;
 }
 
 .btn--danger {
-    @include button-color($danger, darken($danger, 15%));
+    @extend .btn-danger;
 }
 
 .btn--link {

diff --git a/meinberlin/assets/scss/components/_datepicker.scss b/meinberlin/assets/scss/components/_datepicker.scss
@@ -99,7 +99,7 @@
         border: none;
 
         background: $primary;
-        color: contrast-color($primary);
+        color: $text-color-inverted;
         box-shadow: none;
         text-shadow: none;
     }

diff --git a/meinberlin/assets/scss/components/_dropdown.scss b/meinberlin/assets/scss/components/_dropdown.scss
@@ -44,7 +44,7 @@
     margin: 0;
     z-index: 2;
     background-color: $body-bg;
-    color: contrast-color($body-bg);
+    color: $text-color;
     border: 1px solid $text-color;
     border-radius: 2px;
     text-align: left;

diff --git a/meinberlin/assets/scss/components/_input_group.scss b/meinberlin/assets/scss/components/_input_group.scss
@@ -59,7 +59,7 @@
 .addon {
     @extend %input-base;
     background-color: $body-bg;
-    color: contrast-color($body-bg);
+    color: $text-color;
     min-width: 2.4em;
     text-align: center;
 }