.info to .info-popup

foo123 · Mar 14, 2022 · fb0dea4 · fb0dea4
1 parent 7f9d056
commit fb0dea4
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 34 deletions.
diff --git a/src/InfoPopup.css b/src/InfoPopup.css
@@ -1,4 +1,4 @@
-.info::before {
+.info-popup::before {
   position: absolute;
   display: block;
   content: "";
@@ -9,12 +9,12 @@
   margin-left: -4px;
   border-width: 20px 7px 0;
   border-style: solid;
-  border-color: #aaa transparent; /*depends on .info->border-color*/
+  border-color: #aaa transparent; /*depends on .info-popup->border-color*/
   width: 0;
   height: 0;
   z-index: 1;
 }
-.info::after {
+.info-popup::after {
   position: absolute;
   display: block;
   content: "";
@@ -25,40 +25,40 @@
   margin-left: -3px;
   border-width: 18px 6px 0;
   border-style: solid;
-  border-color: #fff transparent; /*depends on .info->background-color*/
+  border-color: #fff transparent; /*depends on .info-popup->background-color*/
   width: 0;
   height: 0;
   z-index: 2;
 }
-.info.below::before {
+.info-popup.below::before {
   top: -20px;
   bottom: auto;
   border-width: 0 7px 20px;
 }
-.info.below::after {
+.info-popup.below::after {
   top: -18px;
   bottom: auto;
   border-width: 0 6px 18px;
 }
-.info.left::before {
+.info-popup.left::before {
     margin-left: 0;
-    left: 4px; /*depends on .info->border-radius*/
+    left: 4px; /*depends on .info-popup->border-radius*/
 }
-.info.left::after {
+.info-popup.left::after {
     margin-left: 0;
     left: 5px;
 }
-.info.right::before {
+.info-popup.right::before {
     margin-left: 0;
     left: auto;
-    right: 4px; /*depends on .info->border-radius*/
+    right: 4px; /*depends on .info-popup->border-radius*/
 }
-.info.right::after {
+.info-popup.right::after {
     margin-left: 0;
     left: auto;
     right: 5px;
 }
-.info {
+.info-popup {
   position: absolute;
   display: block;
   box-sizing: border-box;
@@ -74,19 +74,19 @@
   max-width: 30%;
   text-align: center;
 }
-.info {
+.info-popup {
     margin-top: -4px; /*adjust visually a bit*/
 }
-.info.below {
+.info-popup.below {
     margin-top: 24px; /*adjust for top arrow*/
 }
-.info.left {
+.info-popup.left {
     margin-left: 16px; /*adjust visually a bit*/
 }
-.info.right {
+.info-popup.right {
     margin-left: -16px; /*adjust visually a bit*/
 }
-.info > .header {
+.info-popup > .header {
   position: relative;
   display: block;
   width: 100%;
@@ -96,7 +96,7 @@
   border: 0;
   text-align: right;
 }
-.info > .header .close {
+.info-popup > .header .close {
   position: relative;
   display: inline-block;
   background: #fff;
@@ -114,7 +114,7 @@
   margin-right: 6px;
   cursor: pointer;
 }
-.info > .header .close::before {
+.info-popup > .header .close::before {
   content: "\2573";
   position: absolute;
   display: inline-block;
@@ -125,11 +125,11 @@
   margin-top: -7.5px;
   margin-left: -3px;
 }
-.info > .header .close:hover {
+.info-popup > .header .close:hover {
   color: #121212;
   border: 1px solid #121212;
 }
-.info > .content {
+.info-popup > .content {
   position: relative;
   display: block;
   width: 100%;

diff --git a/src/InfoPopup.js b/src/InfoPopup.js
@@ -279,7 +279,7 @@ function InfoPopup(options)
     if (!infoPopup)
     {
         infoPopup = document.createElement('div');
-        addClass(infoPopup, 'info');
+        addClass(infoPopup, 'info-popup');
         if (self.options.infoClass) addClass(infoPopup, self.options.infoClass);
 
         if ('click' === self.options.trigger)

diff --git a/src/InfoPopup.min.css b/src/InfoPopup.min.css
diff --git a/src/InfoPopup.min.js b/src/InfoPopup.min.js
diff --git a/test/demo.html b/test/demo.html
@@ -30,22 +30,22 @@
   margin: 10px auto 10px auto;
   text-align: center;
 }
-.info {
+.info-popup {
   width: 220px;
 }
-.info > .content {
+.info-popup > .content {
     padding: 6px;
 }
-.info > .content a {
+.info-popup > .content a {
     color: #FDB61E;
     text-decoration: none;
     cursor: pointer;
 }
-.info > .content a:active,
-.info > .content a:hover {
+.info-popup > .content a:active,
+.info-popup > .content a:hover {
     text-decoration: underline;
 }
-.info > .content .area-name {
+.info-popup > .content .area-name {
     position: relative;
     display: block;
     font-size: 1.4rem;
@@ -54,7 +54,7 @@
     margin: 0 auto 10px auto;
     text-shadow: 1px 1px 1px #00f;
 }
-.info > .content .area-size {
+.info-popup > .content .area-size {
     position: relative;
     display: block;
     font-size: 0.8rem;
@@ -63,11 +63,11 @@
     margin: 0 auto;
 }
 @media all and (max-width: 640px) {
-.info > .content .area-name {
+.info-popup > .content .area-name {
     font-size: 0.8rem;
     line-height: 0.8rem;
 }
-.info > .content .area-size {
+.info-popup > .content .area-size {
     font-size: 0.6rem;
     line-height: 0.6rem;
 }