catalog-ui/src/assets/styles/sdc-ui.css

   1 @charset "UTF-8";
   2 /* Colors */
   3 .sdc-bc-blue {
   4   background-color: #009fdb; }
   5
   6 .sdc-bc-dark-blue {
   7   background-color: #0568ae; }
   8
   9 .sdc-bc-light-blue {
  10   background-color: #71c5e8; }
  11
  12 .sdc-bc-green {
  13   background-color: #4ca90c; }
  14
  15 .sdc-bc-dark-green {
  16   background-color: #007a3e; }
  17
  18 .sdc-bc-light-green {
  19   background-color: #b5bd00; }
  20
  21 .sdc-bc-orange {
  22   background-color: #ea7400; }
  23
  24 .sdc-bc-yellow {
  25   background-color: #ffb81c; }
  26
  27 .sdc-bc-dark-purple {
  28   background-color: #702f8a; }
  29
  30 .sdc-bc-purple {
  31   background-color: #9063cd; }
  32
  33 .sdc-bc-light-purple {
  34   background-color: #caa2dd; }
  35
  36 .sdc-bc-black {
  37   background-color: #000000; }
  38
  39 .sdc-bc-dark-gray {
  40   background-color: #5a5a5a; }
  41
  42 .sdc-bc-gray {
  43   background-color: #959595; }
  44
  45 .sdc-bc-light-gray {
  46   background-color: #d2d2d2; }
  47
  48 .sdc-bc-white {
  49   background-color: #ffffff; }
  50
  51 /* Prefix */
  52 /* Value Prefix*/
  53 /* Box sizing */
  54 /* Borders & Shadows */
  55 /* Opacity */
  56 /* Ellipsis */
  57 /* Vertical placement of multuple lines of text */
  58 /* transform-rotate */
  59 /* transform-translate */
  60 /* transform-scale */
  61 /**/
  62 /**/
  63 /*body {*/
  64   /*-webkit-touch-callout: none;*/
  65   /*-webkit-user-select: none;*/
  66   /*-moz-user-select: none;*/
  67   /*-ms-user-select: none;*/
  68   /*user-select: none; }*/
  69
  70 html {
  71   font-size: 100%;
  72   height: 100%; }
  73
  74 body {
  75   /* scrollbar styling for Internet Explorer */
  76   scrollbar-face-color: #191919;
  77   scrollbar-track-color: #191919;
  78   height: 100%; }
  79
  80 /* scrollbar styling for Google Chrome | Safari | Opera */
  81 ::-webkit-scrollbar {
  82   width: 8px;
  83   height: 8px; }
  84
  85 ::-webkit-scrollbar-track {
  86   background-color: transparent;
  87   border-radius: 10px; }
  88
  89 ::-webkit-scrollbar-thumb {
  90   border-radius: 10px;
  91   background-color: #d2d2d2;
  92   border-right: 2px solid #ffffff; }
  93
  94 /* Mozilla Firefox currently doesn't support scrollbar styling */
  95 ul {
  96   list-style: none; }
  97
  98 h1, h2, h3, h4, h5, h6, ul {
  99   margin: 0;
 100   padding: 0; }
 101
 102 .disabled {
 103   opacity: 0.7 !important; }
 104
 105 fieldset {
 106   border: none; }
 107
 108 fieldset label {
 109   display: inline-block; }
 110
 111 .nav-tabs > li > a:focus,
 112 .btn:focus,
 113 .btn:active:focus,
 114 .btn.active:focus {
 115   outline: none; }
 116
 117 /* Fonts */
 118 .text-lowercase {
 119   text-transform: lowercase; }
 120
 121 .text-uppercase, .heading-3-light, .heading-3, .heading-3-medium {
 122   text-transform: uppercase; }
 123
 124 .text-capitalize {
 125   text-transform: capitalize; }
 126
 127 .heading-1 {
 128   font-weight: 300;
 129   font-size: 36px; }
 130
 131 .heading-2 {
 132   font-weight: 300;
 133   font-size: 24px; }
 134
 135 .heading-3-light {
 136   font-weight: 300;
 137   font-size: 20px; }
 138
 139 .heading-3 {
 140   font-weight: 400;
 141   font-size: 20px; }
 142
 143 .heading-3-medium {
 144   font-weight: 600;
 145   font-size: 20px; }
 146
 147 .heading-4 {
 148   font-weight: 400;
 149   font-size: 18px; }
 150
 151 .heading-4-medium {
 152   font-weight: 600;
 153   font-size: 18px; }
 154
 155 .heading-5 {
 156   font-weight: 400;
 157   font-size: 16px; }
 158
 159 .heading-5-medium, .catalog-tile .catalog-tile-top .catalog-tile-item-name, .sdc-tile-catalog .sdc-tile-content .sdc-tile-content-info .sdc-tile-content-info-item-name {
 160   font-weight: 400;
 161   line-height: 16px;
 162   font-size: 16px; }
 163
 164 .body-1 {
 165   font-weight: 400;
 166   font-size: 14px; }
 167
 168 .body-1-medium {
 169   font-weight: 600;
 170   font-size: 14px; }
 171
 172 .body-1-light {
 173   font-weight: 300;
 174   font-size: 14px; }
 175
 176 .body-2, .catalog-tile .catalog-tile-top .catalog-tile-entity-details .catalog-tile-version-info .catalog-tile-item-version, .catalog-tile .catalog-tile-content .catalog-tile-locking-user-name, .sdc-tile-catalog .sdc-tile-content .sdc-tile-content-info .sdc-tile-content-info-version-info .sdc-tile-content-info-version-info-text, .sdc-tile-catalog .sdc-tile-footer .sdc-tile-footer-text {
 177   font-weight: 400;
 178   font-size: 13px; }
 179
 180 .body-2-medium, .catalog-tile .catalog-tile-content {
 181   font-weight: 600;
 182   font-size: 13px; }
 183
 184 .body-3 {
 185   font-weight: 400;
 186   font-size: 12px; }
 187
 188 .body-3-medium, .catalog-tile .catalog-tile-top .catalog-tile-entity-details .catalog-tile-vendor-name, .catalog-tile.vendor-type .catalog-tile-top .catalog-tile-vsp-count, .sdc-tile-catalog .sdc-tile-content .sdc-tile-content-info .sdc-tile-content-info-vendor-name {
 189   font-weight: 600;
 190   font-size: 12px; }
 191
 192 .body-3-light {
 193   font-weight: 300;
 194   font-size: 12px; }
 195
 196 .circle-icon-text {
 197   font-weight: 600;
 198   font-size: 14px; }
 199
 200 .sdc-icon {
 201   display: inline-block;
 202   text-rendering: auto;
 203   -webkit-font-smoothing: antialiased;
 204   -moz-osx-font-smoothing: grayscale;
 205   width: 16px;
 206   height: 16px; }
 207
 208 .sdc-icon-locked {
 209   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='15' viewBox='0 0 11 15' id='locked_icon'>  <metadata><?xpacket begin='' id='W5M0MpCehiHzreSzNTczkc9d'?><x:xmpmeta xmlns:x='adobe:ns:meta/' x:xmptk='Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01        '>   <rdf:RDF xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns#'>      <rdf:Description rdf:about=''/>   </rdf:RDF></x:xmpmeta><?xpacket end='w'?></metadata><defs>    <style>      .cls-1 {        fill: #959595;        fill-rule: evenodd;      }    </style>  </defs>  <path id='Shape_77_copy_10' data-name='Shape 77 copy 10' class='cls-1' d='M445,359a16.71,16.71,0,0,0-2.1-.009c-1.945.045-3.195,0.049-3.9,0.009v-5a1.743,1.743,0,0,1,2-2h1a1.743,1.743,0,0,1,2,2v5c0.474,0.063.343-.073,1,0,0.266,0.029,0,.279,0,0v-5a2.726,2.726,0,0,0-3-3h-1.142c-1.72-.125-2.715,1.562-2.858,3,0.088,0.009,0,7.338,0,5h0a1.891,1.891,0,0,0-2,1.689v3.461A1.823,1.823,0,0,0,437.775,366h7.448A1.823,1.823,0,0,0,447,364.15v-3.461A2.018,2.018,0,0,0,445,359Z' transform='translate(-436 -351)'/></svg>");
 210   background-repeat: no-repeat; }
 211
 212 .sdc-icon-plus {
 213   background-image: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><svg version='1.1' id='plus_icon' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 19 19' style='enable-background:new 0 0 19 19;' xml:space='preserve'><g><rect y='8' width='19' height='3'/><path id='Rectangle_2139_copy' d='M8,19V0h3v19H8z'/></g></svg>");
 214   background-repeat: no-repeat; }
 215
 216 .sdc-icon-unlocked {
 217   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='18' viewBox='0 0 11 18' id='unlocked_icon'>  <metadata><?xpacket begin='' id='W5M0MpCehiHzreSzNTczkc9d'?><x:xmpmeta xmlns:x='adobe:ns:meta/' x:xmptk='Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01        '>   <rdf:RDF xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns#'>      <rdf:Description rdf:about=''/>   </rdf:RDF></x:xmpmeta><?xpacket end='w'?></metadata><defs>    <style>      .cls-1 {        fill: #959595;        fill-rule: evenodd;      }    </style>  </defs>  <path id='Shape_77_copy_16' data-name='Shape 77 copy 16' class='cls-1' d='M663,358a16.723,16.723,0,0,0-2.1-.009c-1.944.045-3.194,0.049-3.9,0.009v-7a1.743,1.743,0,0,1,2-2h1a1.743,1.743,0,0,1,2,2v2c0.474,0.064.343-.073,1,0,0.266,0.029,0,.279,0,0v-2a2.726,2.726,0,0,0-3-3h-1.142c-1.72-.125-2.715,1.562-2.858,3,0.088,0.009,0,9.338,0,7h0a1.891,1.891,0,0,0-2,1.689v4.461a1.823,1.823,0,0,0,1.775,1.85h7.448A1.823,1.823,0,0,0,665,364.15v-4.461A2.018,2.018,0,0,0,663,358Zm1.05,6.15a0.827,0.827,0,0,1-.8.836H655.8a0.827,0.827,0,0,1-.8-0.836l0-4.15a1.164,1.164,0,0,1,.8-1.147h7.448A1.129,1.129,0,0,1,664,360Z' transform='translate(-654 -348)'/></svg>");
 218   background-repeat: no-repeat; }
 219
 220 .sdc-icon-vendor {
 221   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 53 47'  id='vendor_icon'><title>vendor</title><g id='Layer_2' data-name='Layer 2'><g id='vlm_icon' data-name='vlm icon'><path d='M49,7,38.5,7V5.92A5.92,5.92,0,0,0,32.58,0H20.42A5.92,5.92,0,0,0,14.5,5.92V7.15L4,7.2a3.8,3.8,0,0,0-4,3.5V43.5C0,45.4,2,47,4.2,47L49,46.8a3.8,3.8,0,0,0,4-3.5V10.5A3.8,3.8,0,0,0,49,7ZM16.5,5.92A3.92,3.92,0,0,1,20.42,2H32.58A3.92,3.92,0,0,1,36.5,5.92V7.06l-20,.09ZM2,10.8A1.9,1.9,0,0,1,4,9l45-.2a1.9,1.9,0,0,1,2,1.8v8.87L32.94,24.18a6.49,6.49,0,0,0-12.89,0L2,19.51V10.8ZM31,25a4.5,4.5,0,1,1-4.5-4.5A4.5,4.5,0,0,1,31,25ZM49,45,4,45.2A1.9,1.9,0,0,1,2,43.4V21.57l18.13,4.73a6.5,6.5,0,0,0,12.74,0L51,21.53V43.21A1.9,1.9,0,0,1,49,45Z'/></g></g></svg>");
 222   background-repeat: no-repeat; }
 223
 224 .sdc-icon-vlm {
 225   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 53'><title>vlm_new_icon</title><g id='Layer_2' data-name='Layer 2'><g id='vlm_icon' data-name='vlm icon'><path d='M41,2a2,2,0,0,1,2,2l.19,45a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2L1.81,4a2,2,0,0,1,2-2H41m-.15-2H4A4.2,4.2,0,0,0,0,4.24L.19,49a4,4,0,0,0,4,4H41a4,4,0,0,0,4-4L44.81,4a4,4,0,0,0-4-4Z'/><rect x='14' y='11' width='17' height='2'/><rect x='14' y='18' width='10' height='2'/><polygon points='20.56 38.85 13.87 33.14 15.16 31.62 20.39 36.08 29.08 26.63 30.55 27.98 20.56 38.85'/></g></g></svg>");
 226   background-repeat: no-repeat; }
 227
 228 .sdc-icon-vsp {
 229   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 59.5 40' id='vsp_icon'><title>vsp_new_icon</title><g id='Layer_2' data-name='Layer 2'><g id='vlm_icon' data-name='vlm icon'><path d='M58.28,30.74c-1.49-1.82-3-2.7-4.67-2.74a8.5,8.5,0,0,0-16.22-2.44,6.93,6.93,0,0,0-4.06.66A7.23,7.23,0,0,0,36.42,40H53.5a6,6,0,0,0,6-6A5.18,5.18,0,0,0,58.28,30.74ZM53.5,38H36.42a5.25,5.25,0,0,1-5.21-5.91,5.32,5.32,0,0,1,3-4.06,5,5,0,0,1,2.21-.53,5.25,5.25,0,0,1,1.35.18l.92.24L39,27A6.5,6.5,0,0,1,51.67,29v1.3l1.17-.2c1-.17,2.17-.17,3.91,2a3.18,3.18,0,0,1,.76,2A4,4,0,0,1,53.5,38Z'/><path d='M49,0,4,.17A3.79,3.79,0,0,0,0,3.69V7.94H0v2H0V36.31C0,38.35,2,40,4.25,40l20.84-.08a1,1,0,0,0,0-1.92L4,38.08a1.89,1.89,0,0,1-2-1.76V10H51v7a1,1,0,0,0,2,0V3.53A3.79,3.79,0,0,0,49,0ZM2,8V3.76A1.89,1.89,0,0,1,4,2l45-.16a1.89,1.89,0,0,1,2,1.76V8Z'/></g></g></svg>");
 230   background-repeat: no-repeat; }
 231
 232 .svg-icon.purple {
 233   fill: #9063cd; }
 234
 235 .svg-icon.purple-hover {
 236   fill: #9063cd; }
 237   .svg-icon.purple-hover:hover {
 238     fill: #caa2dd; }
 239
 240 .svg-icon.blue {
 241   fill: #009fdb; }
 242
 243 .svg-icon.blue-hover {
 244   fill: #009fdb; }
 245   .svg-icon.blue-hover:hover {
 246     fill: #71c5e8; }
 247
 248 .svg-icon.gray {
 249   fill: #959595; }
 250
 251 .svg-icon.gray-hover {
 252   fill: #000000; }
 253   .svg-icon.gray-hover:hover {
 254     fill: #d2d2d2; }
 255
 256 .svg-icon.black {
 257   fill: #000000; }
 258
 259 .svg-icon.black-hover {
 260   fill: #000000; }
 261   .svg-icon.black-hover:hover {
 262     fill: #d2d2d2; }
 263
 264 .sdc-tile, .sdc-tile-catalog {
 265   box-sizing: border-box;
 266   background-color: #ffffff;
 267   display: flex;
 268   flex-direction: column;
 269   padding: 10px;
 270   cursor: pointer;
 271   border: 1px solid #eaeaea;
 272   -webkit-box-shadow: 0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05);
 273   -moz-box-shadow: 0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05);
 274   box-shadow: 0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05); }
 275   .sdc-tile:active, .sdc-tile-catalog:active {
 276     border: 1px solid #71c5e8; }
 277   .sdc-tile:hover, .sdc-tile-catalog:hover {
 278     box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
 279     border: 1px solid #d2d2d2; }
 280   .sdc-tile .sdc-tile-header, .sdc-tile-catalog .sdc-tile-header {
 281     position: relative;
 282     flex-shrink: 0;
 283     display: flex;
 284     align-items: flex-start;
 285     flex-direction: column; }
 286   .sdc-tile .sdc-tile-content, .sdc-tile-catalog .sdc-tile-content {
 287     position: relative;
 288     flex: 1;
 289     display: flex;
 290     align-items: flex-start;
 291     flex-direction: column;
 292     overflow: auto;
 293     justify-content: space-between; }
 294   .sdc-tile .sdc-tile-footer, .sdc-tile-catalog .sdc-tile-footer {
 295     position: relative;
 296     flex-shrink: 0;
 297     display: flex;
 298     align-items: flex-start;
 299     flex-direction: column; }
 300
 301 .sdc-tile-catalog {
 302   width: 204px;
 303   height: 200px; }
 304   .sdc-tile-catalog .sdc-tile-header {
 305     line-height: 16px; }
 306     .sdc-tile-catalog .sdc-tile-header .sdc-tile-header-type {
 307       font-size: 16px;
 308       text-transform: uppercase; }
 309       .sdc-tile-catalog .sdc-tile-header .sdc-tile-header-type.purple {
 310         color: #9063cd; }
 311       .sdc-tile-catalog .sdc-tile-header .sdc-tile-header-type.blue {
 312         color: #009fdb; }
 313   .sdc-tile-catalog .sdc-tile-content .sdc-tile-content-icon {
 314     align-items: center;
 315     display: flex;
 316     flex-direction: column;
 317     width: 100%;
 318     padding-top: 25px; }
 319     .sdc-tile-catalog .sdc-tile-content .sdc-tile-content-icon svg {
 320       width: 60px;
 321       height: 40px; }
 322   .sdc-tile-catalog .sdc-tile-content .sdc-tile-content-info {
 323     padding-bottom: 4px;
 324     width: 180px;
 325     overflow: hidden;
 326     text-overflow: ellipsis;
 327     width: auto;
 328     white-space: nowrap;
 329     display: inline-block;
 330     max-width: 178px; }
 331     .sdc-tile-catalog .sdc-tile-content .sdc-tile-content-info .sdc-tile-content-info-vendor-name {
 332       color: #959595;
 333       line-height: 12px; }
 334     .sdc-tile-catalog .sdc-tile-content .sdc-tile-content-info .sdc-tile-content-info-item-name {
 335       color: #191919; }
 336     .sdc-tile-catalog .sdc-tile-content .sdc-tile-content-info .sdc-tile-content-info-version-info {
 337       display: flex;
 338       justify-content: space-between; }
 339   .sdc-tile-catalog .sdc-tile-footer {
 340     display: flex;
 341     flex-direction: row;
 342     border-top: 1px solid #eaeaea;
 343     padding: 0;
 344     width: 180px;
 345     height: 20px; }
 346     .sdc-tile-catalog .sdc-tile-footer .sdc-tile-footer-text {
 347       flex: 1;
 348       padding-top: 5px;
 349       overflow: hidden;
 350       text-overflow: ellipsis;
 351       width: auto;
 352       white-space: nowrap;
 353       display: inline-block;
 354       max-width: 164px; }
 355     .sdc-tile-catalog .sdc-tile-footer .sdc-tile-footer-icon {
 356       flex-shrink: 1;
 357       overflow: hidden;
 358       padding-top: 5px; }
 359       .sdc-tile-catalog .sdc-tile-footer .sdc-tile-footer-icon svg {
 360         width: 16px;
 361         height: 20px; }