EN · DE · RU · FR · ES

#2676: Popper.module.scss

projectforge-webapp/src/components/design/popper/Popper.module.scss Hoja de estilo SCSS, projectforge-webapp/src/components/design/popper/Popper.module.scss 139 líneas · 115 código · 0 comentarios · 24 en blanco
Propósito: Aplicación web React: Popper.module.scss. Popper.module.scss es parte de la aplicación de gestión de proyectos de código abierto ProjectForge.

Fuente (primeras 100 líneas)

.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;

Historial de Git

bbcf4952d corrige el estilo de la lista de filtros mágicos
84e49a936 corrige la gestión de enfoque del popper avanzado
16c498aea corrige el estilo de la acción de eliminar
7d6ea1f31 corrige algunos rellenos
d217c9aff rediseño de la finalización automática a las nuevas entradas materialize

bbcf4952d

corrige el estilo de la lista de filtros mágicos
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

corrige la gestión de enfoque del popper avanzado
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

corrige el estilo de la acción de eliminar
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

corrige algunos rellenos
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

rediseño de la finalización automática a las nuevas entradas 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;