bid_main/static/bid_main/styles/_auth.sass

@@ -23,7 +23,7 @@ body.is-auth-page
       height: unset
 
       &:focus
-        border-color: var(--color-primary)
+        border-color: var(--color-accent)
 
   .blender-logo
     filter: drop-shadow(2px 0px 15px rgba(0,0,0,0.15))
@@ -40,7 +40,7 @@ body.is-auth-page
     right: 0
     z-index: 1
 
-.page-background
+.page-bg
   background-size: cover
   bottom: 0
   left: 0

bid_main/static/bid_main/styles/main.sass

@@ -19,7 +19,7 @@ $font-path: '/static/assets/fonts'
 
   &-links // .bid-links
     display: flex
-    font-size: var(--font-size-small)
+    font-size: var(--fs-sm)
     justify-content: space-between
     +list-unstyled
     margin: var(--spacer) 0 0 0
@@ -55,7 +55,7 @@ $font-path: '/static/assets/fonts'
 
     .app-url
       color: var(--text-color-secondary)
-      font-size: var(--font-size-small)
+      font-size: var(--fs-sm)
 
     .app-icon
       border-radius: var(--border-radius)
@@ -96,25 +96,25 @@ $font-path: '/static/assets/fonts'
     margin: 0 auto 15px
     position: relative
 
-    img, .authorize__app-image_placeholder
+    img, .authorize__app-img_placeholder
       height: 100px
       width: 100px
 
-    .authorize__app-image
+    .authorize__app-img
       background: #7596d9
       margin-right: 20px
 
-    .authorize__app-image_placeholder
+    .authorize__app-img_placeholder
       background: #7596d9
       margin-right: 20px
 
-    .authorize__app-image_placeholder_icon
+    .authorize__app-img_placeholder_icon
       position: absolute
       top: 20px
       left: 33px
       color: white
 
-    .authorize__person-image
+    .authorize__person-img
       background: #afd876
 
     .authorize__pictogram__arrow
@@ -220,15 +220,15 @@ ul.errorlist
   h2 i
     color: var(--color-warning)
 
-.badge-image
+.badge-img
-  --badge-image-size: 64px
+  --badge-img-size: 64px
   margin: 0
   transition: opacity var(--transition-speed-slow)
 
   img
     border-radius: var(--border-radius-lg)
-    height: var(--badge-image-size)
+    height: var(--badge-img-size)
-    width: var(--badge-image-size)
+    width: var(--badge-img-size)
 
 .badge-info
   flex: 1
@@ -247,7 +247,7 @@ ul.badges
   +list-unstyled
   margin: 0
 
-  .badge-image
+  .badge-img
     +margin(3, right)
 
   li
@@ -261,7 +261,7 @@ ul.badges
         color: var(--text-color-secondary)
         opacity: .5
 
-      .badge-image
+      .badge-img
         opacity: .3
 
     .toggle-group
@@ -290,12 +290,12 @@ ul.badges
           left: -50%
 
 .toggle
-  background-color: var(--color-primary)
+  background-color: var(--color-accent)
   border-radius: 999em
   padding: 0
 
   &:hover
-    background-color: var(--color-primary)
+    background-color: var(--color-accent)
 
   &.btn
     min-height: 30px !important

bid_main/templates/bid_main/components/oauth_flow_background.html

@@ -1,5 +1,5 @@
 <div class="col">
-  <div class="oauth-background mb-4" style="background-image:url({{ oauth_app.background.url }})">
+  <div class="oauth-bg mb-4" style="background-image:url({{ oauth_app.background.url }})">
     <div class="row">
 
       <div class="col-md-7 col-sm-6 mx-auto d-flex flex-column align-items-sm-start align-items-center justify-content-center text-center text-sm-left mb-sm-0">

bid_main/templates/bid_main/delete_user/components/cannot_request_deletion.html

@@ -1,5 +1,5 @@
 <div class="bid-cta">
-  <div><p><i class="icon mr-2">
+  <div><p><i class="icon me-2">
       <svg class="bi" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
         <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
         <path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>

bid_main/templates/bid_main/index.html

@@ -39,7 +39,7 @@ Profile
   {% endif %}
 
   <div class="bid-user">
-    <a class="mr-4" href="{% url 'bid_main:profile' %}">{% avatar %}</a>
+    <a class="me-4" href="{% url 'bid_main:profile' %}">{% avatar %}</a>
 
     <div class="bid-user-info">
       {% if not user.full_name %}

bid_main/templates/bid_main/profile.html

@@ -54,7 +54,7 @@
           <span>Cancel</span>
         </a>
         {% if user.is_staff %}
-          <a class="mr-auto btn btn-admin" href="{% url 'admin:bid_main_user_change' user.id %}">
+          <a class="me-auto btn btn-admin" href="{% url 'admin:bid_main_user_change' user.id %}">
             Admin
           </a>
         {% endif %}

bid_main/templates/bid_main/templatetags/badges/render_badge.html

@@ -1,7 +1,7 @@
 <li class="badge js-badge {{ badge.name }}{% if badge.id in private_badge_ids %} is-private{% endif %}" title="{{ badge.description }}">
 
   {% if badge.badge_img %}
-  <figure class="badge-image">
+  <figure class="badge-img">
     <img src="{{ badge.badge_img.url }}" alt="{{ badge.description }}" width="{{ badge.badge_img_width }}" height="{{ badge.badge_img_height }}"/>
   </figure>
   {% endif %}

bid_main/templates/components/forms/label.html

@@ -2,11 +2,11 @@
   <label class="{{ label_class }}" for="{{ field.id_for_label }}">
     <span>{% firstof label field.label %}</span>
     {% if field.help_text and field.errors %}
-      <span class="small subtitle ml-2">{{ field.help_text }}</span>
+      <span class="small subtitle ms-2">{{ field.help_text }}</span>
     {% endif %}
 
     {% if field.field.required %}
-      <span class="form-required-indicator ml-1">*</span>
+      <span class="form-required-indicator ms-1">*</span>
     {% endif %}
   </label>
 {% endspaceless %}