Add latest changes from gitlab-org/gitlab@13-9-stable-eev13.9.0-rc42

18 files changed, 72 insertions, 409 deletions

diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss
index d9ad4992458..a7623b65539 100644
--- a/app/assets/stylesheets/framework/awards.scss
+++ b/app/assets/stylesheets/framework/awards.scss
@@ -14,7 +14,7 @@
   top: 0;
   margin-top: 3px;
   padding: $gl-padding;
-  z-index: 300;
+  z-index: $zindex-dropdown-menu;
   width: $award-emoji-width;
   font-size: 14px;
   background-color: $white;
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 182c58c3931..b51fec925cb 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -95,8 +95,6 @@
 
   &:active,
   &.active {
-    box-shadow: $gl-btn-active-background;
-
     background-color: $dark;
     border-color: $border-dark;
     color: $color;
@@ -348,14 +346,6 @@
   }
 }
 
-.btn-build {
-  margin-left: 10px;
-
-  svg {
-    fill: $gl-text-color-secondary;
-  }
-}
-
 .clone-dropdown-btn a {
   color: $gray-700;
 
@@ -437,19 +427,6 @@
   }
 }
 
-.btn-missing {
-  color: $gl-text-color-secondary;
-  border: 1px dashed $border-gray-normal-dashed;
-  border-radius: $border-radius-default;
-
-  &:hover,
-  &:active,
-  &:focus {
-    color: $gl-text-color-secondary;
-    background-color: $white-normal;
-  }
-}
-
 // The .btn-svg class is available for legacy icon buttons to
 // preserve a 34px height and have 16x16 icons at the same time.
 // Once a button is migrated (to the current 32px height)
diff --git a/app/assets/stylesheets/framework/carousel.scss b/app/assets/stylesheets/framework/carousel.scss
deleted file mode 100644
index d51a9f9c173..00000000000
--- a/app/assets/stylesheets/framework/carousel.scss
+++ /dev/null
@@ -1,202 +0,0 @@
-// Notes on the classes:
-//
-// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
-//    even when their scroll action started on a carousel, but for compatibility (with Firefox)
-//    we're preventing all actions instead
-// 2. The .carousel-item-left and .carousel-item-right is used to indicate where
-//    the active slide is heading.
-// 3. .active.carousel-item is the current slide.
-// 4. .active.carousel-item-left and .active.carousel-item-right is the current
-//    slide in its in-transition state. Only one of these occurs at a time.
-// 5. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
-//    is the upcoming slide in transition.
-
-.carousel {
-  position: relative;
-
-  &.pointer-event {
-    touch-action: pan-y;
-  }
-}
-
-
-.carousel-inner {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-  @include clearfix();
-}
-
-.carousel-item {
-  position: relative;
-  display: none;
-  float: left;
-  width: 100%;
-  margin-right: -100%;
-  backface-visibility: hidden;
-  @include transition($carousel-transition);
-}
-
-.carousel-item.active,
-.carousel-item-next,
-.carousel-item-prev {
-  display: block;
-}
-
-.carousel-item-next:not(.carousel-item-left),
-.active.carousel-item-right {
-  transform: translateX(100%);
-}
-
-.carousel-item-prev:not(.carousel-item-right),
-.active.carousel-item-left {
-  transform: translateX(-100%);
-}
-
-
-//
-// Alternate transitions
-//
-
-.carousel-fade {
-  .carousel-item {
-    opacity: 0;
-    transition-property: opacity;
-    transform: none;
-  }
-
-  .carousel-item.active,
-  .carousel-item-next.carousel-item-left,
-  .carousel-item-prev.carousel-item-right {
-    z-index: 1;
-    opacity: 1;
-  }
-
-  .active.carousel-item-left,
-  .active.carousel-item-right {
-    z-index: 0;
-    opacity: 0;
-    @include transition(0s $carousel-transition-duration opacity);
-  }
-}
-
-
-//
-// Left/right controls for nav
-//
-
-.carousel-control-prev,
-.carousel-control-next {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 1;
-  // Use flex for alignment (1-3)
-  display: flex; // 1. allow flex styles
-  align-items: center; // 2. vertically center contents
-  justify-content: center; // 3. horizontally center contents
-  width: $carousel-control-width;
-  color: $carousel-control-color;
-  text-align: center;
-  opacity: $carousel-control-opacity;
-  @include transition($carousel-control-transition);
-
-  // Hover/focus state
-  @include hover-focus {
-    color: $carousel-control-color;
-    text-decoration: none;
-    outline: 0;
-    opacity: $carousel-control-hover-opacity;
-  }
-}
-
-.carousel-control-prev {
-  left: 0;
-  @if $enable-gradients {
-    background: linear-gradient(90deg, rgba($black, 0.25), rgba($black, 0.001));
-  }
-}
-
-.carousel-control-next {
-  right: 0;
-  @if $enable-gradients {
-    background: linear-gradient(270deg, rgba($black, 0.25), rgba($black, 0.001));
-  }
-}
-
-// Icons for within
-.carousel-control-prev-icon,
-.carousel-control-next-icon {
-  display: inline-block;
-  width: $carousel-control-icon-width;
-  height: $carousel-control-icon-width;
-  background: no-repeat 50% / 100% 100%;
-}
-
-.carousel-control-prev-icon {
-  background-image: $carousel-control-prev-icon-bg;
-}
-
-.carousel-control-next-icon {
-  background-image: $carousel-control-next-icon-bg;
-}
-
-
-// Optional indicator pips
-//
-// Add an ordered list with the following class and add a list item for each
-// slide your carousel holds.
-
-.carousel-indicators {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 15;
-  display: flex;
-  justify-content: center;
-  padding-left: 0; // override <ol> default
-  // Use the .carousel-control's width as margin so we don't overlay those
-  margin-right: $carousel-control-width;
-  margin-left: $carousel-control-width;
-  list-style: none;
-
-  li {
-    box-sizing: content-box;
-    flex: 0 1 auto;
-    width: $carousel-indicator-width;
-    height: $carousel-indicator-height;
-    margin-right: $carousel-indicator-spacer;
-    margin-left: $carousel-indicator-spacer;
-    text-indent: -999px;
-    cursor: pointer;
-    background-color: $carousel-indicator-active-bg;
-    background-clip: padding-box;
-    // Use transparent borders to increase the hit area by 10px on top and bottom.
-    border-top: $carousel-indicator-hit-area-height solid transparent;
-    border-bottom: $carousel-indicator-hit-area-height solid transparent;
-    opacity: 0.5;
-    @include transition($carousel-indicator-transition);
-  }
-
-  .active {
-    opacity: 1;
-  }
-}
-
-
-// Optional captions
-//
-//
-
-.carousel-caption {
-  position: absolute;
-  right: (100% - $carousel-caption-width) / 2;
-  bottom: 20px;
-  left: (100% - $carousel-caption-width) / 2;
-  z-index: 10;
-  padding-top: 20px;
-  padding-bottom: 20px;
-  color: $carousel-caption-color;
-  text-align: center;
-}
diff --git a/app/assets/stylesheets/framework/ci_variable_list.scss b/app/assets/stylesheets/framework/ci_variable_list.scss
index 2204b037f69..95025459cc9 100644
--- a/app/assets/stylesheets/framework/ci_variable_list.scss
+++ b/app/assets/stylesheets/framework/ci_variable_list.scss
@@ -98,13 +98,3 @@
     color: $gl-text-color-disabled;
   }
 }
-
-.group-variable-list {
-  color: $gray-500;
-
-  .table-section:not(:first-child) {
-    @include media-breakpoint-down(sm) {
-      border-top: hidden;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 3b59c028437..5d182373fb1 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -110,7 +110,7 @@ pre {
 }
 
 hr {
-  margin: 24px 0;
+  margin: 1.5rem 0;
   border-top: 1px solid $gray-darker;
 }
 
diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss
index 745d469e3e8..c5467c304ec 100644
--- a/app/assets/stylesheets/framework/contextual_sidebar.scss
+++ b/app/assets/stylesheets/framework/contextual_sidebar.scss
@@ -471,7 +471,7 @@
       background-color: $black-transparent;
       height: 100%;
       width: 100%;
-      z-index: 300;
+      z-index: $zindex-dropdown-menu;
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index 499b9c00116..e30caeb1dfb 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -1136,10 +1136,6 @@ table.code {
       display: block;
     }
   }
-
-  .note-edit-form {
-    margin-left: $note-icon-gutter-width;
-  }
 }
 
 .discussion-body .image .frame {
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 41fc4d3dd4e..f56d8f2c2a9 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -216,7 +216,7 @@
   position: absolute;
   width: auto;
   top: 100%;
-  z-index: 300;
+  z-index: $zindex-dropdown-menu;
   min-width: 240px;
   max-width: 500px;
   margin-top: $dropdown-vertical-offset;
@@ -326,7 +326,7 @@
     color: $gl-text-color-secondary;
   }
 
-  .badge.badge-pill + span:not(.badge.badge-pill) {
+  .badge.badge-pill + span:not(.badge):not(.badge-pill) {
     // Expects up to 3 digits on the badge
     margin-right: 40px;
   }
@@ -497,7 +497,7 @@
   li {
     a,
     button,
-    .dropdown-item {
+    .dropdown-item:not(.open-with-link) {
       padding: 8px 40px;
       position: relative;
 
@@ -525,7 +525,7 @@
 
       &.is-active {
         /* stylelint-disable-next-line function-url-quotes */
-        background: url(asset_path('checkmark.png')) no-repeat 14px 8px;
+        background: url(asset_path('checkmark.png')) no-repeat 14px center;
       }
     }
   }
@@ -896,7 +896,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
       position: absolute;
       top: 13px;
       right: 25px;
-      color: $gray-50;
+      color: $gray-300;
     }
   }
 
@@ -1093,17 +1093,3 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
     width: $gl-dropdown-width-wide;
   }
 }
-
-.gl-dropdown-item-deprecated-adapter {
-  .dropdown-item {
-    align-items: flex-start;
-
-    .gl-new-dropdown-item-text-primary {
-      @include gl-font-weight-bold;
-    }
-
-    .gl-new-dropdown-item-text-secondary {
-      color: inherit;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/framework/feature_highlight.scss b/app/assets/stylesheets/framework/feature_highlight.scss
index 8d411747b28..36f1b1f2903 100644
--- a/app/assets/stylesheets/framework/feature_highlight.scss
+++ b/app/assets/stylesheets/framework/feature_highlight.scss
@@ -1,14 +1,7 @@
 .feature-highlight {
-  position: relative;
-  margin-left: $gl-padding;
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-
   &::before {
     content: '';
     display: block;
-    position: absolute;
     top: 6px;
     left: 6px;
     width: 8px;
@@ -29,56 +22,22 @@
   }
 }
 
-.feature-highlight-popover-content {
-  display: none;
-
-  hr {
-    margin: $gl-padding 0;
-  }
-
-  .btn-link {
-    svg {
-      @include btn-svg;
-
-      path {
-        fill: currentColor;
-      }
-    }
-  }
-
-  .feature-highlight-illustration {
-    width: 100%;
-    height: 100px;
-    padding-top: 12px;
-    padding-bottom: 12px;
 
-    background-color: $indigo-50;
-    border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
-    border-bottom: 1px solid darken($gray-normal, 8%);
-  }
-}
-
-.popover .feature-highlight-popover-content {
-  display: block;
+.feature-highlight-illustration {
+  background-color: $indigo-50;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  border-bottom: 1px solid darken($gray-normal, 8%);
 }
 
 .feature-highlight-popover {
   width: 240px;
 
-  &.right > .arrow {
-    border-right-color: $border-color;
-  }
-
   .popover-body {
     padding: 0;
   }
 }
 
-.feature-highlight-popover-sub-content {
-  padding: $gl-padding $gl-padding-12;
-}
-
 @include keyframes(pulse-highlight) {
   0% {
     box-shadow: 0 0 0 0 rgba($blue-200, 0.4);
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index fe8c27ae9b6..bda123fa7ea 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -2,6 +2,14 @@
  * File content holder
  *
  */
+.container-fluid.container-limited.limit-container-width {
+  .file-holder.readme-holder.limited-width-container .file-content {
+    max-width: $limited-layout-width;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
 .file-holder {
   border: 1px solid $border-color;
   border-top: 0;
@@ -17,12 +25,6 @@
 
   &.readme-holder {
     margin: $gl-padding 0;
-
-    &.limited-width-container .file-content {
-      max-width: $limited-layout-width;
-      margin-left: auto;
-      margin-right: auto;
-    }
   }
 
   .file-title {
@@ -351,23 +353,17 @@ span.idiff {
     color: $gl-text-color;
   }
 
-  .file-actions .btn:not(.btn-icon) {
-    padding: 0 10px;
-    font-size: 13px;
-    line-height: 28px;
-    display: inline-block;
-    float: none;
-  }
-
   .file-actions .ide-edit-button {
     z-index: 2;
   }
 
-  @include media-breakpoint-down(sm) {
-    display: block;
-
+  @include media-breakpoint-down(md) {
     .file-actions {
-      margin-top: 5px;
+      margin-top: $gl-padding-8;
+
+      .btn {
+        margin-bottom: $gl-padding-8;
+      }
     }
   }
 }
@@ -442,12 +438,6 @@ span.idiff {
     .user-avatar-link.new-comment {
       position: absolute;
       margin: 40px $gl-padding 0 116px;
-
-      ~ .note-edit-form form.edit-note {
-        @include media-breakpoint-up(sm) {
-          margin-left: $note-icon-gutter-width;
-        }
-      }
     }
   }
 
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index 5f56fa3be86..07d59847829 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -475,6 +475,15 @@
     }
   }
 
+  .sort-dropdown-container {
+    // This property is set to have borders
+    // around sort dropdown match with filter
+    // input field.
+    .gl-button {
+      box-shadow: inset 0 0 0 1px $gray-400;
+    }
+  }
+
   @include media-breakpoint-up(md) {
     .sort-dropdown-container {
       margin-left: 10px;
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 730e10114c3..ffcc20b624b 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -516,28 +516,8 @@
     left: auto;
     max-height: $dropdown-max-height-lg;
 
-    li.current-user {
-      padding: $dropdown-item-padding-y $dropdown-item-padding-x;
-
-      .user-name {
-        display: block;
-      }
-
-      .user-status {
-        margin-right: 0;
-        max-width: 240px;
-        font-size: $gl-font-size-small;
-
-        gl-emoji {
-          font-size: $gl-font-size-small;
-        }
-
-        .user-status-emoji {
-          gl-emoji {
-            font-size: $gl-font-size;
-          }
-        }
-      }
+    .user-status {
+      max-width: 240px;
     }
 
     svg {
diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss
index 5623d38d66e..222e10f51ad 100644
--- a/app/assets/stylesheets/framework/icons.scss
+++ b/app/assets/stylesheets/framework/icons.scss
@@ -3,10 +3,6 @@
   svg {
     fill: $green-500;
   }
-
-  &.add-border {
-    @include borderless-status-icon($green-500);
-  }
 }
 
 .ci-status-icon-error,
@@ -14,10 +10,6 @@
   svg {
     fill: $red-500;
   }
-
-  &.add-border {
-    @include borderless-status-icon($red-500);
-  }
 }
 
 .ci-status-icon-pending,
@@ -27,59 +19,29 @@
   svg {
     fill: $orange-500;
   }
-
-  &.add-border {
-    @include borderless-status-icon($orange-500);
-  }
-}
-
-.ci-status-icon-preparing {
-  svg {
-    fill: $gray-300;
-  }
-
-  &.add-border {
-    @include borderless-status-icon($gray-300);
-  }
 }
 
 .ci-status-icon-running {
   svg {
     fill: $blue-400;
   }
-
-  &.add-border {
-    @include borderless-status-icon($blue-400);
-  }
 }
 
 .ci-status-icon-canceled,
-.ci-status-icon-disabled {
+.ci-status-icon-disabled,
+.ci-status-icon-scheduled,
+.ci-status-icon-manual {
   svg {
     fill: $gl-text-color;
   }
-
-  &.add-border {
-    @include borderless-status-icon($gl-text-color);
-  }
 }
 
+.ci-status-icon-preparing,
 .ci-status-icon-created,
 .ci-status-icon-skipped,
 .ci-status-icon-notfound {
   svg {
-    fill: $gray-darkest;
-  }
-
-  &.add-border {
-    @include borderless-status-icon($gray-darkest);
-  }
-}
-
-.ci-status-icon-scheduled,
-.ci-status-icon-manual {
-  svg {
-    fill: $gl-text-color;
+    fill: var(--gray-400, $gray-400);
   }
 }
 
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index e3d02d01496..e29e204b14f 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -354,13 +354,6 @@
   }
 }
 
-@mixin borderless-status-icon($color) {
-  svg {
-    border: 1px solid $color;
-    border-radius: 50%;
-  }
-}
-
 @mixin emoji-menu-toggle-button {
   line-height: 1;
   padding: 0;
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index bef33bd2ef0..241aaad015e 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -75,7 +75,7 @@
 
 .right-sidebar-expanded {
   padding-right: 0;
-  z-index: 300;
+  z-index: $zindex-dropdown-menu;
 
   @include media-breakpoint-only(sm) {
     &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper {
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index 89713fdbbea..92405c00c5e 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
@@ -69,9 +69,6 @@ table {
         }
       }
 
-      td {
-        border-color: $white-normal;
-      }
     }
 
     .thead-white {
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 1a568bb41a5..496e2aba421 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -458,7 +458,7 @@
   h6 {
     a.anchor {
       float: left;
-      margin-left: -16px;
+      margin-left: -20px;
       text-decoration: none;
       outline: none;
 
@@ -471,6 +471,11 @@
     &:hover > a.anchor::after {
       visibility: visible;
     }
+
+    > a.anchor:focus::after {
+      visibility: visible;
+      outline: auto;
+    }
   }
 
   .big {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 674ba1a307b..4bf9236407f 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -433,6 +433,7 @@ $browser-scrollbar-size: 10px;
  */
 $header-height: 40px;
 $header-zindex: 1000;
+$zindex-dropdown-menu: 300;
 $suggestion-header-height: 46px;
 $ide-statusbar-height: 25px;
 $fixed-layout-width: 1280px;
@@ -626,7 +627,6 @@ $search-input-xl-width: 320px;
 $note-disabled-comment-color: #b2b2b2;
 $note-targe3-outside: #fffff0;
 $note-targe3-inside: #ffffd3;
-$note-icon-gutter-width: 55px;
 
 /*
 * Identicon
@@ -871,6 +871,27 @@ $add-to-slack-well-max-width: 750px;
 $add-to-slack-logo-size: 100px;
 
 /*
+Security & Compliance Carousel
+*/
+$security-and-compliance-carousel-image-carousel-width: 1000px;
+$security-and-compliance-carousel-image-discover-button-width: 45%;
+$security-and-compliance-carousel-image-discover-buttons-max-width: 280px;
+$security-and-compliance-carousel-image-discover-footer-max-width: 500px;
+$security-and-compliance-carousel-image-discover-feedback-width: 30%;
+$security-and-compliance-carousel-image-discover-text-carousel-max-width: 650px;
+$security-and-compliance-carousel-image-discover-text-carousel-caption-height: 100%;
+$security-and-compliance-carousel-image-discover-text-carousel-caption-max-width: 500px;
+$security-and-compliance-carousel-control-icon-width: 10px;
+$security-and-compliance-carousel-control-position: -5%;
+$security-and-compliance-carousel-inner-width: 90%;
+$security-and-compliance-carousel-indicators-bottom: -20px;
+$security-and-compliance-carousel-indicators-bottom-lg: -15px;
+$security-and-compliance-carousel-indicators-dimension: 6px;
+$security-and-compliance-carousel-indicators-border-radius: 100%;
+$security-and-compliance-carousel-prev-icon-background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666666' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
+$security-and-compliance-carousel-next-icon-background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666666' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
+
+/*
 Popup
 */
 $popup-triangle-size: 15px;