EN · DE · RU · FR · ES
← Index · ← Index des fichiers · ← Précédent · Suivant → · 📄 source

#2676 : Popper.module.scss

projectforge-webapp/src/components/design/popper/Popper.module.scss Feuille de style SCSS, projectforge-webapp/src/components/design/popper/Popper.module.scss 139 lignes · 115 code · 0 commentaires · 24 vides
Objectif : Application web React : Popper.module.scss. Popper.module.scss fait partie de l'application open-source de gestion de projet ProjectForge.

Source (100 premières lignes)

.popper {
  z-index: 9999;
  background-color: #fff;
  border: 1px solid #dfdfdf;
  border-radius: .25em;
  padding: 10px;
}

.advancedPopperContainer {
  $baseShadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  $transitionTime: .2s;

  position: relative;
  outline: none;

  &.isOpen {
    .content {
      box-shadow: $baseShadow, 0 3px 12px rgba(0, 0, 0, 0.1);
    }

    .additional {
      opacity: 1;
    }
  }

  .content {
    position: relative;
    border: 1px solid #ebebeb;
    border-radius: 5px;
    box-shadow: $baseShadow;
    transition: box-shadow $transitionTime;

    &:hover {
      box-shadow: $baseShadow, 0 3px 12px rgba(0, 0, 0, 0.1);
    }

    &.noBorder {
      border: none;
      box-shadow: none;

      .container {
        padding: 0;
      }
    }
  }

  .additional {
    background-color: #fff;
    opacity: 0;
    overflow: auto;
    border: 1px solid #EBEBEB;
    border-radius: 5px;
    box-shadow: 0 15px 46px -10px rgba(26, 26, 29, 0.3);
    z-index: 99;
    overflow-x: hidden;

    position: absolute;

    &.withInput {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      border-top: none;
    }

    .actions {
      padding: .8em 1rem;
      display: flex;

      .action {
        margin: 0;
        display: inline-block;
        text-align: center;
        width: auto;
        font-weight: 600;
        padding: .4em .6em;
        color: #333;
        outline: none;
        border: none;
        border-radius: 8px;

        &.delete {
          text-decoration: underline;
          padding: 0;
          border-radius: 0;
          background-color: transparent;

          &:hover {
            color: #000;
          }

          &:disabled {
            color: #ccc;
            cursor: not-allowed;
          }
        }

        &.success {
          margin-left: auto;
          background-color: #333;
          font-size: .9em;

Historique Git

bbcf4952d correction du style de la liste de filtres magiques
84e49a936 correction de la gestion du focus avancé du popper
16c498aea correction du style de l'action de suppression
7d6ea1f31 correction de quelques paddings
d217c9aff refonte du design de l'autocomplétion vers les nouvelles entrées materialize

bbcf4952d

correction du style de la liste de filtres magiques
bbcf4952d61dffad5d82bd0d11350e437ae9c6a0
diff --git a/projectforge-webapp/src/components/design/popper/Popper.module.scss b/projectforge-webapp/src/components/design/popper/Popper.module.scss
index 5fc15cea8..5a748bd29 100644
--- a/projectforge-webapp/src/components/design/popper/Popper.module.scss
+++ b/projectforge-webapp/src/components/design/popper/Popper.module.scss
@@ -120,17 +120,15 @@
     background-color: #333;
     color: #fff;
 
-    input {
+    svg {
       color: #fff;
-
-      &::placeholder {
-        color: #eee;
-      }
     }
 
-    &:hover {
-      input::placeholder {
-        color: #fff;
+    input, svg {
+      color: #fff;
+
+      &::placeholder {
+        color: #ddd;
       }
     }
   }

84e49a936

correction de la gestion du focus avancé du popper
84e49a936221feb91cb27cfa6ffc0ef9f09bc50e
diff --git a/projectforge-webapp/src/components/design/popper/Popper.module.scss b/projectforge-webapp/src/components/design/popper/Popper.module.scss
index f08796fc7..5fc15cea8 100644
--- a/projectforge-webapp/src/components/design/popper/Popper.module.scss
+++ b/projectforge-webapp/src/components/design/popper/Popper.module.scss
@@ -11,6 +11,7 @@
   $transitionTime: .2s;
 
   position: relative;
+  outline: none;
 
   &.isOpen {
     .content {
@@ -28,7 +29,6 @@
     border-radius: 5px;
     box-shadow: $baseShadow;
     transition: box-shadow $transitionTime;
-    outline: none;
 
     &:hover {
       box-shadow: $baseShadow, 0 3px 12px rgba(0, 0, 0, 0.1);

16c498aea

correction du style de l'action de suppression
16c498aeac799cba87a12a406265b2d8cdd8f8fd
diff --git a/projectforge-webapp/src/components/design/popper/Popper.module.scss b/projectforge-webapp/src/components/design/popper/Popper.module.scss
index 8d7a16ff2..f08796fc7 100644
--- a/projectforge-webapp/src/components/design/popper/Popper.module.scss
+++ b/projectforge-webapp/src/components/design/popper/Popper.module.scss
@@ -81,6 +81,8 @@
         &.delete {
           text-decoration: underline;
           padding: 0;
+          border-radius: 0;
+          background-color: transparent;
 
           &:hover {
             color: #000;
@@ -88,7 +90,6 @@
 
           &:disabled {
             color: #ccc;
-            background-color: transparent;
             cursor: not-allowed;
           }
         }

7d6ea1f31

correction de quelques paddings
7d6ea1f31d822baf58a029fa7dfa52b84437956d
diff --git a/projectforge-webapp/src/components/design/popper/Popper.module.scss b/projectforge-webapp/src/components/design/popper/Popper.module.scss
index 3b9d9afe1..8d7a16ff2 100644
--- a/projectforge-webapp/src/components/design/popper/Popper.module.scss
+++ b/projectforge-webapp/src/components/design/popper/Popper.module.scss
@@ -63,7 +63,7 @@
     }
 
     .actions {
-      padding: .8em .9em;
+      padding: .8em 1rem;
       display: flex;
 
       .action {
@@ -80,10 +80,10 @@
 
         &.delete {
           text-decoration: underline;
+          padding: 0;
 
           &:hover {
             color: #000;
-            background-color: #f2f2f2;
           }
 
           &:disabled {

d217c9aff

refonte du design de l'autocomplétion vers les nouvelles entrées materialize
d217c9aff5825ea28fc15f603f0bbc2f28eeeacd
diff --git a/projectforge-webapp/src/components/design/popper/Popper.module.scss b/projectforge-webapp/src/components/design/popper/Popper.module.scss
index 65a896bd3..3b9d9afe1 100644
--- a/projectforge-webapp/src/components/design/popper/Popper.module.scss
+++ b/projectforge-webapp/src/components/design/popper/Popper.module.scss
@@ -33,6 +33,15 @@
     &:hover {
       box-shadow: $baseShadow, 0 3px 12px rgba(0, 0, 0, 0.1);
     }
+
+    &.noBorder {
+      border: none;
+      box-shadow: none;
+
+      .container {
+        padding: 0;
+      }
+    }
   }
 
   .additional {
@@ -43,11 +52,16 @@
     border-radius: 5px;
     box-shadow: 0 15px 46px -10px rgba(26, 26, 29, 0.3);
     z-index: 99;
-    top: 10px;
     overflow-x: hidden;
 
     position: absolute;
 
+    &.withInput {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-top: none;
+    }
+
     .actions {
       padding: .8em .9em;
       display: flex;