gaco_cms 0.1.0

data/app/assets/javascripts/gaco_cms/base.js

@@ -0,0 +1,24 @@
+import application from './stimulus';
+
+import TranslatableController from './controllers/translatable_controller';
+import EditorController from './controllers/editor_controller';
+import DeletableRowController from './controllers/deletable_row_controller';
+import FormConfirmController from "./controllers/confirm_controller";
+import RepeatableFieldController from './controllers/repeatable_field_controller';
+import FileInputController from './controllers/file_input_controller';
+import RemoteContentController from './controllers/remote_content_controller';
+import ToggleFieldController from './controllers/toggle_field_controller';
+import SortableController from './controllers/sortable_controller';
+import ModalController from './controllers/modal_controller';
+
+application.register('gaco-cms-translatable', TranslatableController);
+application.register('gaco-cms-editor', EditorController);
+application.register('gaco-cms-deletable_row', DeletableRowController);
+application.register('gaco-cms-repeatable-field', RepeatableFieldController);
+application.register('gaco-cms-file-input', FileInputController);
+application.register('gaco-cms-remote-content', RemoteContentController);
+application.register('gaco-cms-toggle-field', ToggleFieldController);
+application.register('gaco-cms-sortable', SortableController);
+application.register('gaco-cms-modal', ModalController);
+application.register('form-confirm', FormConfirmController);
+

data/app/assets/javascripts/gaco_cms/controllers/confirm_controller.ts

@@ -0,0 +1,20 @@
+import { Controller } from '@hotwired/stimulus';
+
+// Sample: = form_for @appointment, url: url_for(action: :destroy), method: :delete, html: { data: { controller: 'form-confirm', 'confirm' => 'Are you sure you want to cancel this appointment?' } } do |f|
+export default class extends Controller {
+  static values = { message: String };
+  declare  messageValue: string;
+  declare element: HTMLFormElement|HTMLElement;
+
+	initialize() {
+    const action = this.element.tagName == 'FORM' ? 'submit' : 'click';
+    this.element.addEventListener(action, this.confirm.bind(this), false);
+  }
+
+  confirm(event) {
+    if (!(window.confirm(this.messageValue || this.element.getAttribute('data-confirm')))) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  };
+}

data/app/assets/javascripts/gaco_cms/controllers/deletable_row_controller.ts

@@ -0,0 +1,46 @@
+import { Controller } from '@hotwired/stimulus';
+
+// Sample: = f.check_box :_destroy, 'data-controller': 'gaco-cms-deletable_row', 'data-hide-closest': '.list-group-item', 'data-hideonly': value.id.present?
+//	data-hideonly => [boolean] if data-hideonly is empty or false, just hide the data-hide-closest panel, else, it is removed
+//	data-hide-closest => [css selector] the panel to be hide/removed
+//  data-propagate => [css selector] elements to be marked as checked
+
+export default class extends Controller {
+  declare element: HTMLInputElement;
+  declare panelToHide: HTMLElement;
+  declare isSaved: boolean;
+
+	initialize() {
+		this.element.style.display = 'none';
+		this.element.insertAdjacentHTML('afterend', this.deleteBtn());
+		const hideTarget = this.element.getAttribute('data-hide-closest');
+		this.isSaved = (this.element.getAttribute('data-hideonly') || 'false') != 'false';
+		if (hideTarget) this.panelToHide = this.element.closest(hideTarget);
+		this.bindEvent();
+	}
+
+	deleteBtn() {
+		return `<button type="button" class="btn btn-danger btn-sm del-btn">
+				<i class="fa fa-trash"></i>
+			</button>`;
+	}
+
+	bindEvent() {
+		const that = this;
+		this.element.nextElementSibling.addEventListener('click', () => {
+			if (!that.isSaved || confirm('Are you sure?')) {
+				that.element.checked = true;
+				if (that.panelToHide) that.hidePanel();
+			}
+		}, false);
+	}
+
+	hidePanel() {
+		if (this.isSaved) {
+			this.panelToHide.style.display = 'none';
+			const propagated = this.element.getAttribute('data-propagate');
+			if (propagated)
+				this.panelToHide.querySelectorAll<HTMLInputElement>(propagated).forEach((ele) => ele.checked = true);
+		} else this.panelToHide.remove();
+	}
+}

data/app/assets/javascripts/gaco_cms/controllers/editor_controller.ts

@@ -0,0 +1,58 @@
+import { Controller } from '@hotwired/stimulus';
+
+// Sample: = f.text_area :template, class: 'form-control', data: { controller: 'gaco-cms-editor', height: '400' }
+export default class extends Controller {
+  declare element: HTMLTextAreaElement|HTMLInputElement;
+
+	initialize() {
+  	const attrController = this.element.getAttribute('data-controller');
+  	const isTranslatable = attrController.includes('gaco-cms-translatable');
+  	if (!isTranslatable) this.buildEditor();
+  }
+
+	// source code: https://www.tiny.cloud/docs/demo/file-picker/
+	buildEditor() {
+		const that = this;
+		tinyMCE.baseURL = "/assets/gaco_cms/tinymce";
+		tinymce.init({
+			selector: `#${this.element.id}`,
+			plugins: 'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap quickbars emoticons',
+			image_title: true,
+			automatic_uploads: true,
+			images_upload_url: window.gaco_cms_config.upload_path,
+			height: this.element.dataset.height || 600,
+			content_css: window.gaco_cms_config.editor_css,
+			convert_urls: false,
+			file_picker_callback: function (cb, value, meta) {
+				that.uploadFile(cb, that.calcFormat(meta));
+			},
+			content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
+		});
+	}
+
+	calcFormat(meta) {
+		if (meta.filetype === 'file') return '*/*';
+		if (meta.filetype === 'image') return 'image/*';
+		if (meta.filetype === 'media') return 'audio/*,video/*';
+	}
+
+	uploadFile(cb, format) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'file');
+		input.setAttribute('accept', format);
+		input.onchange = function () {
+			var file = this.files[0];
+			var reader = new FileReader();
+			reader.onload = function () {
+				var id = 'blobid' + (new Date()).getTime();
+				var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
+				var base64 = reader.result.split(',')[1];
+				var blobInfo = blobCache.create(id, file, base64);
+				blobCache.add(blobInfo);
+				cb(blobInfo.blobUri(), { title: file.name });
+			};
+			reader.readAsDataURL(file);
+		};
+		input.click();
+	}
+}

data/app/assets/javascripts/gaco_cms/controllers/file_input_controller.ts

@@ -0,0 +1,82 @@
+import { Controller } from '@hotwired/stimulus';
+import { ajaxRequest } from "../lib/request";
+
+// converts a text-field into a uploadable field
+// Sample:
+//   .photo_panel{ data: { controller: 'gaco-cms-file-input' } }
+//     = f.text_field :photo_url, class: 'form-control', accept: 'image/*', data: { 'gaco-cms-file-input-target': 'input' }
+export default class extends Controller {
+  declare element: HTMLElement;
+	static targets = ['input'];
+	declare inputTarget: HTMLInputElement;
+
+
+	initialize() {
+  	setTimeout(this.parseElement.bind(this), 200); // delay to wait for translatable structure
+  }
+
+  parseElement() {
+		this.element.setAttribute('data-file-input-redered', 'true');
+		this.element.classList.add('input-group');
+		this.element.insertAdjacentHTML('beforeend', this.tpl());
+		this.bindPreview();
+		this.dispatchChange();
+		this.bindUploader();
+	}
+
+  tpl() {
+  	return `
+			<button class="btn btn-outline-light btn-upload" type="button">
+				<i class="fa fa-upload"></i>
+			</button>
+			<span class="preview input-group-text p-0"></span>`;
+	}
+
+	bindPreview() {
+		const that = this;
+		const preview = this.element.querySelector('.preview');
+  	this.inputTarget.addEventListener('change', () => {
+  		preview.innerHTML = that.previewTpl(that.inputTarget.value);
+		});
+	}
+
+	previewTpl(url) {
+		const previewExt = ['png', 'jpg', 'jpeg', 'gif'];
+		if (!url) return '';
+		if (!previewExt.includes(url.split('.').pop().toLowerCase())) return '';
+
+  	return `
+  		<a href="${url}" target="_blank">
+  			<img src="${url}" style="max-width: 50px; max-height: 50px;" />
+			</a>
+  	`;
+	}
+
+	bindUploader() {
+		const btn = this.element.querySelector('.btn-upload');
+		const that = this;
+  	btn.addEventListener('click', () => {
+			const input = document.createElement('input');
+			input.setAttribute('type', 'file');
+			input.setAttribute('accept', that.inputTarget.getAttribute('accept'));
+			input.onchange = async function () {
+				await that.uploadFile(input);
+			};
+			input.click();
+		});
+	}
+
+	async uploadFile(field: HTMLInputElement) {
+		const formData = new FormData();
+		formData.append('file', field.files[0]);
+		const res = await ajaxRequest(window.gaco_cms_config.upload_path, formData, 'POST', 'json');
+		if (res) {
+			this.inputTarget.value = res.location;
+			this.dispatchChange();
+		}
+	}
+
+	dispatchChange() {
+		this.inputTarget.dispatchEvent(new Event('change'));
+	}
+}

data/app/assets/javascripts/gaco_cms/controllers/modal_controller.ts

@@ -0,0 +1,73 @@
+import { Controller } from '@hotwired/stimulus';
+import { Modal } from 'bootstrap';
+
+let modalsCounter = 1;
+export default class extends Controller {
+  static values = { body: String, title: String, target: String, size: String, selfModal: Boolean };
+  declare bodyValue: string;
+  declare titleValue: string;
+  declare targetValue: string;
+  declare sizeValue: string;
+  declare selfModalValue: boolean;
+  declare element: HTMLLinkElement|HTMLButtonElement;
+  declare modalId: string;
+
+	initialize() {
+		const that = this;
+		if (this.selfModalValue) {
+			this.buildModal();
+			this.element.remove();
+		} else {
+			this.element.addEventListener('click', (e) => {
+				e.preventDefault();
+				e.stopPropagation();
+				that.buildModal();
+			});
+		}
+  }
+
+  tpl(content) {
+		return `
+			<div class="modal fade" id="${this.modalId}" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
+				<div class="modal-dialog ${this.sizeValue}">
+					<div class="modal-content">
+						<div class="modal-header">
+							<h5 class="modal-title">${this.titleValue || this.element.getAttribute('data-title') || ''}</h5>
+							<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+						</div>
+						<div class="modal-body">
+							${content}
+						</div>
+					</div>
+				</div>
+      </div>
+		`;
+	}
+
+	calcContent() {
+		if (this.selfModalValue) return this.element.innerHTML;
+		if (this.bodyValue) return this.bodyValue;
+		if (this.targetValue) return document.body.querySelector(this.targetValue).innerHTML;
+		if (this.element.tagName == 'A')
+			return `<turbo-frame id='turbo-frame-${this.modalId}' src='${this.element.href}'></turbo-frame>`;
+
+		return '';
+	}
+
+	buildModal() {
+		this.modalId = `modal_${modalsCounter}`;
+		document.body.insertAdjacentHTML('beforeend', this.tpl(this.calcContent()));
+		modalsCounter += 1;
+		setTimeout(this.showModal.bind(this), 2);
+	}
+
+	showModal() {
+		const modalEle = document.getElementById(this.modalId);
+		const modal = new Modal(modalEle);
+		modal.show();
+		modalEle.addEventListener('close-modal', () => { modal.hide() });
+		modalEle.addEventListener('hidden.bs.modal', function (event) {
+			modalEle.remove();
+		});
+	}
+}

data/app/assets/javascripts/gaco_cms/controllers/remote_content_controller.ts

@@ -0,0 +1,27 @@
+import { Controller } from '@hotwired/stimulus';
+import { ajaxRequest } from "../lib/request";
+
+// Sample: %li= link_to(v, url_for(action: :new_field, id: @group, kind: k), class: 'dropdown-item', data: { controller: 'gaco-cms-remote-content', 'gaco-cms-remote-content-target-value': '#fields_list' })
+export default class extends Controller {
+  declare element: HTMLLinkElement;
+	static values = { target: String };
+	declare targetValue: string;
+
+
+	initialize() {
+  	const that = this;
+  	this.element.addEventListener('click', (ev) => {
+  		ev.preventDefault();
+  		that.loadContent();
+		});
+  }
+
+	async loadContent() {
+		const res = await ajaxRequest(this.element.href);
+		if (!res) return;
+
+		document.body.querySelector<HTMLElement>(this.targetValue).insertAdjacentHTML('beforeend', res);
+		// TODO: if inside modal, scroll modal scroll instead of window
+		window.scrollTo(0, document.body.scrollHeight);
+	}
+}

data/app/assets/javascripts/gaco_cms/controllers/repeatable_field_controller.ts

@@ -0,0 +1,26 @@
+import { Controller } from '@hotwired/stimulus';
+import { ajaxRequest } from "../lib/request";
+
+// Add the ability to load tpl content from server via ajax and add it to listTarget
+// Sample:
+//  .fields-list{ 'data-controller': 'gaco-cms-repeatable-field' }
+//     = link_to 'My Title' tpl_admin_field_path(id: field, group_no: group_no), class: 'btn btn-sm', 'data-gaco-cms-repeatable-field-target' => 'button'
+//     %ul.list-group.list-group-flush{ 'data-gaco-cms-repeatable-field-target': 'list' }
+export default class extends Controller {
+	static targets = ['button', 'list'];
+	declare element: HTMLElement;
+	declare buttonTarget: HTMLLinkElement;
+	declare listTarget: HTMLUListElement;
+	declare hasButtonTarget: boolean
+
+	initialize() {
+		if (!this.hasButtonTarget) return;
+		this.buttonTarget.addEventListener('click', this.loadTpl.bind(this));
+	}
+
+	async loadTpl(event) {
+		event.preventDefault();
+		const res = await ajaxRequest(this.buttonTarget.href);
+		this.listTarget.insertAdjacentHTML('beforeend', res);
+	}
+}

data/app/assets/javascripts/gaco_cms/controllers/sortable_controller.ts

@@ -0,0 +1,27 @@
+import { Controller } from '@hotwired/stimulus';
+import Sortable from 'sortablejs';
+
+// Sample:
+//    #fields_list.accordion{ data: { controller: 'gaco-cms-sortable', 'gaco-cms-sortable-handle-value': '.accordion-item .sort-btn', 'gaco-cms-sortable-input-selector-value': '.position-field' } }
+export default class extends Controller {
+  declare element: HTMLElement;
+  static values = { handle: String, inputSelector: String };
+  declare handleValue: string;
+  declare inputSelectorValue: string;
+
+	initialize() {
+    new Sortable(this.element, {
+      handle: this.handleValue,
+      animation: 150,
+			onEnd: this.updateFieldValues.bind(this)
+    });
+  }
+
+  updateFieldValues() {
+    if (!this.inputSelectorValue) return;
+
+    this.element.querySelectorAll<HTMLInputElement>(this.inputSelectorValue).forEach((input, index) => {
+      input.value = `${index + 1}`;
+    });
+  }
+}

data/app/assets/javascripts/gaco_cms/controllers/toggle_field_controller.ts

@@ -0,0 +1,37 @@
+import { Controller } from '@hotwired/stimulus';
+
+// Sample:
+//   .fw{ data: { controller: 'gaco-cms-toggle-field', 'gaco-cms-toggle-field-open-value': @model.my_key.present? } }
+//		 = f.text_field :my_key
+export default class extends Controller {
+  declare element: HTMLDivElement;
+  static values = { open: Boolean };
+  declare openValue: boolean;
+
+	initialize() {
+		if (this.openValue) return;
+
+		this.element.insertAdjacentHTML('beforebegin', this.editIconTpl());
+		this.editBtn().addEventListener('click', this.showElement.bind(this));
+		this.element.classList.add('d-none');
+	}
+
+	showElement() {
+		this.element.classList.remove('d-none');
+		this.element.previousElementSibling.remove();
+	}
+
+	editIconTpl() {
+		return `
+			<div>
+				<button class="btn btn-sm btn-secondary edit-field" type="button">
+					<i class="fa fa-pencil"></i>
+				</button>
+			</div>
+		`;
+	}
+
+	editBtn() {
+		return this.element.previousElementSibling.querySelector('button');
+	}
+}

data/app/assets/javascripts/gaco_cms/controllers/translatable_controller.ts

@@ -0,0 +1,86 @@
+import { Controller } from '@hotwired/stimulus';
+
+let fieldsCounter = 0;
+// Sample: = f.text_field :title, value: @page.title_data.to_json, class: 'form-control', required: true, data: { controller: 'gaco-cms-translatable' }
+export default class extends Controller {
+  declare element: HTMLTextAreaElement|HTMLInputElement;
+	static values = {
+		closestClone: String
+	}
+  declare dataValue: object;
+	declare dataName: string;
+	declare locales: string[];
+	declare currentLoc: string;
+	declare closestCloneValue: string;
+
+	initialize() {
+		fieldsCounter += 1;
+		this.locales = window.gaco_cms_config.locales;
+		this.currentLoc = window.gaco_cms_config.locale;
+  	try {
+			this.dataValue = JSON.parse(this.element.value || '{}');
+		} catch {
+			this.dataValue = { [this.currentLoc]: this.element.value };
+		}
+  	this.dataName = this.element.name;
+		this.elementToHide().insertAdjacentHTML('afterend', this.tpl());
+  	this.hideElement();
+  }
+
+  hideElement() {
+		this.element.name = '';
+		this.elementToHide().style.display = 'none';
+	}
+
+	elementToHide(): HTMLElement {
+		if (!this.closestCloneValue) return this.element;
+
+		return this.element.closest<HTMLElement>(this.closestCloneValue);
+	}
+
+  tpl() {
+  	return `
+		<div class="translation-panel">
+			<ul class="nav nav-tabs justify-content-end" role="tablist" style="margin-top: -24px">
+				${ this.locales.map((loc) => 
+				`<li class="nav-item" role="presentation">
+					<button class="nav-link pt-0 pb-0 ${ loc == this.currentLoc ? 'active' : '' }" 
+						data-bs-target="#${this.localeKey(loc)}-tab" data-bs-toggle="tab" type="button" role="tab" 
+						aria-controls="${loc}" aria-selected="true" tabindex="-1">${loc}</button>
+				</li>` ).join('') }
+			</ul>
+			<div class="tab-content">
+				${ this.locales.map((loc) => 
+				`<div class="tab-pane fade ${ loc == this.currentLoc ? 'show active' : '' }" role="tabpanel" id="${this.localeKey(loc)}-tab">
+					${this.fieldFor(loc)}
+				 </div>` ).join('') }
+			</div>
+		</div>
+  	`;
+	}
+
+	localeKey(locale) {
+	  return `${this.dataName.replace(/[\W_]+/g, '_')}_${locale}_${fieldsCounter}`;
+	}
+
+	fieldFor(locale) {
+		const value = this.dataValue[locale] || '';
+  	const clone = this.element.cloneNode() as HTMLInputElement;
+		const updatedAttr = clone.getAttribute('data-controller').replace('gaco-cms-translatable', '');
+  	clone.setAttribute('data-controller', updatedAttr);
+		clone.setAttribute('value', value);
+		clone.removeAttribute('required'); // TODO: make only for the hidden ones
+		clone.innerHTML = value;
+  	clone.classList.add('translation-field');
+		clone.name = `${this.dataName}[${locale}]`;
+		clone.id = `${this.localeKey(locale)}`;
+
+		if (this.closestCloneValue) {
+			const panel = this.element.closest(this.closestCloneValue).cloneNode(true) as HTMLElement;
+			panel.querySelector('input').outerHTML = clone.outerHTML;
+			return panel.outerHTML;
+		} else {
+			return clone.outerHTML;
+		}
+	}
+}

data/app/assets/javascripts/gaco_cms/lib/progress_bar.ts

@@ -0,0 +1,7 @@
+document.addEventListener('turbo:before-fetch-request', () => {
+  document.getElementById('main-progress-bar').classList.remove('invisible');
+});
+
+document.addEventListener('turbo:before-fetch-response', () => {
+  document.getElementById('main-progress-bar').classList.add('invisible');
+});

data/app/assets/javascripts/gaco_cms/lib/request.ts

@@ -0,0 +1,21 @@
+const requestHeaders = () => {
+	const meta1 = document.querySelector('meta[name="csrf-param"]');
+	const meta2 = document.querySelector('meta[name="csrf-token"]');
+	const res = { xhr: true };
+	res[meta1['content']] = meta2['content'];
+	res['X-CSRF-Token'] = meta2['content'];
+	return res;
+}
+
+export const ajaxRequest = async (path, data = {}, method = 'GET', format = 'text') => {
+	const reqData = {
+		method: method,
+		headers: requestHeaders()
+	};
+	if (method !== 'GET') reqData['body'] = data;
+
+	//TODO: show/hide loading bar
+	const response = await fetch(path, reqData);
+	const res = await (format == 'json' ? response.json() : response.text());
+	return res;
+}

data/app/assets/javascripts/gaco_cms/lib/turbo_request.ts

@@ -0,0 +1,61 @@
+const reloadTurboFrames = (frames: string[]) => {
+	frames.forEach((frameSelector) => {
+		const frame = document.body.querySelector<HTMLIFrameElement>(frameSelector);
+		if (!frame) return;
+
+		const src = frame.src;
+		frame.src = null;
+		frame.src = src;
+	});
+};
+
+const closeActiveModal = () => {
+	const modal = document.body.querySelector<HTMLDivElement>(':scope .modal.show');
+	if (modal) modal.dispatchEvent(new CustomEvent('close-modal'));
+};
+
+// add request header to identify turbo requests
+document.addEventListener('turbo:before-fetch-request', (e) => {
+	const target = e.target as HTMLElement;
+	e.detail.fetchOptions.headers['turbo-request'] = true;
+
+	// by default render response content as content of the turbo-frame
+	if (e.target.getAttribute('data-auto-update')) {
+		e.detail.fetchOptions.headers['turbo-update'] = e.target.id;
+	}
+
+	// TODO: disable form buttons
+});
+
+const parseRequestError = async (response) => {
+	const result = await response.clone().text();
+	const body = result.split('<body>')[1].split('</body>')[0];
+	const tpl = `
+	  <div data-controller="gaco-cms-modal"
+	  data-gaco-cms-modal-size-value="modal-lg text-danger" 
+	  data-gaco-cms-modal-self-modal-value="true">${body}</div>
+	`;
+	document.body.insertAdjacentHTML('beforeend', tpl);
+};
+
+document.addEventListener('turbo:before-fetch-response', (e) => {
+	const target = e.target as HTMLElement;
+	const sourceTarget = e.target as HTMLElement;
+
+	// reset turbo_frame_none src
+	if (target.id == 'turbo_frame_none') target.removeAttribute('src');
+
+	const response = e.detail.fetchResponse.response;
+	if (response.status != 500) {
+		// allow to auto close active modal
+		const closeModal = sourceTarget.getAttribute('data-turbo-request-close-modal');
+		if (closeModal) closeActiveModal();
+
+		// reload specific turbo-frame
+		const frames = sourceTarget.getAttribute('data-turbo-request-reload-frame');
+		if (frames) reloadTurboFrames(frames.split(','));
+	} else {
+		e.preventDefault();
+		parseRequestError(response);
+	}
+});

data/app/assets/javascripts/gaco_cms/stimulus.ts

@@ -0,0 +1,9 @@
+import { Application } from '@hotwired/stimulus';
+
+const application = Application.start();
+
+// Configure Stimulus development experience
+application.debug = false;
+window.Stimulus = application;
+
+export default application;

data/app/assets/javascripts/gaco_cms.js

@@ -0,0 +1,7 @@
+import '@hotwired/turbo-rails';
+import './gaco_cms/lib/progress_bar';
+import './gaco_cms/lib/turbo_request';
+
+import 'tinymce/tinymce';
+import './gaco_cms/base';
+import * as bootstrap from 'bootstrap';

data/app/assets/javascripts/gaco_cms_front.js

@@ -0,0 +1,3 @@
+import '@hotwired/turbo-rails';
+import './gaco_cms/stimulus';
+import * as bootstrap from 'bootstrap';

data/app/assets/stylesheets/gaco_cms/bootstrap_custom.scss

@@ -0,0 +1,15 @@
+// Bootstrap customizations
+$white: #ffffff;
+
+$theme-colors: (
+        "light": #d7d5d5,
+        "dark":       #0d1127,
+        "primary":    #8f10ad,
+        "secondary":  #e34159,
+        "info":       #fe6f01,
+        "success":    #00aa6a,
+        "warning":    #decf00,
+        "danger":     #ed2f00,
+);
+
+$nav-link-color: #222;

data/app/assets/stylesheets/gaco_cms/shared.scss

@@ -0,0 +1,22 @@
+.accordion {
+  .accordion-button {
+    cursor: pointer;
+  }
+  .accordion-actions {
+    margin-top: -42px;
+    position: relative;
+    z-index: 2;
+    float: left;
+  }
+}
+
+
+.fieldset_style {
+  border: 1px dashed #ccc;
+  margin-top: 32px;
+  .legend_style {
+    position: relative;
+    top: -16px;
+    padding: 0 10px;
+  }
+}