diff options
Diffstat (limited to 'src/styles/partials/_partners.scss')
-rw-r--r-- | src/styles/partials/_partners.scss | 123 |
1 files changed, 123 insertions, 0 deletions
diff --git a/src/styles/partials/_partners.scss b/src/styles/partials/_partners.scss new file mode 100644 index 0000000..db407fe --- /dev/null +++ b/src/styles/partials/_partners.scss @@ -0,0 +1,123 @@ +.partners-group { + h3 { + text-align: center; + margin: var(--space-4) 0; + } + + ul { + list-style: none; + display: flex; + flex-wrap: wrap; + justify-content: center; + padding: 0; + + li { + flex-basis: 160px; + margin: var(--space-3); + height: var(--partner-support-height); + } + } + + .partner { + padding: var(--space-3); + height: 100%; + width: 100%; + + display: flex; + align-items: stretch; + justify-content: center; + + background-color: ghostwhite; + + box-shadow: var(--box-shadow-1); + transition: box-shadow var(--animation); + cursor: pointer; + color: transparent; + + &:hover, &:focus { + box-shadow: var(--box-shadow-2); + } + + overflow: hidden; + + picture { + display: flex; + justify-content: center; + align-items: center; + + & > * { + max-width: 100%; + max-height: 100%; + object-fit: contain; + object-position: 50% 50%; + } + } + + } +} + +.partners-group.partner-platinium ul li { + height: var(--partner-platinum-height); + flex-basis: 320px; +} + +.partners-group.partner-gold ul li, .partners-group.partner-startup ul li { + height: var(--partner-gold-height); + flex-basis: 200px; +} + + +/* Partner fancy name */ + +.partners-group .fancy { + line-height: 0.5; + text-align: center; + color: var(--base-secondary-text); + + span { + display: inline-block; + position: relative; + text-transform: capitalize; + + &:before, &:after { + top: 40%; + content: ""; + position: absolute; + height: 5px; + width: 140%; + max-width: 25vw; + } + + &:before { + right: 100%; + margin-right: 15px; + } + + &:after { + left: 100%; + margin-left: 15px; + } + } +} + + +.partners-group.partner-platinium .fancy { + font-size: 1.5em; + color: var(--color-platium); + + span:before, span:after { + border-bottom: 1px solid currentColor; + border-top: 1px solid currentColor; + } +} + +.partners-group.partner-gold .fancy { + font-size: 1.33em; + color: var(--color-gold); + + span:before, span:after { + top: 20%; + border-bottom: 1px solid currentColor; + } +} + |