github.com/uchennaokeke444/nomad@v0.11.8/website/components/featured-slider/style.css (about)

     1  .g-featured-slider {
     2    & .logo-bar-container {
     3      display: flex;
     4      padding: 32px 0;
     5      align-items: center;
     6      justify-content: center;
     7  
     8      & .logo-bar {
     9        flex-basis: 33.333%;
    10        cursor: pointer;
    11        position: relative;
    12        transition: transform 0.2s ease;
    13        margin-right: 32px;
    14  
    15        &:last-child {
    16          margin-right: 0;
    17        }
    18  
    19        & .logo-container {
    20          height: 84px;
    21          text-align: center;
    22          display: flex;
    23          flex-direction: column;
    24          justify-content: center;
    25          align-items: center;
    26          padding: 24px;
    27  
    28          & picture,
    29          & img {
    30            object-fit: contain;
    31            width: 100%;
    32            height: 100%;
    33          }
    34  
    35          @media (min-width: 768px) {
    36            height: 92px;
    37            padding: 32px;
    38          }
    39        }
    40  
    41        & .progress-bar {
    42          width: 100%;
    43          height: 2px;
    44          display: block;
    45          background-color: var(--DEPRECATED-gray-9);
    46  
    47          &.dark {
    48            background-color: var(--DEPRECATED-gray-3);
    49          }
    50  
    51          & span {
    52            width: 0;
    53            background-color: var(--brand);
    54            height: 100%;
    55            display: block;
    56            animation-duration: 10s;
    57            &.nomad {
    58              background-color: var(--nomad);
    59            }
    60            &.consul {
    61              background-color: var(--consul);
    62            }
    63            &.terraform {
    64              background-color: var(--terraform);
    65            }
    66            &.active {
    67              animation-name: case-study-bar;
    68              animation-timing-function: linear;
    69            }
    70          }
    71        }
    72  
    73        &:hover {
    74          transform: translateY(-4px);
    75        }
    76      }
    77  
    78      /* When there are two case studies */
    79      &.double {
    80        & .logo-bar {
    81          flex-basis: 50%;
    82        }
    83      }
    84  
    85      @media (min-width: 768px) {
    86        padding: 0 0 48px;
    87      }
    88    }
    89  
    90    & .feature-container {
    91      overflow: hidden;
    92  
    93      & .slider-container {
    94        transition: transform 400ms ease-out;
    95  
    96        & .slider-frame {
    97          & .feature {
    98            & .feature-image {
    99              margin-bottom: 2rem;
   100  
   101              & img,
   102              & picture {
   103                width: 100%;
   104                height: auto;
   105              }
   106            }
   107  
   108            & .feature-content {
   109              text-align: center;
   110  
   111              & h3 {
   112                margin: 0 0 8px;
   113              }
   114  
   115              & .single-logo {
   116                margin-bottom: 32px;
   117                width: 100%;
   118                height: 65px;
   119  
   120                & picture,
   121                & img {
   122                  height: 100%;
   123                  width: auto;
   124                }
   125              }
   126  
   127              & .g-btn {
   128                margin-top: 32px;
   129              }
   130            }
   131  
   132            @media (min-width: 768px) {
   133              display: flex;
   134              flex-direction: row;
   135              flex-wrap: nowrap;
   136              align-items: center;
   137  
   138              & .feature-image {
   139                margin-bottom: 0;
   140                flex-basis: 60%;
   141                margin-right: 64px;
   142              }
   143  
   144              & .feature-content {
   145                flex-basis: 40%;
   146                text-align: left;
   147  
   148                & p {
   149                  margin: 0;
   150  
   151                  & + p {
   152                    margin-top: 1em;
   153                  }
   154                }
   155              }
   156            }
   157          }
   158  
   159          &.single {
   160            & .case-study {
   161              align-items: flex-start;
   162            }
   163          }
   164        }
   165      }
   166    }
   167  }
   168  
   169  @keyframes case-study-bar {
   170    0% {
   171      width: 0;
   172    }
   173    100% {
   174      width: 100%;
   175    }
   176  }