@ozdao/prometheus-framework 0.1.99 → 0.2.1

package/src/modules/auth/components/pages/Invite.vue

@@ -1,30 +1,30 @@
 <template>
 	<section class="t-left pd-medium">
 		<!-- Header -->
-		<h3 class="mn-small">Вы были пригилашены в организацию</h3>
-		<p class="mn-semi t-transp">Пожалуйста, укажите пароль, на этом регистрация будет закочена.</p>
+		<h3 class="mn-b-small">Вы были пригилашены в организацию</h3>
+		<p class="mn-b-semi t-transp">Пожалуйста, укажите пароль, на этом регистрация будет закочена.</p>
 	
 		<!-- Form -->
-		<div  class="mn-semi radius-small o-hidden">
+		<div  class="mn-b-semi radius-small o-hidden">
 			<Field 
 				v-model:field="auth.state.user.password"
 				type="password" 	
 				:validation="passswordValidation" 
 				label="Пароль"		
 				placeholder="******" 
-				class="bg-white radius-small mn-small"
+				class="bg-white radius-small mn-b-small"
 			/>
 			<Field 
 				v-model:field="auth.state.user.passwordRepeat"
 				type="password" 	
 				label="Повторите пароль"		
 				placeholder="******" 
-				class="bg-white radius-small mn-semi"
+				class="bg-white radius-small mn-b-semi"
 				
 			/>
 		</div>
 		<!-- Button -->
-		<Button :disabled="invites.state.invite === null" :submit="onSubmit" :callback="redirectTo" class="mn-big">
+		<Button :disabled="invites.state.invite === null" :submit="onSubmit" :callback="redirectTo" class="mn-b-big">
 			<span  v-if="route.query.method === 'reset-password'">Поменять пароль</span>
 			<span v-else>Зарегистрироваться</span>
 		</Button>

package/src/modules/auth/components/pages/ResetPassword.vue

@@ -1,12 +1,12 @@
 <template>
 	<section class="t-left pd-medium">
-		<!-- <img src="@/assets/images/icons/password.png" class="i-extra mn-small"> -->
+		<!-- <img src="@/assets/images/icons/password.png" class="i-extra mn-b-small"> -->
 		<!-- Header -->
-		<h3 class="mn-small">{{ t('forgotPasswordTitle') }}</h3>
-		<p class="mn-small t-transp">{{ t('instructions') }}</p>
+		<h3 class="mn-b-small">{{ t('forgotPasswordTitle') }}</h3>
+		<p class="mn-b-small t-transp">{{ t('instructions') }}</p>
 		
 		<!-- Select -->
-		<div class="mn-small p-small uppercase t-semi bg-grey radius-big o-hidden">
+		<div class="mn-b-small p-small uppercase t-semi bg-grey radius-big o-hidden">
 			<Tab 
 				v-model:selected="tabAuth"
 				:tabs="[
@@ -20,8 +20,8 @@
 		<div class="pos-relative">
 		<!-- Phone -->
 			<transition name="slide-fade">
-				<div v-if="tabAuth === 'phone'" class="mn-semi radius-small o-hidden">
-					<p class="mn-small t-transp">{{ t('smsInfo') }}</p>
+				<div v-if="tabAuth === 'phone'" class="mn-b-semi radius-small o-hidden">
+					<p class="mn-b-small t-transp">{{ t('smsInfo') }}</p>
 					<FieldPhone
 						v-model:modelValue="auth.state.user.phone" 	
 						:dropdownOptions="{
@@ -32,14 +32,14 @@
 						:validation="phoneValidation" 
 						mode="national"
 						:inputOptions="{placeholder: t('phonePlaceholder')}"
-						class="bg-grey pd-small radius-small mn-thin" 
+						class="bg-grey pd-small radius-small mn-b-thin" 
 					/>
 				</div>
 			</transition>
 			<!-- Email -->
 			<transition name="slide-fade">
-				<div v-if="tabAuth === 'email'" class="mn-semi radius-small o-hidden">
-					<p class="mn-small t-transp">{{ t('emailInfo') }}</p>
+				<div v-if="tabAuth === 'email'" class="mn-b-semi radius-small o-hidden">
+					<p class="mn-b-small t-transp">{{ t('emailInfo') }}</p>
 					<Field 
 						v-model:field="auth.state.user.email" 		
 						:placeholder="t('emailPlaceholder')" 	
@@ -50,7 +50,7 @@
 			</transition>
 		</div>
 		<!-- Button -->
-		<Button :submit="onSubmit" :callback="redirectTo" class="mn-big">{{ t('sendCode') }}</Button>
+		<Button :submit="onSubmit" :callback="redirectTo" class="mn-b-big">{{ t('sendCode') }}</Button>
 	</section> 
 </template>
 

package/src/modules/auth/components/pages/SignIn.vue

@@ -1,20 +1,20 @@
 <template>
 	<section class="">
 		<!-- Header -->
-		<img :src="'/logo/logo_square.svg'" class="i-extra radius-small mn-small">
+		<img :src="'/logo/logo_square.svg'" class="i-extra radius-small mn-b-small">
 
-		<h3 class="mn-medium">
+		<h3 class="mn-b-medium">
 			{{ t('title') }}
 			<br>
 			<span class="t-semi">{{ t('subtitle') }}</span>
 		</h3>
 
-		<p class="mn-big">
+		<p class="mn-b-big">
 			<router-link :to="{name: 'Sign Up'}" class="underline t-second">{{ t('signup') }}</router-link>
 		</p>
 		
 			<!-- Select -->
-		<div class="mn-small p-small uppercase t-semi bg-grey radius-big o-hidden">
+		<div class="mn-b-small p-small uppercase t-semi bg-grey radius-big o-hidden">
 			<Tab 
 				v-model:selected="tabAuth"
 				:tabs="[
@@ -28,7 +28,7 @@
 		<div class="pos-relative">
 		<!-- Phone -->
 			<transition name="slide-fade">
-				<div v-show="tabAuth === 'phone'" class="mn-thin radius-small">
+				<div v-show="tabAuth === 'phone'" class="mn-b-thin radius-small">
 					<FieldPhone
 						v-model:modelValue="auth.state.user.phone" 	
 						:dropdownOptions="{
@@ -39,13 +39,13 @@
 						:validation="phoneValidation" 
 						mode="national"
 						:inputOptions="{placeholder: t('phonePlaceholder')}"
-						class="bg-grey pd-small radius-small mn-thin" 
+						class="bg-grey pd-small radius-small mn-b-thin" 
 					/>
 					
 				</div>
 			</transition>
 			<transition name="slide-fade">
-				<div v-show="tabAuth === 'email'" class="mn-thin radius-small o-hidden">
+				<div v-show="tabAuth === 'email'" class="mn-b-thin radius-small o-hidden">
 					<Field 
 						v-model:field="auth.state.user.email" 	
 						:placeholder="t('emailPlaceholder')" 	
@@ -66,11 +66,11 @@
         bg-grey
         pd-medium
         radius-small
-        mn-semi
+        mn-b-semi
       "
 		/>
 		<!-- Links -->
-		<div class="w-100 mn-big">
+		<div class="w-100 mn-b-big">
 			<router-link
 				to="/auth/reset-password" 
 				class="underline d-block t-blue"
@@ -82,7 +82,7 @@
 		<Button 
 			:submit="onSubmit" 
 			:callback="redirectTo" 
-			class="mn-thin"
+			class="mn-b-thin"
 		>
 			{{ t('signin') }}
 		</Button>
@@ -90,7 +90,7 @@
 		<!-- <Button 
 			:submit="onSubmitApple" 
 			:callback="redirectTo" 
-			class="mn-thin bg-black t-white"
+			class="mn-b-thin bg-black t-white"
 		>
 			{{ t('signin_apple') }}
 		</Button> -->

package/src/modules/auth/components/pages/SignUp.vue

@@ -1,12 +1,12 @@
 <template>
 	<section class="t-left pd-medium">
 		<!-- Header -->
-		<!-- <img src="@/assets/images/logo.svg" class="i-extra mn-small"> -->
-		<h3 class="mn-small">{{t('title')}}</h3>
-		<p class="mn-small t-transp">{{t('description')}}</p>
+		<!-- <img src="@/assets/images/logo.svg" class="i-extra mn-b-small"> -->
+		<h3 class="mn-b-small">{{t('title')}}</h3>
+		<p class="mn-b-small t-transp">{{t('description')}}</p>
 		
 		<!-- Select -->
-		<div class="mn-small p-small uppercase t-semi bg-grey radius-big o-hidden">
+		<div class="mn-b-small p-small uppercase t-semi bg-grey radius-big o-hidden">
 			<Tab 
 				v-model:selected="tabAuth"
 				:tabs="[
@@ -20,8 +20,8 @@
 		<div class="pos-relative">
 		<!-- Phone -->
 			<transition name="slide-fade">
-				<div v-show="tabAuth === 'phone'" class="mn-semi radius-small">
-					<p class="mn-small t-transp">{{t('smsNotice')}}</p>
+				<div v-show="tabAuth === 'phone'" class="mn-b-semi radius-small">
+					<p class="mn-b-small t-transp">{{t('smsNotice')}}</p>
 					<FieldPhone
 						v-model:modelValue="auth.state.user.phone" 	
 						:dropdownOptions="{
@@ -32,14 +32,14 @@
 						:validation="phoneValidation" 
 						mode="national"
 						:inputOptions="{placeholder: t('phonePlaceholder')}"
-						class="bg-grey pd-small radius-small mn-thin" 
+						class="bg-grey pd-small radius-small mn-b-thin" 
 					/>
 					
 				</div>
 			</transition>
 			<transition name="slide-fade">
-				<div v-show="tabAuth === 'email'" class="mn-semi radius-small o-hidden">
-					<p class="mn-small t-transp">{{t('emailNotice')}}</p>
+				<div v-show="tabAuth === 'email'" class="mn-b-semi radius-small o-hidden">
+					<p class="mn-b-small t-transp">{{t('emailNotice')}}</p>
 					<Field 
 						v-model:field="auth.state.user.email" 	
 						:placeholder="t('emailPlaceholder')" 	
@@ -51,11 +51,11 @@
 		</div>
 		
 		<!-- Button -->
-		<Button :submit="onSubmit" :callback="redirectTo" class="mn-big">{{t('sendCode')}}</Button>
+		<Button :submit="onSubmit" :callback="redirectTo" class="mn-b-big">{{t('sendCode')}}</Button>
 			
 		<!-- Links -->
 		<div class="w-100">
-			<router-link to="/auth/signin" class="underline mn-medium d-block t-blue">{{t('haveAccount')}}</router-link>
+			<router-link to="/auth/signin" class="underline mn-b-medium d-block t-blue">{{t('haveAccount')}}</router-link>
 		</div>
 
 	</section> 

package/src/modules/auth/components/sections/SliderFeatures.vue

@@ -73,8 +73,8 @@ onMounted(() => {
     <Slide v-for="(feature, index) in tm('features')" :key="index" class="w-100 flex-v-center flex">
       <div class="parent-div">
           <div class="background-div" :style="`background-image: url(/assets/images/features/${index}.png); background-size: auto 100%; background-repeat: no-repeat; background-position: center center;`"></div>
-          <h4 class="mn-small">{{ feature.title }}</h4>
-          <p class='mn-big mn-r-small mn-l-small'>{{ feature.description }}</p>
+          <h4 class="mn-b-small">{{ feature.title }}</h4>
+          <p class='mn-b-big mn-r-small mn-l-small'>{{ feature.description }}</p>
       </div>
     </Slide>
   </Carousel>

package/src/modules/backoffice/components/admin/Categories.vue

@@ -2,7 +2,7 @@
 <div>
   <!-- Toolbar -->
   <section class="pageheader section">
-    <div class="mn-big title">
+    <div class="mn-b-big title">
       <h1>Категории товаров</h1>
       <router-link :to="'/admin/categories/add'"  class="i-regular pd-thin button-delete button"><img src="@/assets/icons/plus-white.svg"></router-link>
     </div>
@@ -12,7 +12,7 @@
     <VueDraggableNext class="dragArea list-group w-full" :list="categories.all"  :sort="true" @change="log">
         <div  v-for="(category,index) in categories.all"  >
           {{test(category,index)}}
-           <CategoryCard   :category="category" :key="index" class="list-group-item mn-medium"></CategoryCard>
+           <CategoryCard   :category="category" :key="index" class="list-group-item mn-b-medium"></CategoryCard>
         </div>
     </VueDraggableNext>
     <button @click="store.dispatch('categories/updateCategories', categories)" class="button">Обновить порядок</button>

package/src/modules/backoffice/components/admin/CategoryEdit.vue

@@ -3,7 +3,7 @@
 	<!-- 01. Page Title  -->
 	<!-- ---------------------------------------------------------------- -->
 	<section class="pageheader section">
-		<div class="mn-big title">
+		<div class="mn-b-big title">
 			<h1 v-if="route.params.url">Редактировать категорию</h1>
 			<h1 v-else>Добавить категорию</h1>
 		</div>
@@ -18,7 +18,7 @@
 			<!-- ---------------------------------------------------------------- -->
 			<!-- Category Info -->
 			<!-- ---------------------------------------------------------------- -->
-			<div class="mn-big flex-column flex block">
+			<div class="mn-b-big flex-column flex block">
 				<div class="w-100 flex-nowrap flex">
 					<InputText :obj="'categories'" :prop="'current.url'" :value="category.url" label="URL категории" class="mn-r-small"/>
 					<InputText :obj="'categories'" :prop="'current.name'" :value="category.name" label="Название"/>

package/src/modules/backoffice/components/admin/Dashboard.vue

@@ -2,7 +2,7 @@
   <!-- Toolbar -->
   <section class="pageheader section">
     
-    <div class="mn-big title">
+    <div class="mn-b-big title">
       <h1>Категории товаров</h1>
       <div class="round-stat">{{categories.length}}</div>
     </div>

package/src/modules/backoffice/components/admin/FastOrders.vue

@@ -41,16 +41,16 @@
           </div>
         </div>
 
-        <hr clas="mn-small mn-t-small">
+        <hr clas="mn-b-small mn-t-small">
         <div  v-if="fastorder.products.length > 0" class="w-100 spoiler">
-          <div @click="spoiler = !spoiler"  class="mn-small flex">
+          <div @click="spoiler = !spoiler"  class="mn-b-small flex">
             <!-- <span>Всего товаров {{leftover.positions.length}}</span> -->
             <img :class="{ 'spoiler-active': spoiler }" class="button-icon" src="@/assets/icons/arrow-down-spoiler.svg">
           </div>
 
           <transition name="fade">
             <div v-if="spoiler">
-              <div  v-for="position in fastorder.products" class="w-100 mn-thin flex"> 
+              <div  v-for="position in fastorder.products" class="w-100 mn-b-thin flex"> 
                 <div class=" w-50 flex">
                   <span>
                     <!-- <span class="t-transp">Название:</span>  -->

package/src/modules/backoffice/components/admin/PageEdit.vue

@@ -13,7 +13,7 @@
     <!-- Empty State -->
     <InputText :obj="'pages'" :prop="'current.name'" :value="page.name" label="Название страницы"/>
     <InputText :obj="'pages'" :prop="'current.url'" :value="page.url" label="URL"/>
-    <InputText :obj="'pages'" :prop="'current.groups'" :value="page.groups" label="Отобразить в" class="mn-big"/>
+    <InputText :obj="'pages'" :prop="'current.groups'" :value="page.groups" label="Отобразить в" class="mn-b-big"/>
 
     <EditCategories 
       :category="page" 
@@ -39,12 +39,12 @@
 
 
   <div  class="bg-white pd-t-zero pd-big page-content-edit"> 
-    <p class="mn-small t-semi p-big">Контент страницы</p>
+    <p class="mn-b-small t-semi p-big">Контент страницы</p>
     <textarea
       @input="updateInputText('pages', 'current.content', $event)" 
       :value="page.content" 
       placeholder="Не указано"
-      class="mn-small input-textarea"
+      class="mn-b-small input-textarea"
     />
   </div>
   <section class="pd-big flex">

package/src/modules/backoffice/components/admin/Pages.vue

@@ -18,7 +18,7 @@
 
       <div class="flex block">
         <div>
-        <p class="mn-thin p-big">
+        <p class="mn-b-thin p-big">
           {{page.name}}
         </p>
 

package/src/modules/backoffice/components/admin/ProductEdit.vue

@@ -3,7 +3,7 @@
 	<!-- 01. Page Title  -->
 	<!-- ---------------------------------------------------------------- -->
 	<section class="pageheader section">
-		<div class="mn-big title">
+		<div class="mn-b-big title">
 			<h1 v-if="route.params._id">Редактировать товар</h1>
 			<h1 v-else>Добавить товар</h1>
 		</div>

package/src/modules/backoffice/components/admin/User.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="section-header section">
     <div class="title">
-      <h1 class="mn-regular">Редактировать пользователя</h1>
+      <h1 class="mn-b-regular">Редактировать пользователя</h1>
        <p class="t-transp w-100 h3">
         #{{user._id}} 
       </p>
@@ -11,13 +11,13 @@
 
   <section class=" bg-grey br-bot-dark section-subsection section">
 
-    <h5 class="w-100 mn-small">Данные для входа  <TestButton></TestButton>
+    <h5 class="w-100 mn-b-small">Данные для входа  <TestButton></TestButton>
 
     </h5>
-    <div class="cols-2 mn-medium ">
+    <div class="cols-2 mn-b-medium ">
        <!-- <p class="w-100">Время создания: {{DateToFormattedString(order.createdAt)}}</p> -->
       <div class="col flex block">
-        <p class="mn-small w-100">
+        <p class="mn-b-small w-100">
           Номер клиента:
         </p>
         <div class="w-100 flex-nowrap flex">
@@ -31,7 +31,7 @@
         </div>
       </div>
        <div class="col flex block">
-        <p class="mn-small w-100">
+        <p class="mn-b-small w-100">
           Роли: 
         </p>
         <vue-select :options="roles" :label-by="'translate'" :close-on-select="true"> </vue-select>
@@ -40,7 +40,7 @@
       
     </div> 
      <div class="flex block">
-      <p class="mn-small  w-100">
+      <p class="mn-b-small  w-100">
         Пароль:
       </p>
       <div class="w-100 flex-nowrap flex">

package/src/modules/backoffice/components/admin/Users.vue

@@ -34,14 +34,14 @@
   <section class="cols-3 bg-grey br-bot-dark section-subsection section">
     <TestButton></TestButton>
     <div v-for="user in users" class="order-card col"> 
-      <p class=" mn-small order-status w-100">
+      <p class=" mn-b-small order-status w-100">
          <ul>
           <li v-for="role in user.roles" :key="role">{{role.translate}}</li>
         </ul>
       </p>
 
       <div class="flex block">
-        <p class="w-100 mn-thin p-big">
+        <p class="w-100 mn-b-thin p-big">
           <!-- +7{{user.phone}}  -->
         </p>
          
@@ -49,10 +49,10 @@
          <p class="w-100">
           Номер клиента: +7{{user.phone}}<br>
         </p>
-        <p class="mn-small w-100">
+        <p class="mn-b-small w-100">
           <!-- Имя клиента: {{order.info.name}}<br> -->
         </p>
-        <hr class="mn-small">
+        <hr class="mn-b-small">
         <router-link :to="{ name: 'User', params: { phone: user.phone }}" class="link">Редактировать</router-link>
       </div>
     </div>

package/src/modules/backoffice/components/layouts/Backoffice.vue

@@ -7,7 +7,7 @@
       <button 
         @click="$router.push('/account/community')" 
         :class="{'product-tab-active': $route.path === '/account/community'}" 
-        class="mn-small product-tab"
+        class="mn-b-small product-tab"
        >
         Blog
       </button>

package/src/modules/backoffice/components/pages/Dashboard.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="">
-		<h1 class="mn-small">Your Backoffice</h1>
+		<h1 class="mn-b-small">Your Backoffice</h1>
 		<Menu 
 				class="bg-grey"
 			>

package/src/modules/community/components/blocks/CardBlogpost.vue

@@ -16,7 +16,7 @@
 
 		<CardHeader 
 		    :class="{
-		    	'mn-small pd-medium': type !== 'short',
+		    	'mn-b-small pd-medium': type !== 'short',
 		    	'flex-child-order-last flex-child mn-l-small': type === 'short',
 		    }"
 		    :entity="blogpost"
@@ -33,7 +33,7 @@
 			<img 
 				:src="(FILE_SERVER_URL || '') + firstImage.content" 
 				alt="Blog post image" 
-				class="mn-medium object-fit-cover w-100 h-20r"
+				class="mn-b-medium object-fit-cover w-100 h-20r"
 			/>
 		</template>
 
@@ -41,7 +41,7 @@
 			class="pd-t-zero pd-medium"
 		>
 			
-			<div v-if="type !== 'blogpostPage'" class="cursor-pointer mn-thin flex-nowrap flex w-100">
+			<div v-if="type !== 'blogpostPage'" class="cursor-pointer mn-b-thin flex-nowrap flex w-100">
 
 				<h3
 					@click="router.push({
@@ -61,12 +61,12 @@
 			</div>
 			<p 
 				v-if="firstText && firstText.content && type !== 'blogpostPage'" 
-				class='mn-small t-transp p-big'
+				class='mn-b-small t-transp p-big'
 			>
 				{{firstText.content.slice(0,120)}}...
 			</p>
 
-			<h3 v-if="type === 'blogpostPage'" class="mn-small h2">{{blogpost.name}}</h3>
+			<h3 v-if="type === 'blogpostPage'" class="mn-b-small h2">{{blogpost.name}}</h3>
 
 			<slot></slot>
 

package/src/modules/community/components/layouts/Community.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="min-h-100vh pd-thin">
 
-		<header class="mn-thin flex-v-center t-left flex-nowrap flex">
+		<header class="mn-b-thin flex-v-center t-left flex-nowrap flex">
     	<h2 class="flex-v-center flex-nowrap flex t-left">
     		<span class="">Topics for </span>
 
@@ -23,7 +23,7 @@
     	</h2>
 		</header>
 		
-		<ul class="w-100 bg-grey pd-small radius-big mn-semi gap-thin flex-nowrap flex">
+		<ul class="w-100 bg-grey pd-small radius-big mn-b-semi gap-thin flex-nowrap flex">
 			<li  	
 			:class="{'t-white bg-black': route.params.category === 'featured' }" 					
 			@click="router.push({name: 'Blog'})" 

package/src/modules/community/components/pages/BlogPost.vue

@@ -14,7 +14,7 @@
         v-if="!isLoading && !blogpost"
         title="No Blogpost Found"
         description="Currently, there are no blogposts available. Please check back later."
-        class="pd-medium mn-thin bg-grey radius-big"
+        class="pd-medium mn-b-thin bg-grey radius-big"
       />
     </transition>
 
@@ -26,7 +26,7 @@
           :blogpost="blogpost" 
           :user="auth.state.user._id"
           :type="'blogpostPage'"
-          class="mn-medium"
+          class="mn-b-medium"
           :class="{
             'br-b br-solid br-black-transp-10': index !== blogpost.length - 1
           }"
@@ -43,13 +43,13 @@
 						:class="block.class"
 						content="content"
 						v-bind="getBlockProps(block)"
-						class="mn-regular"
+						class="mn-b-regular"
 					/>
 				</section>
       </CardBlogpost>
 
 			<Publics 
-				class="mn-small"
+				class="mn-b-small"
 			/>
 
       <Comments 

package/src/modules/community/components/pages/Community.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="flex-v-center flex-nowrap flex mn-medium">
+    <div class="flex-v-center flex-nowrap flex mn-b-medium">
       <h3 class="mn-r-medium">Blog</h3>
       <button @click="router.push({name: 'Create BlogPost'})" class="t-white bg-second button-small button">+</button>
     </div>
@@ -12,7 +12,7 @@
         :key="blogpost._id" 
         :blogpost="blogpost" 
         :owner="auth.state.user._id" 
-        class="mn-medium"
+        class="mn-b-medium"
       >
         <div class="flex-nowrap flex pd-t-zero pd-b-zero pd-big">
           <button class="mn-r-thin button-small w-100 button" @click="$router.push({path: '/community/posts/' +  blogpost.url + '/edit'})">Edit</button>

package/src/modules/community/components/pages/CreateBlogPost.vue

@@ -38,14 +38,14 @@
       :isPopupOpen="isPublicationPopup"
       class="w-m-33r t-left pd-big bg-white radius-big"
     >
-      <h3 class="mn-small">Final Touches</h3>
+      <h3 class="mn-b-small">Final Touches</h3>
       
       <BlockTags
         @tags-changed="newTags => post.tags = newTags"
         :tags="post.tags"
       />
 
-      <h5 class="mn-thin">Add to public:</h5>
+      <h5 class="mn-b-thin">Add to public:</h5>
       <SelectMulti
         v-model="selectedOrganization"
         :options="publics"
@@ -54,10 +54,10 @@
         placeholder="Type to search or add tag"
         label="name"
         track-by="_id"
-        class="mn-medium bg-grey radius-medium pd-small"
+        class="mn-b-medium bg-grey radius-medium pd-small"
       />
-      <h5 v-if="selectedOrganization" class="mn-thin">Options:</h5>
-      <div v-if="selectedOrganization" class="mn-medium br-grey br-2px br-solid pd-small radius-big">
+      <h5 v-if="selectedOrganization" class="mn-b-thin">Options:</h5>
+      <div v-if="selectedOrganization" class="mn-b-medium br-grey br-2px br-solid pd-small radius-big">
         <Checkbox 
           :label="'Hide Author'"
           :radio="post.creator.hidden"

package/src/modules/community/components/sections/Comments.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
     <div>
-      <h3 class="mn-small">{{ comments.length }} comments</h3>
+      <h3 class="mn-b-small">{{ comments.length }} comments</h3>
 
-      <div @click="$router.push({name: 'Sign In'})" class="cursor-pointer mn-small section bg-black t-white flex-center flex radius-big" v-if="!owner">
+      <div @click="$router.push({name: 'Sign In'})" class="cursor-pointer mn-b-small section bg-black t-white flex-center flex radius-big" v-if="!owner">
         <p class="t-semi uppercase">Please log in to leave a comment.</p>
       </div>
 
-      <div class="mn-small" v-if="owner">
+      <div class="mn-b-small" v-if="owner">
         <form @submit.prevent="submitComment" class="bg-grey radius-big pd-medium">
           <textarea v-model="commentContent" placeholder="Enter your comment" class="pd-small p-big w-100 radius-small mn-r-small"></textarea>
           <button type="submit" class="mn-l-auto bg-main button">Send</button>
@@ -15,10 +15,10 @@
       </div>
     </div>
 
-    <div v-for="comment in comments" :key="comment._id" class="comment mn-small radius-big pd-medium bg-grey">
+    <div v-for="comment in comments" :key="comment._id" class="comment mn-b-small radius-big pd-medium bg-grey">
 
       <CardHeader 
-        class="mn-medium"
+        class="mn-b-medium"
         :entity="comment"
         :entityType="'comment'"
         :user="owner"

package/src/modules/community/components/sections/Feed.vue

@@ -11,7 +11,7 @@
       v-if="!isLoading && posts.length < 1"
       title="No Blog Posts Found"
       description="Currently, there are no posts available in this blog. Please check back later."
-      class="pd-medium mn-thin bg-grey radius-big"
+      class="pd-medium mn-b-thin bg-grey radius-big"
     />
     <div :class="$attrs.class" v-else>
 
@@ -20,7 +20,7 @@
         :key="blogpost._id" 
         :blogpost="blogpost" 
         :user="user" 
-        class="mn-medium"
+        class="mn-b-medium"
       />
         
         <transition