diff --git a/example.scss b/example.scss index 8d47daa..1599a22 100644 --- a/example.scss +++ b/example.scss @@ -196,7 +196,7 @@ code { pre { background: #1e1e1e; margin: 15px; - padding: 15px; + padding: 30px 15px 0 5px; color: #88d0f7; border-radius: 15px; font-size: 16px; diff --git a/index.html b/index.html index 79d255d..6ce7a06 100644 --- a/index.html +++ b/index.html @@ -205,17 +205,17 @@ settings. The default theme is the classic theme, you can choose a white or dark theme.

- -
-                  const dropdown = new CGSelect({
-                    selector: '.cg-dropdown_one', 
-                    placeholder: 'Choose a car', 
-                    lable: 'EXAMPLE', 
-                    items: [
-                      ...
-                    ],
-                    theme:  'dark / white'
-                  });
+              
+                
+      const dropdown = new CGSelect({
+        selector: '.cg-dropdown_one', 
+        placeholder: 'Choose a car', 
+        lable: 'EXAMPLE', 
+        items: [
+          ...
+        ],
+        theme:  'dark / white'
+      });
                 
@@ -232,17 +232,17 @@

-            interface CustomThemeJson {
-              name: 'string', 
-              styles: {
-                head?:  object 
-                list?: object ,
-                placeholder?: object ,
-                caret?: object ,
-                search?: object ,
-                lable?: object ,
-              },
-            };
+        interface CustomThemeJson {
+          name: 'string', 
+          styles: {
+            head?:  object 
+            list?: object ,
+            placeholder?: object ,
+            caret?: object ,
+            search?: object ,
+            lable?: object ,
+          },
+        };
                   
@@ -258,65 +258,59 @@
-
+              
         const newTheme: CustomTheme = {
-          name: 'test', 
-          styles: {
-            head:  'headTestClass', 
-            list: 'listTestClass', ,
-            placeholder: 'placeholderTestClass', ,
-            caret: 'caretTestClass', ,
-            search: 'searchTestClass', ,
-            chips: 'chipsTestClass', ,
-            lable: 'lableTestClass', ,
-          },
-        };
+      name: 'test', 
+      styles: {
+        head:  'headTestClass', 
+        list: 'listTestClass', ,
+        placeholder: 'placeholderTestClass', ,
+        caret: 'caretTestClass', ,
+        search: 'searchTestClass', ,
+        chips: 'chipsTestClass', ,
+        lable: 'lableTestClass', ,
+        },
+      };
+      
+      .headTestClass {
+        background-color: #8297ff;
+        color: white;
+      }
+      .listTestClass {
+        background-color: #8297ff;
+        border: 1px solid black;
+        color: white ;
+      }
               
-        const newCustomTheme: CustomThemeJson  = {
-          name: 'test', 
-          styles: {
-            head:  {
-                  color: 'red',
-                  background: 'green',
-                 },
-            list: {
-                  color: 'red',
-                  background: 'green',
-                },
-            placeholder: {
+    const newCustomTheme: CustomThemeJson  = {
+      name: 'test', 
+      styles: {
+        head:  {
               color: 'red',
-              fontSize: '26px',
+              background: 'green',
              },
-            caret: {
-                borderTop: '6px solid white'  
-             },
-            search: {},
-            lable: {},
-          },
-        };
+        list: {
+              color: 'red',
+              background: 'green',
+            },
+        placeholder: {
+          color: 'red',
+          fontSize: '26px',
+         },
+        caret: {
+            borderTop: '6px solid white'  
+         },
+        search: {},
+        lable: {},
+      },
+    };
               
-
CSS
- -
-              .headTestClass {
-                background-color: #8297ff;
-                color: white;
-              }
-
-              .listTestClass {
-                background-color: #8297ff;
-                border: 1px solid black;
-                color: white ;
-              }
-            
-
-
Example custom theme in CG-Select

See an example of a select on diff --git a/package.json b/package.json index 438ca68..343cf4a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "example-cg-select-page", - "version": "0.2.5", + "version": "0.2.6", "description": "This is a test page to demonstrate the capabilities of the select", "scripts": { "start": "parcel ./index.html -p 4660 --open", @@ -13,14 +13,22 @@ "url": "git+https://github.com/MaxOvs19/Example-CG-SELECT.git" }, "keywords": [ - "exemple-cg-select" + "exemple-cg-select", + "select", + "autocomplete", + "dropdown", + "multiselect", + "tag" ], - "author": "MaxOvs19", + "author": { + "name": "CraftGroup", + "url": "https://github.com/apuc/" + }, "license": "ISC", "bugs": { "url": "https://github.com/MaxOvs19/Example-CG-SELECT/issues" }, - "homepage": "https://MaxOvs19.github.io/Example-CG-SELECT", + "homepage": "https://cg-select.itguild.info", "dependencies": { "cg-select": "^0.2.5", "gh-pages": "^5.0.0",