From 011814358b76bac9570f1b3158f4a7bd5c0a7d2f Mon Sep 17 00:00:00 2001 From: MaxOvs19 <88626313+MaxOvs19@users.noreply.github.com> Date: Wed, 22 Mar 2023 14:36:22 +0300 Subject: [PATCH 1/2] Update index.html --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index fe09a17..79d255d 100644 --- a/index.html +++ b/index.html @@ -43,7 +43,7 @@ - + From fa53a86810fa6298162c2392fbaa730872ba32f9 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Wed, 22 Mar 2023 16:51:31 +0300 Subject: [PATCH 2/2] Fixed main page --- example.scss | 2 +- index.html | 134 ++++++++++++++++++++++++--------------------------- package.json | 16 ++++-- 3 files changed, 77 insertions(+), 75 deletions(-) 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",