Ticket #3399 - Covers, Fixes.

modules/boonex/artificer/data/template/mod_profile/images/cover.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 32"><path fill="#9C92AC" fill-rule="evenodd" d="M0 24h4v2H0v-2zm0 4h6v2H0v-2zm0-8h2v2H0v-2zM0 0h4v2H0V0zm0 4h2v2H0V4zm16 20h-6v2h6v-2zm0 4H8v2h8v-2zm0-8h-4v2h4v-2zm0-20h-6v2h6V0zm0 4h-4v2h4V4zm-2 12h2v2h-2v-2zm0-8h2v2h-2V8zM2 8h10v2H2V8zm0 8h10v2H2v-2zm-2-4h14v2H0v-2zm4-8h6v2H4V4zm0 16h6v2H4v-2zM6 0h2v2H6V0zm0 24h2v2H6v-2z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="32" viewBox="0 0 16 32"><path fill="#9C92AC" fill-rule="evenodd" d="M0 24h4v2H0v-2zm0 4h6v2H0v-2zm0-8h2v2H0v-2zM0 0h4v2H0V0zm0 4h2v2H0V4zm16 20h-6v2h6v-2zm0 4H8v2h8v-2zm0-8h-4v2h4v-2zm0-20h-6v2h6V0zm0 4h-4v2h4V4zm-2 12h2v2h-2v-2zm0-8h2v2h-2V8zM2 8h10v2H2V8zm0 8h10v2H2v-2zm-2-4h14v2H0v-2zm4-8h6v2H4V4zm0 16h6v2H4v-2zM6 0h2v2H6V0zm0 24h2v2H6v-2z"/></svg>

modules/boonex/artificer/data/template/system/cover.html

@@ -6,27 +6,25 @@
 </style>
 </bx_if:logged_in>
 <div class="bx-cover-gap overflow-hidden" >
-    <div class="bx-def-page-width relative mx-auto">
-        <div class="bx-cover-wrapper relative xl:mb-4 bg-gradient-to-br from-gray-100 to-blue-100 dark:bg-gradient-to-r dark:from-gray-900 dark:to-black xl:rounded-b-lg" <bx_if:bg>style="background-image:url(__image_url__)"</bx_if:bg>>
-            <div class="relative">
-                <div class="absolute top-0 -left-8 w-96 h-96 bg-purple-700 rounded-full  filter blur-3xl z-0 opacity-60 animate-goo"></div>
-                <div class="absolute top-12 -right-8 w-96 h-96 bg-red-700 rounded-full filter blur-3xl z-0 opacity-60 animate-goo animation-delay-2000"></div>  
-                <div class="absolute -bottom-12 left-1/3 w-96 h-96 bg-green-700 rounded-full filter blur-3xl z-0 opacity-60 animate-goo animation-delay-4000"></div> 
-            </div>
-            <div class=" relative mx-auto py-16 text-center">
-                <bx_if:image>
-                    <div class="bx-cover-image">
-                        <img class="border rounded-md" style="background-image:url(__icon_url__)" src="<bx_icon_url:spacer.gif />" />
-                    </div>
-                </bx_if:image>
-                <div class="bx-cover-title flex justify-center items-center">
-                    <h1 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-50">
-                        <span class="block pb-1 relative">__title__</span>
-                        <span class="block pb-1  bg-clip-text text-transparent bg-gradient-to-r from-red-500 to-blue-500 "></span>
-                    </h1>
+    <div class="bx-cover-wrapper<bx_if:empty_cover_class> bx-cover-empty</bx_if:empty_cover_class> relative bg-gradient-to-br from-gray-100 to-blue-100 dark:bg-gradient-to-r dark:from-gray-900 dark:to-black" <bx_if:bg>style="background-image:url(__image_url__)"</bx_if:bg>>
+        <div class="bx-def-page-width relative mx-auto">
+            <div class="absolute top-0 -left-8 w-96 h-96 bg-purple-700 rounded-full  filter blur-3xl z-0 opacity-60 animate-goo"></div>
+            <div class="absolute top-12 -right-8 w-96 h-96 bg-red-700 rounded-full filter blur-3xl z-0 opacity-60 animate-goo animation-delay-2000"></div>  
+            <div class="absolute -bottom-12 left-1/3 w-96 h-96 bg-green-700 rounded-full filter blur-3xl z-0 opacity-60 animate-goo animation-delay-4000"></div> 
+        </div>
+        <div class="relative mx-auto py-16 text-center">
+            <bx_if:image>
+                <div class="bx-cover-image">
+                    <img class="border rounded-md" style="background-image:url(__icon_url__)" src="<bx_icon_url:spacer.gif />" />
                 </div>
-                <div class="bx-cover-actions">__actions__</div>
+            </bx_if:image>
+            <div class="bx-cover-title flex justify-center items-center">
+                <h1 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-50">
+                    <span class="block pb-1 relative">__title__</span>
+                    <span class="block pb-1  bg-clip-text text-transparent bg-gradient-to-r from-red-500 to-blue-500 "></span>
+                </h1>
             </div>
+            <div class="bx-cover-actions">__actions__</div>
         </div>
     </div>
 </div>

modules/boonex/artificer/data/template/system/cover_home.html

@@ -5,40 +5,34 @@
     }
 </style>
 </bx_if:logged_in>
-<div class="bx-cover-wrapper relative bg-gradient-to-br from-gray-100 to-blue-100 dark:bg-gradient-to-r dark:from-gray-900 dark:to-black overflow-hidden" <bx_if:bg>style="background-image:url(__image_url__)"</bx_if:bg>>
-    <div class="relative py-16">
-        <main class="">
-            <div class="mx-auto max-w-7xl">
-                <div class="">
-                    <div class="relative">
-                        <div class="absolute top-0 -left-8 w-96 h-96 bg-purple-700 rounded-full  filter blur-3xl z-0 opacity-60 animate-goo"></div>
-                        <div class="absolute top-12 -right-8 w-96 h-96 bg-red-700 rounded-full filter blur-3xl z-0 opacity-60 animate-goo animation-delay-2000"></div>  
-                        <div class="absolute -bottom-12 left-1/3 w-96 h-96 bg-green-700 rounded-full filter blur-3xl z-0 opacity-60 animate-goo animation-delay-4000"></div> 
-                    </div>
-                    <div class=" relative  text-center md:max-w-2xl md:mx-auto">
-                        <div>
-                            <h1 class="text-4xl  sm:text-5xl xl:text-6xl tracking-tight  font-bold text-gray-800 dark:text-white ">
-                                <span class="block pb-1 relative"><bx_text:_bx_artificer_txt_splash_welcome_l1 /></span>
-                                <span class="block pb-1  bg-clip-text text-transparent bg-gradient-to-r from-red-500 to-blue-500 "><bx_text:_bx_artificer_txt_splash_welcome_l2 /></span>
-                            </h1>
-                            <p class="p-8  font-light text-gray-700 dark:text-gray-300 text-base  sm:text-lg xl:text-xl">
-                                <span class="block"><bx_text:_bx_artificer_txt_splash_welcome_l3 /></span>
-                            </p>
-                            <div class=" w-full flex justify-center items-center">
-                                <button type="button" onclick="document.location='__link_join__'"  class="group inline-flex items-center px-4 py-2 border border-transparent shadow-sm hover:shadow-md text-sm font-medium rounded-md text-gray-200 hover:text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ">
-                                    <bx_text:_bx_artificer_txt_splash_welcome_a1 />
-                                </button>
-                                <button type="button"  onclick="document.location='__link_login__'" class="ml-3 group inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 shadow-sm hover:shadow-md text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 dark:hover:text-white hover:text-gray-800 bg-white dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="-ml-1 mr-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                                      <path fill-rule="evenodd" d="M3 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1zm7.707 3.293a1 1 0 010 1.414L9.414 9H17a1 1 0 110 2H9.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0z" clip-rule="evenodd"></path>
-                                    </svg>
-                                    <bx_text:_bx_artificer_txt_splash_welcome_a2 />
-                                </button>
-                            </div>
-                        </div>
-                    </div>
+<div class="bx-cover-gap overflow-hidden">
+    <div class="bx-cover-wrapper<bx_if:empty_cover_class> bx-cover-empty</bx_if:empty_cover_class> relative bg-gradient-to-br from-gray-100 to-blue-100 dark:bg-gradient-to-r dark:from-gray-900 dark:to-black" <bx_if:bg>style="background-image:url(__image_url__)"</bx_if:bg>>
+        <div class="bx-def-page-width relative mx-auto">
+            <div class="absolute top-0 -left-8 w-96 h-96 bg-purple-700 rounded-full  filter blur-3xl z-0 opacity-60 animate-goo"></div>
+            <div class="absolute top-12 -right-8 w-96 h-96 bg-red-700 rounded-full filter blur-3xl z-0 opacity-60 animate-goo animation-delay-2000"></div>  
+            <div class="absolute -bottom-12 left-1/3 w-96 h-96 bg-green-700 rounded-full filter blur-3xl z-0 opacity-60 animate-goo animation-delay-4000"></div> 
+        </div>
+        <div class="relative mx-auto py-16 text-center">
+            <div>
+                <h1 class="text-4xl  sm:text-5xl xl:text-6xl tracking-tight  font-bold text-gray-800 dark:text-white ">
+                    <span class="block pb-1 relative"><bx_text:_bx_artificer_txt_splash_welcome_l1 /></span>
+                    <span class="block pb-1  bg-clip-text text-transparent bg-gradient-to-r from-red-500 to-blue-500 "><bx_text:_bx_artificer_txt_splash_welcome_l2 /></span>
+                </h1>
+                <p class="p-8  font-light text-gray-700 dark:text-gray-300 text-base  sm:text-lg xl:text-xl">
+                    <span class="block"><bx_text:_bx_artificer_txt_splash_welcome_l3 /></span>
+                </p>
+                <div class=" w-full flex justify-center items-center">
+                    <button type="button" onclick="document.location='__link_join__'"  class="group inline-flex items-center px-4 py-2 border border-transparent shadow-sm hover:shadow-md text-sm font-medium rounded-md text-gray-200 hover:text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ">
+                        <bx_text:_bx_artificer_txt_splash_welcome_a1 />
+                    </button>
+                    <button type="button"  onclick="document.location='__link_login__'" class="ml-3 group inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 shadow-sm hover:shadow-md text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 dark:hover:text-white hover:text-gray-800 bg-white dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="-ml-1 mr-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                          <path fill-rule="evenodd" d="M3 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1zm7.707 3.293a1 1 0 010 1.414L9.414 9H17a1 1 0 110 2H9.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0z" clip-rule="evenodd"></path>
+                        </svg>
+                        <bx_text:_bx_artificer_txt_splash_welcome_a2 />
+                    </button>
                 </div>
             </div>
-        </main>
+        </div>
     </div>
 </div>

modules/boonex/artificer/data/template/system/css/cover.css

@@ -4,5 +4,16 @@ import url(../../../../../../../template/css/cover.css);
 
 .bx-cover-wrapper {
     background-image: url(../images/cover.svg);
+    background-color: #eee;
+    background-repeat: no-repeat;
+    background-position: center center;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+}
+.bx-cover-wrapper.bx-cover-empty {
     background-color: #dfdbe5;
+    background-repeat: repeat;
+    background-size: auto;
 }

modules/boonex/artificer/data/template/system/css/menu-sidebar.css

@@ -77,5 +77,7 @@
     margin: 0;
 }
 .bx-sidebar.bx-sidebar-account .bx-sb-menu .bx-menu-item-addon.bx-def-unit-alert {
+    top: auto;
+    right: 0.5rem;
     padding: 0 0.25rem;
 }

modules/boonex/artificer/data/template/system/scripts/BxTemplPageHome.php

@@ -27,6 +27,10 @@ class BxTemplPageHome extends BxBasePageHome
             'title' => _t('_sys_txt_homepage_cover', BX_DOL_URL_ROOT . BxDolPermalinks::getInstance()->permalink('page.php?i=create-account')),
             'link_join' => BX_DOL_URL_ROOT . BxDolPermalinks::getInstance()->permalink('page.php?i=create-account'),
             'link_login' => BX_DOL_URL_ROOT . BxDolPermalinks::getInstance()->permalink('page.php?i=login'),
+            'bx_if:empty_cover_class' => array (
+                'condition' => !$bTmplVarsCover,
+                'content' => array(),
+            ),
             'bx_if:bg' => array (
                 'condition' => $bTmplVarsCover,
                 'content' => $aTmplVarsCover,

modules/boonex/timeline/classes/BxTimelineTemplate.php

@@ -2089,7 +2089,7 @@ class BxTimelineTemplate extends BxBaseModNotificationsTemplate
             $sAttachmentsLayout = BX_TIMELINE_ML_GALLERY;
 
         $iAttachmentsTotal = 0;
-        $aTmplVarsImages = $aTmplVarsVideos = $aTmplVarsFiles = $aTmplVarsAttachments = array();
+        $aTmplVarsImages = $aTmplVarsVideos = $aTmplVarsFiles = $aTmplVarsAttachments = $aTmplVarsAttachmentsFiles = array();
 
         //--- Process Photos ---//
         $bImages = !empty($aContent['images']) && is_array($aContent['images']);
@@ -2156,16 +2156,18 @@ class BxTimelineTemplate extends BxBaseModNotificationsTemplate
                 );
         }
 
-		$bFilesAttach = !empty($aContent['files_attach']) && is_array($aContent['files_attach']);
+        $bFilesAttach = !empty($aContent['files_attach']) && is_array($aContent['files_attach']);
         if($bFilesAttach) {
             $aFilesAttach = $this->_getTmplVarsFiles($aContent['files_attach'], $aEvent, $aBrowseParams);
-			if(!empty($aFilesAttach)) {
-                $iAttachmentsTotal += $aFilesAttach['total'];
-                $aTmplVarsAttachments = array_merge($aTmplVarsAttachments, $aFilesAttach['items']);
+            if(!empty($aFilesAttach)) {
+                $aTmplVarsAttachmentsFiles = array(
+                    'style_prefix' => $sStylePrefix,
+                    'bx_repeat:items' => $aFilesAttach['items']
+                );
             }
         }
-		
-		/*
+
+        /*
          *  Process collected attachments in case of Showcase layout.
          */
         $iAttachmentsShow = 4;

plugins_public/tailwind/css/tailwind.css

@@ -51,6 +51,18 @@
     .bx-artificer .bx-def-margin-bottom {
         @apply mb-4;
     }
+    .bx-artificer .bx-def-margin-leftright {
+        @apply mx-4;
+    }
+    .bx-artificer .bx-def-margin-leftright-neg {
+        @apply -mx-4;
+    }
+    .bx-artificer .bx-def-margin-topbottom {
+        @apply my-4;
+    }
+    .bx-artificer .bx-def-margin-topbottom-neg {
+        @apply -my-4;
+    }
     
     .bx-artificer .bx-def-margin-sec {
         @apply m-2;
@@ -73,6 +85,18 @@
     .bx-artificer .bx-def-margin-sec-bottom {
         @apply mb-2;
     }
+    .bx-artificer .bx-def-margin-sec-leftright {
+        @apply mx-2;
+    }
+    .bx-artificer .bx-def-margin-sec-leftright-neg {
+        @apply -mx-2;
+    }
+    .bx-artificer .bx-def-margin-sec-topbottom {
+        @apply my-2;
+    }
+    .bx-artificer .bx-def-margin-sec-topbottom-neg {
+        @apply -my-2;
+    }
     
     .bx-artificer .bx-def-margin-thd {
         @apply m-1;
@@ -95,6 +119,18 @@
     .bx-artificer .bx-def-margin-thd-bottom {
         @apply mb-1;
     }
+    .bx-artificer .bx-def-margin-thd-leftright {
+        @apply mx-1;
+    }
+    .bx-artificer .bx-def-margin-thd-leftright-neg {
+        @apply -mx-1;
+    }
+    .bx-artificer .bx-def-margin-thd-topbottom {
+        @apply my-1;
+    }
+    .bx-artificer .bx-def-margin-thd-topbottom-neg {
+        @apply -my-1;
+    }
 
     .bx-artificer .bx-def-padding {
         @apply p-4;
@@ -117,6 +153,18 @@
     .bx-artificer .bx-def-padding-bottom {
         @apply pb-4;
     }
+    .bx-artificer .bx-def-padding-leftright {
+        @apply px-4;
+    }
+    .bx-artificer .bx-def-padding-topbottom {
+        @apply py-4;
+    }
+    .bx-artificer .bx-def-padding-lefttopright {
+        @apply px-4 pt-4;
+    }
+    .bx-artificer .bx-def-padding-rightbottomleft {
+        @apply px-4 pb-4;
+    }
     
     .bx-artificer .bx-def-padding-sec {
         @apply p-2;
@@ -139,6 +187,18 @@
     .bx-artificer .bx-def-padding-sec-bottom {
         @apply pb-2;
     }
+    .bx-artificer .bx-def-padding-sec-leftright {
+        @apply px-2;
+    }
+    .bx-artificer .bx-def-padding-sec-topbottom {
+        @apply py-2;
+    }
+    .bx-artificer .bx-def-padding-lefttopright {
+        @apply px-2 pt-2;
+    }
+    .bx-artificer .bx-def-padding-rightbottomleft {
+        @apply px-2 pb-2;
+    }
 
     .bx-artificer .bx-def-padding-thd {
         @apply p-1;
@@ -161,6 +221,18 @@
     .bx-artificer .bx-def-padding-thd-bottom {
         @apply pb-1;
     }
+    .bx-artificer .bx-def-padding-thd-leftright {
+        @apply px-1;
+    }
+    .bx-artificer .bx-def-padding-thd-topbottom {
+        @apply py-1;
+    }
+    .bx-artificer .bx-def-padding-lefttopright {
+        @apply px-1 pt-1;
+    }
+    .bx-artificer .bx-def-padding-rightbottomleft {
+        @apply px-1 pb-1;
+    }
 
     /* Fonts */
     .bx-artificer .bx-def-font,
@@ -368,6 +440,13 @@
         @apply opacity-100 ring-0 bg-gray-50 dark:bg-gray-700 shadow-none;
     }
 
+    /* Page Cover */
+    .bx-artificer .bx-cover-wrapper.bx-cover-empty,
+    .bx-artificer .bx-base-pofile-cover-image.bx-bpci-holder img.bx-base-pofile-cover-image,
+    .bx-artificer .bx-base-pofile-unit-with-cover.bx-bp-uc-empty .bx-base-pofile-unit-cover {
+        @apply bg-gray-200 dark:bg-gray-900;
+    }
+    
     /* Page Submenu */
     .bx-artificer .bx-menu-main-submenu .bx-menu-item.bx-menu-tab-active a {
         @apply text-gray-900 dark:text-gray-100;

plugins_public/tailwind/js/tailwind.config.js

@@ -33,12 +33,12 @@ module.exports = {
         'focus:border-blue-500', 'focus:border-opacity-70',
 
         'bx-def-box-sizing', 'bx-def-align-center',  'bx-def-valign-center', 'bx-def-centered', 
-        'bx-def-margin', 'bx-def-margin-left', 'bx-def-margin-left-auto', 'bx-def-margin-right', 'bx-def-margin-top', 'bx-def-margin-top-auto', 'bx-def-margin-bottom',
-        'bx-def-margin-sec', 'bx-def-margin-sec-left', 'bx-def-margin-sec-left-auto', 'bx-def-margin-sec-right', 'bx-def-margin-sec-top', 'bx-def-margin-sec-top-auto', 'bx-def-margin-sec-bottom',
-        'bx-def-margin-thd', 'bx-def-margin-thd-left', 'bx-def-margin-thd-left-auto', 'bx-def-margin-thd-right', 'bx-def-margin-thd-top', 'bx-def-margin-thd-top-auto', 'bx-def-margin-thd-bottom',
-        'bx-def-padding', 'bx-def-padding-left', 'bx-def-padding-left-auto', 'bx-def-padding-right', 'bx-def-padding-top', 'bx-def-padding-top-auto', 'bx-def-padding-bottom',
-        'bx-def-padding-sec', 'bx-def-padding-sec-left', 'bx-def-padding-sec-left-auto', 'bx-def-padding-sec-right', 'bx-def-padding-sec-top', 'bx-def-padding-sec-top-auto', 'bx-def-padding-sec-bottom',
-        'bx-def-padding-thd', 'bx-def-padding-thd-left', 'bx-def-padding-thd-left-auto', 'bx-def-padding-thd-right', 'bx-def-padding-thd-top', 'bx-def-padding-thd-top-auto', 'bx-def-padding-thd-bottom',
+        'bx-def-margin', 'bx-def-margin-left', 'bx-def-margin-left-auto', 'bx-def-margin-right', 'bx-def-margin-top', 'bx-def-margin-top-auto', 'bx-def-margin-bottom', 'bx-def-margin-leftright', 'bx-def-margin-leftright-neg', 'bx-def-margin-topbottom', 'bx-def-margin-topbottom-neg', 
+        'bx-def-margin-sec', 'bx-def-margin-sec-left', 'bx-def-margin-sec-left-auto', 'bx-def-margin-sec-right', 'bx-def-margin-sec-top', 'bx-def-margin-sec-top-auto', 'bx-def-margin-sec-bottom', 'bx-def-margin-sec-leftright', 'bx-def-margin-sec-leftright-neg', 'bx-def-margin-sec-topbottom', 'bx-def-margin-sec-topbottom-neg', 
+        'bx-def-margin-thd', 'bx-def-margin-thd-left', 'bx-def-margin-thd-left-auto', 'bx-def-margin-thd-right', 'bx-def-margin-thd-top', 'bx-def-margin-thd-top-auto', 'bx-def-margin-thd-bottom', 'bx-def-margin-thd-leftright', 'bx-def-margin-thd-leftright-neg', 'bx-def-margin-thd-topbottom', 'bx-def-margin-thd-topbottom-neg', 
+        'bx-def-padding', 'bx-def-padding-left', 'bx-def-padding-left-auto', 'bx-def-padding-right', 'bx-def-padding-top', 'bx-def-padding-top-auto', 'bx-def-padding-bottom', 'bx-def-padding-leftright', 'bx-def-padding-topbottom', 'bx-def-padding-lefttopright', 'bx-def-padding-rightbottomleft', 
+        'bx-def-padding-sec', 'bx-def-padding-sec-left', 'bx-def-padding-sec-left-auto', 'bx-def-padding-sec-right', 'bx-def-padding-sec-top', 'bx-def-padding-sec-top-auto', 'bx-def-padding-sec-bottom', 'bx-def-padding-sec-leftright', 'bx-def-padding-sec-topbottom', 'bx-def-padding-sec-lefttopright', 'bx-def-padding-sec-rightbottomleft', 
+        'bx-def-padding-thd', 'bx-def-padding-thd-left', 'bx-def-padding-thd-left-auto', 'bx-def-padding-thd-right', 'bx-def-padding-thd-top', 'bx-def-padding-thd-top-auto', 'bx-def-padding-thd-bottom', 'bx-def-padding-thd-leftright', 'bx-def-padding-thd-topbottom', 'bx-def-padding-thd-lefttopright', 'bx-def-padding-thd-rightbottomleft', 
         'bx-def-font-small', 'bx-def-font-middle', 'bx-def-font-large', 'bx-def-font-h3', 'bx-def-font-h2', 'bx-def-font-h1', 
         'bx-def-a-colored',