Merge branch 'cngo-remove-issue-token-css' into 'master'

Remove global issue token css

See merge request gitlab-org/gitlab!71468

app/assets/javascripts/related_issues/components/issue_token.vue

@@ -48,7 +48,7 @@ export default {
 <template>
   <div
     :class="{
-      'issue-token': isCondensed,
+      'issue-token gl-display-inline-flex gl-align-items-stretch gl-max-w-full gl-line-height-24 gl-white-space-nowrap': isCondensed,
       'flex-row issuable-info-container': !isCondensed,
     }"
   >
@@ -57,7 +57,7 @@ export default {
       ref="link"
       v-gl-tooltip
       :class="{
-        'issue-token-link': isCondensed,
+        'issue-token-link gl-display-inline-flex gl-min-w-0 gl-text-gray-500': isCondensed,
         'issuable-main-info': !isCondensed,
       }"
       :href="computedPath"
@@ -69,19 +69,19 @@ export default {
         v-if="hasTitle"
         ref="title"
         :class="{
-          'issue-token-title issue-token-end': isCondensed,
+          'issue-token-title issue-token-end gl-overflow-hidden gl-display-flex gl-align-items-baseline gl-text-gray-500 gl-pl-3': isCondensed,
           'issue-title block-truncated': !isCondensed,
-          'issue-token-title-standalone': !canRemove,
+          'gl-rounded-top-right-small gl-rounded-bottom-right-small gl-pr-3': !canRemove,
         }"
         class="js-issue-token-title"
       >
-        <span class="issue-token-title-text">{{ title }}</span>
+        <span class="gl-text-truncate">{{ title }}</span>
       </component>
       <component
         :is="innerComponentType"
         ref="reference"
         :class="{
-          'issue-token-reference': isCondensed,
+          'issue-token-reference gl-display-flex gl-align-items-center gl-rounded-top-left-small gl-rounded-bottom-left-small gl-px-3': isCondensed,
           'issuable-info': !isCondensed,
         }"
       >
@@ -103,7 +103,7 @@ export default {
       ref="removeButton"
       v-gl-tooltip
       :class="{
-        'issue-token-remove-button': isCondensed,
+        'issue-token-remove-button gl-display-flex gl-align-items-center gl-px-3 gl-border-0 gl-rounded-top-right-small gl-rounded-bottom-right-small gl-text-gray-500': isCondensed,
         'btn btn-default': !isCondensed,
       }"
       :title="removeButtonLabel"

ee/app/assets/javascripts/sidebar/components/cve_id_request/cve_id_request_sidebar.vue

@@ -76,7 +76,7 @@ export default {
 </script>
 
 <template>
-  <div v-if="confidential" class="block cve-id-request">
+  <div v-if="confidential" class="cve-id-request gl-display-block gl-pb-0 gl-border-b-0">
     <div
       v-gl-tooltip.viewport.left
       :title="tooltipTitle"
@@ -107,7 +107,7 @@ export default {
         <gl-icon name="close" />
       </div>
 
-      <div class="cve-id-request-content">
+      <div class="gl-mt-5">
         <gl-link
           :href="newCveIdRequestUrl"
           target="_blank"

ee/app/assets/stylesheets/pages/issues.scss

-.issue-token {
-  display: inline-flex;
-  align-items: stretch;
-  max-width: 100%;
-  line-height: 1.75;
-  white-space: nowrap;
-}
-
 .issue-token-link {
-  display: inline-flex;
-  min-width: 0;
-
-  color: $gl-text-color-secondary;
-
   &[href] {
     color: $blue-600;
   }
@@ -24,14 +11,8 @@
 }
 
 .issue-token-reference {
-  display: flex;
-  align-items: center;
   margin-right: 1px;
-  padding-left: 0.5em;
-  padding-right: 0.5em;
   background-color: $gray-lighter;
-  border-top-left-radius: 2px;
-  border-bottom-left-radius: 2px;
   transition: background $general-hover-transition-duration $general-hover-transition-curve, color $general-hover-transition-duration $general-hover-transition-curve;
 
   .issue-token:hover &,
@@ -43,12 +24,7 @@
 }
 
 .issue-token-title {
-  overflow: hidden;
-  display: flex;
-  align-items: baseline;
-  padding-left: 0.5em;
   background-color: $gray-normal;
-  color: $gl-text-color-secondary;
   transition: background $general-hover-transition-duration $general-hover-transition-curve;
 
   .issue-token:hover &,
@@ -57,26 +33,8 @@
   }
 }
 
-.issue-token-title-standalone {
-  padding-right: 0.5em;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-}
-
-.issue-token-title-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 .issue-token-remove-button {
-  display: flex;
-  align-items: center;
-  padding: 0 0.5em;
   background-color: $gray-normal;
-  border: 0;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-  color: $gl-text-color-secondary;
   transition: background $general-hover-transition-duration $general-hover-transition-curve;
 
   &:hover,
@@ -89,9 +47,6 @@
 }
 
 .cve-id-request {
-  padding-bottom: 0;
-  border-bottom: 0;
-
   .help-button,
   .close-help-button {
     cursor: pointer;
@@ -110,10 +65,6 @@
     opacity: 0;
   }
 
-  .cve-id-request-content {
-    margin-top: 16px;
-  }
-
   .cve-id-request-help-state {
     background: $white;
     margin: 16px -20px -20px;