Merge pull request #55 from SimplyEdit/feature/component-boxes

Feature/component boxes

Author: ylebre

www/api/data/base-components/font-cocon/meta.json

@@ -1 +1 @@
-{"id":"font-cocon","description":""}
+{"id":"font-cocon","description":"Cocon Regular font (simply logo font)"}

www/api/data/components/0-ds-styling/meta.json

@@ -1 +1 @@
-{"id":"0-ds-styling","description":""}
+{"id":"0-ds-styling","description":"DS base styling"}

www/api/data/components/1-styling/componentCss/extra.css

@@ -1,28 +1,28 @@
 @import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:400,400i,700,700i');
 
 html, body {
-	margin: 0;
-	padding: 0;
-	width: 100%;
+  margin: 0;
+  padding: 0;
+  width: 100%;
 }
 main {
-	padding: 0px 15px;
+  padding: 0px 15px;
 }
 [data-simply-command] {
-	cursor: pointer; /* Dear iOS, why don't you have a click event when the cursor is not a pointer? */
+  cursor: pointer; /* Dear iOS, why don't you have a click event when the cursor is not a pointer? */
 }
 textarea {
-	width: 100%;
-	height: 120px;
-	color: #e0e0e0;
-	background-color: #151515;
-	border: 0;
-	padding: 10px;
+  width: 100%;
+  height: 120px;
+  color: #e0e0e0;
+  background-color: #151515;
+  border: 0;
+  padding: 10px;
 }
 input:not([type]),
 input[type=text] {
-	color: #e0e0e0;
-	background-color: #151515;
-	border: 0;
-	padding: 5px;
+  color: #e0e0e0;
+  background-color: #151515;
+  border: 0;
+  padding: 5px;
 }

www/api/data/components/1-styling/componentCss/simplycode-component-list.css

@@ -0,0 +1,50 @@
+:root {
+  --simplycode-component-list-spacing-row: calc(0.5 * var(--ds-spacing));
+  --simplycode-component-list-spacing-column: calc(0.5 * var(--ds-spacing));
+  --simplycode-component-list-min-colwidth: 10rem;
+  --simplycode-component-list-item-font-size: calc(0.9 * var(--ds-font-size));
+  --simplycode-component-list-item-background: var(--ds-grey-90);
+  --simplycode-component-list-item-background-active: var(--ds-grey-80);
+  --simplycode-component-list-item-color: inherit;
+  --simplycode-component-list-item-color-active: inherit;
+  --simplycode-component-list-item-min-height: 4rem;
+}
+
+.simplycode-component-list {
+  display: grid;
+  grid-column-gap: var(--simplycode-component-list-spacing-column);
+  grid-row-gap: var(--simplycode-component-list-spacing-row);
+  grid-template-columns: repeat(auto-fit, minmax(var(--simplycode-component-list-min-colwidth), 1fr));
+
+  font-size: var(--simplycode-component-list-item-font-size);
+  line-height: 1.6em;
+  margin-bottom: var(--simplycode-component-list-spacing-column);
+}
+.simplycode-component-list-item {
+  background-color: var(--simplycode-component-list-item-background);
+  padding: calc(0.5 * var(--simplycode-component-list-spacing-column));
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0;
+  min-height: var(--simplycode-component-list-item-min-height);
+}
+
+.simplycode-component-list-item,
+a.simplycode-component-list-item,
+a.simplycode-component-list-item * {
+  text-decoration: none;
+  color: var(--simplycode-component-list-item-color);
+}
+.simplycode-component-list-item:hover,
+a.simplycode-component-list-item:hover,
+a.simplycode-component-list-item:active {
+  background-color: var(--simplycode-component-list-item-background-active);
+  color: var(--simplycode-component-list-item-color-active);
+}
+
+.simplycode-component-list-item > :first-child {
+  margin-top: 0;
+}
+.simplycode-component-list-item > :last-child {
+  margin-bottom: 0;
+}

www/api/data/components/1-styling/componentCss/simplycode-ds-mapping.css

@@ -1,19 +1,12 @@
 /* simplycode-ds-core-colors */
 :root {
-  --ds-simplycode: #ae47ff;
-  --ds-simplycode-light:#c880ff;
-  --ds-simplycode-dark:#8d00f8;
-  --ds-simplycode-bump:#b65cfc;
-  --ds-simplycode-contrast: var(--ds-white);
-  --ds-simplycode-gradient: linear-gradient( 180deg, var(--ds-simplycode-light), var(--ds-simplycode-dark) );
-  --ds-simplycode-gradient-bump: linear-gradient( 180deg, var(--ds-simplycode-bump), var(--ds-simplycode-light) 95%, var(--ds-simplycode-dark) 100%);
-
-  --ds-primary: var(--ds-simplycode);
-  --ds-primary-dark: var(--ds-simplycode-dark);
-  --ds-primary-contrast: var(--ds-white);
-  --ds-primary-light: var(--ds-simplycode-light);
-  --ds-primary-gradient: var(--ds-simplycode-gradient);
-  --ds-primary-gradient-bump: var(--ds-simplycode-gradient-bump);
+  --ds-primary: var(--simplycode-highlight-light);
+  --ds-primary-dark: var(--simplycode-highlight-dark);
+  --ds-primary-contrast: var(--simplycode-highlight-color);
+  --ds-primary-light: var(--simplycode-highlight-light);
+  --ds-primary-gradient: var(--simplycode-highlight-gradient);
+  --ds-primary-bump: #b65cfc;
+  --ds-primary-gradient-bump: linear-gradient( 180deg, var(--ds-primary-bump), var(--simplycode-highlight-light) 95%, var(--simplycode-highlight-dark) 100%);
 
   --ds-support: #06CC06;
   --ds-support-dark: #05BB05;