EN · DE · RU · FR · ES
← Индекс · ← Индекс файлов · ← Предыдущий · Следующий → · 📄 исходник

#2676: Popper.module.scss

projectforge-webapp/src/components/design/popper/Popper.module.scss SCSS-таблица стилей, projectforge-webapp/src/components/design/popper/Popper.module.scss 139 строк · 115 кода · 0 комментариев · 24 пустых
Назначение: React веб-приложение: Popper.module.scss. Popper.module.scss является частью приложения для управления проектами с открытым исходным кодом ProjectForge.

Исходный код (первые 100 строк)

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

История Git

bbcf4952d исправление стиля списка магических фильтров
84e49a936 исправление управления фокусом расширенного popper
16c498aea исправление стиля действия удаления
7d6ea1f31 исправление некоторых отступов
d217c9aff переработка дизайна автозаполнения под новые материальные поля ввода

bbcf4952d

исправление стиля списка магических фильтров
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

исправление управления фокусом расширенного 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

исправление стиля действия удаления
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

исправление некоторых отступов
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

переработка дизайна автозаполнения под новые материальные поля ввода
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;