officialblock 1.0.7 → 1.0.8

package/src/components/BtnList/index.vue

@@ -0,0 +1,588 @@
+<template>
+  <div class="btn-list center" :style="{ backgroundColor: modelValue?.bgColor }" @mouseenter="isHover = true" @mouseleave="isHover = false">
+    <div class="btn-list__container" :class="[modelValue?.width ? `container-content-${modelValue?.width}` : 'container-content']">
+      <div class="btn-list__row">
+        <div class="btn-list__item" v-for="item in modelValue?.data" :key="item.id">
+          <a :href="item.url || '#' " class="size-normal btn-primary" :class="[item.type ? `btn-primary--${item.type}` : '']">
+            <div class="btn-primary__text">{{ item.text }}</div> 
+            <span class="btn-primary__icon"></span>
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <Operate v-if="!modelValue?.readOnly" v-model:show="isHover" @handle-edit="showSetting = true" @handle-delete="handleDelete" @handle-copy="handleCopy"></Operate>
+  </div>
+
+  <Setting v-model:show="showSetting" :data="modelValue"></Setting>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { randomString } from '@/utils/common'
+import Setting from './setting.vue'
+import Operate from '@/components/Operate/index.vue'
+
+// 定义组件名称
+defineOptions({
+  name: 'BtnList'
+})
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => {}
+  },
+
+  // 是否预览
+  isPreview: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'handleDelete', 'handleCopy'])
+
+const handleInit = () => {
+  if (props.modelValue && props.modelValue.data) return // 有数据不用初始化
+  const data = {
+    id: props.modelValue?.id || randomString(),
+    type: 'BtnList',
+    readOnly: props.modelValue?.readOnly || false,
+    width: '',
+    bgColor: '',
+    data: [
+      {
+        id: randomString(),
+        type: '',
+        text: '了解更多',
+        url: 'https://www.baidu.com',
+        isExternal: false,
+      },
+      {
+        id: randomString(),
+        type: 'white',
+        text: '了解更多',
+        url: 'https://www.baidu.com',
+        isExternal: false,
+      },
+      {
+        id: randomString(),
+        type: 'light',
+        text: '了解更多',
+        url: 'https://www.baidu.com',
+        isExternal: false,
+      },
+      {
+        id: randomString(),
+        type: 'blue',
+        text: '了解更多',
+        url: 'https://www.baidu.com',
+        isExternal: false,
+      },
+    ]
+  }
+  emit('update:modelValue', data)
+} 
+
+const isHover = ref<boolean>(false);
+const showSetting = ref<boolean>(false);
+
+const handleDelete = () => {
+  emit('handleDelete', props.modelValue.id)
+}
+
+const handleCopy = () => {
+  emit('handleCopy', props.modelValue)
+}
+
+handleInit()
+</script>
+
+<style lang="scss" scoped>
+.btn-list {
+  position: relative;
+}
+
+.btn-list__row {
+  display: flex;
+  align-items: center;
+  margin-top: -16px;
+  margin-left: -8px;
+  margin-right: -8px;
+}
+
+@media (max-width: 767.98px) {
+  .btn-list__row {
+    flex-direction: column;
+    margin-top: -8px;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .btn-list__row.isnt-fullwidth {
+    align-items: flex-start;
+  }
+}
+
+.btn-list__row.isnt-fullwidth .btn-list__item {
+  width: auto;
+}
+
+.btn-list__row.is-wrap {
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+
+@media (max-width: 767.98px) {
+  .btn-list__row.is-force-nowrap {
+    flex-direction: row;
+  }
+}
+
+.btn-list__item {
+  padding-top: 16px;
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+@media (max-width: 767.98px) {
+  .btn-list__item {
+    padding-top: 8px;
+    width: 100%;
+  }
+  .btn-list__item a,
+  .btn-list__item button {
+    width: 100%;
+  }
+}
+
+.btn-list.center .btn-list__row {
+  justify-content: center;
+}
+
+.btn-primary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #0032a0;
+  background-color: var(--text-color--primary, #0032a0);
+  padding: 11px 15px;
+  min-width: 160px;
+  border: none;
+  border-radius: 4px;
+  overflow: hidden;
+  text-decoration: none;
+  box-shadow: 0 2px 6px rgba(130,130,140,.12);
+  position: relative;
+  z-index: 1;
+  white-space: nowrap;
+}
+
+.btn-primary.size-L {
+  padding: 15px;
+}
+
+@media (max-width: 1023.98px) {
+  .btn-primary.size-L {
+    padding: 11px 15px;
+    min-width: 100px;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .btn-primary.size-L {
+    padding: 8px 12px;
+    min-width: 80px;
+  }
+}
+
+@media (max-width: 1023.98px) {
+  .btn-primary {
+    padding: 11px 15px;
+    min-width: 100px;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .btn-primary {
+    padding: 8px 12px;
+    min-width: 80px;
+  }
+}
+
+.btn-primary.size-XS {
+  padding: 6px 12px;
+  min-width: 100px;
+  border-radius: 2px;
+}
+
+@media (max-width: 1023.98px) {
+  .btn-primary.size-XS {
+    padding: 6px 12px;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .btn-primary.size-XS {
+    padding: 6px 12px;
+  }
+}
+
+.btn-primary.size-XS .btn-primary__icon,
+.btn-primary.size-XS:active .btn-primary__icon,
+.btn-primary.size-XS:hover .btn-primary__icon {
+  display: none;
+}
+
+.btn-primary:before {
+  content: "";
+  display: block;
+  background: #0048e8;
+  position: absolute;
+  width: 200%;
+  height: 500%;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transition: all .3s ease-in-out;
+  z-index: -1;
+  -webkit-clip-path: circle(100% at -80% 90%);
+  clip-path: circle(100% at -80% 90%);
+}
+
+.btn-primary:hover:before {
+  -webkit-clip-path: circle(100% at 50% 50%);
+  clip-path: circle(100% at 50% 50%);
+}
+
+.btn-primary:hover .btn-primary__icon:before {
+  transform: translate(-50%, -50%);
+}
+
+.btn-primary:hover .btn-primary__icon:after {
+  transform: translate(150%, -50%);
+}
+
+.btn-primary:hover .btn-primary__icon:after,
+.btn-primary:hover .btn-primary__icon:before {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNiA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC4yMzUxOTYgNy42MjA3OUwzLjM2MDE4IDQuNDk1OEwwLjIzNTE5NiAxLjM3MDgyQzAuMTYwNjMgMS4yOTYyNSAwLjEwMTQ4MSAxLjIwNzczIDAuMDYxMTI1OSAxLjExMDMxQzAuMDIwNzcxIDEuMDEyODggMS41NzEzN2UtMDkgMC45MDg0NiAwIDAuODAzMDA4Qy0xLjU3MTM2ZS0wOSAwLjY5NzU1NSAwLjAyMDc3MSAwLjU5MzEzNSAwLjA2MTEyNTkgMC40OTU3MUMwLjEwMTQ4MSAwLjM5ODI4NSAwLjE2MDYzIDAuMzA5NzYyIDAuMjM1MTk2IDAuMjM1MTk1QzAuMzA5NzYyIDAuMTYwNjI5IDAuMzk4Mjg1IDAuMTAxNDggMC40OTU3MSAwLjA2MTEyNTFDMC41OTMxMzYgMC4wMjA3NzAyIDAuNjk3NTU2IC0xLjU3MTM3ZS0wOSAwLjgwMzAwOCAwQzAuOTA4NDYxIDEuNTcxMzdlLTA5IDEuMDEyODggMC4wMjA3NzAyIDEuMTEwMzEgMC4wNjExMjUxQzEuMjA3NzMgMC4xMDE0OCAxLjI5NjI1IDAuMTYwNjI5IDEuMzcwODIgMC4yMzUxOTVMNS4wNjc2NCAzLjkzMjAyQzUuMzgxNzUgNC4yNDYxMyA1LjM4MTc1IDQuNzUzNTMgNS4wNjc2NCA1LjA2NzY0TDEuMzcwODIgOC43NjQ0NkMxLjI5NjMxIDguODM5MTMgMS4yMDc4IDguODk4MzYgMS4xMTAzNyA4LjkzODc4QzEuMDEyOTQgOC45NzkyIDAuOTA4NDkxIDkgMC44MDMwMDggOUMwLjY5NzUyNSA5IDAuNTkzMDc4IDguOTc5MiAwLjQ5NTY0NSA4LjkzODc4QzAuMzk4MjEyIDguODk4MzYgMC4zMDk3MDcgOC44MzkxMyAwLjIzNTE5NiA4Ljc2NDQ2Qy0wLjA3MDg1OTEgOC40NTAzNSAtMC4wNzg5MTMyIDcuOTM0ODkgMC4yMzUxOTYgNy42MjA3OVoiIGZpbGw9IiMwMDQ4RTgiLz4KPC9zdmc+Cgo=);
+  background-position: 50%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-color: hsla(0,0%,100%,0);
+}
+
+@media (max-width: 767.98px) {
+  .btn-primary:hover .btn-primary__icon:after,
+  .btn-primary:hover .btn-primary__icon:before {
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgNCA2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMSAxTDMuMDU3MTQgMy4wNTcxNEwxIDUuMTE0MjkiIHN0cm9rZT0iIzAwNDhFOCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K);
+    background-position: 50%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-color: hsla(0,0%,100%,0);
+  }
+}
+
+.btn-primary:active:before {
+  -webkit-clip-path: circle(100% at -80% 90%);
+  clip-path: circle(100% at -80% 90%);
+}
+
+.btn-primary:active .btn-primary__icon:before {
+  transform: translate(-260%, -50%);
+}
+
+.btn-primary:active .btn-primary__icon:after {
+  transform: translate(-50%, -50%);
+}
+
+.btn-primary:active .btn-primary__icon:after,
+.btn-primary:active .btn-primary__icon:before {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNiA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC4yMzUxOTYgNy42MjA3OUwzLjM2MDE4IDQuNDk1OEwwLjIzNTE5NiAxLjM3MDgyQzAuMTYwNjMgMS4yOTYyNSAwLjEwMTQ4MSAxLjIwNzczIDAuMDYxMTI1OSAxLjExMDMxQzAuMDIwNzcxIDEuMDEyODggMS41NzEzN2UtMDkgMC45MDg0NiAwIDAuODAzMDA4Qy0xLjU3MTM2ZS0wOSAwLjY5NzU1NSAwLjAyMDc3MSAwLjU5MzEzNSAwLjA2MTEyNTkgMC40OTU3MUMwLjEwMTQ4MSAwLjM5ODI4NSAwLjE2MDYzIDAuMzA5NzYyIDAuMjM1MTk2IDAuMjM1MTk1QzAuMzA5NzYyIDAuMTYwNjI5IDAuMzk4Mjg1IDAuMTAxNDggMC40OTU3MSAwLjA2MTEyNTFDMC41OTMxMzYgMC4wMjA3NzAyIDAuNjk3NTU2IC0xLjU3MTM3ZS0wOSAwLjgwMzAwOCAwQzAuOTA4NDYxIDEuNTcxMzdlLTA5IDEuMDEyODggMC4wMjA3NzAyIDEuMTEwMzEgMC4wNjExMjUxQzEuMjA3NzMgMC4xMDE0OCAxLjI5NjI1IDAuMTYwNjI5IDEuMzcwODIgMC4yMzUxOTVMNS4wNjc2NCAzLjkzMjAyQzUuMzgxNzUgNC4yNDYxMyA1LjM4MTc1IDQuNzUzNTMgNS4wNjc2NCA1LjA2NzY0TDEuMzcwODIgOC43NjQ0NkMxLjI5NjMxIDguODM5MTMgMS4yMDc4IDguODk4MzYgMS4xMTAzNyA4LjkzODc4QzEuMDEyOTQgOC45NzkyIDAuOTA4NDkxIDkgMC44MDMwMDggOUMwLjY5NzUyNSA5IDAuNTkzMDc4IDguOTc5MiAwLjQ5NTY0NSA4LjkzODc4QzAuMzk4MjEyIDguODk4MzYgMC4zMDk3MDcgOC44MzkxMyAwLjIzNTE5NiA4Ljc2NDQ2Qy0wLjA3MDg1OTEgOC40NTAzNSAtMC4wNzg5MTMyIDcuOTM0ODkgMC4yMzUxOTYgNy42MjA3OVoiIGZpbGw9IiMwMDFFNjAiLz4KPC9zdmc+Cgo=);
+  background-position: 50%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-color: hsla(0,0%,100%,0);
+}
+
+@media (max-width: 767.98px) {
+  .btn-primary:active .btn-primary__icon:after,
+  .btn-primary:active .btn-primary__icon:before {
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgNCA2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMSAxTDMuMDU3MTQgMy4wNTcxNEwxIDUuMTE0MjkiIHN0cm9rZT0iIzAwMUU2MCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K);
+    background-position: 50%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-color: hsla(0,0%,100%,0);
+  }
+}
+
+.btn-primary__text {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.285;
+  letter-spacing: .04em;
+  color: #fff;
+  transition: color .3s ease-in-out;
+}
+
+@media (max-width: 1023.98px) {
+  .btn-primary__text {
+    line-height: 1.428;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .btn-primary__text {
+    line-height: 1.285;
+  }
+}
+
+.btn-primary__icon {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  overflow: hidden;
+  background-color: #fff;
+  position: relative;
+  margin-left: 7px;
+  transition: background-color .3s ease-in-out;
+  flex-shrink: 0;
+}
+
+@media (max-width: 767.98px) {
+  .btn-primary__icon {
+    width: 12px;
+    height: 12px;
+    margin-left: 6px;
+  }
+}
+
+.btn-primary__icon:after,
+.btn-primary__icon:before {
+  content: "";
+  width: 6px;
+  height: 9px;
+  position: absolute;
+  top: 50%;
+  left: 55%;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNiA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC4yMzUxOTYgNy42MjA3OUwzLjM2MDE4IDQuNDk1OEwwLjIzNTE5NiAxLjM3MDgyQzAuMTYwNjMgMS4yOTYyNSAwLjEwMTQ4MSAxLjIwNzczIDAuMDYxMTI1OSAxLjExMDMxQzAuMDIwNzcxIDEuMDEyODggMS41NzEzN2UtMDkgMC45MDg0NiAwIDAuODAzMDA4Qy0xLjU3MTM2ZS0wOSAwLjY5NzU1NSAwLjAyMDc3MSAwLjU5MzEzNSAwLjA2MTEyNTkgMC40OTU3MUMwLjEwMTQ4MSAwLjM5ODI4NSAwLjE2MDYzIDAuMzA5NzYyIDAuMjM1MTk2IDAuMjM1MTk1QzAuMzA5NzYyIDAuMTYwNjI5IDAuMzk4Mjg1IDAuMTAxNDggMC40OTU3MSAwLjA2MTEyNTFDMC41OTMxMzYgMC4wMjA3NzAyIDAuNjk3NTU2IC0xLjU3MTM3ZS0wOSAwLjgwMzAwOCAwQzAuOTA4NDYxIDEuNTcxMzdlLTA5IDEuMDEyODggMC4wMjA3NzAyIDEuMTEwMzEgMC4wNjExMjUxQzEuMjA3NzMgMC4xMDE0OCAxLjI5NjI1IDAuMTYwNjI5IDEuMzcwODIgMC4yMzUxOTVMNS4wNjc2NCAzLjkzMjAyQzUuMzgxNzUgNC4yNDYxMyA1LjM4MTc1IDQuNzUzNTMgNS4wNjc2NCA1LjA2NzY0TDEuMzcwODIgOC43NjQ0NkMxLjI5NjMxIDguODM5MTMgMS4yMDc4IDguODk4MzYgMS4xMTAzNyA4LjkzODc4QzEuMDEyOTQgOC45NzkyIDAuOTA4NDkxIDkgMC44MDMwMDggOUMwLjY5NzUyNSA5IDAuNTkzMDc4IDguOTc5MiAwLjQ5NTY0NSA4LjkzODc4QzAuMzk4MjEyIDguODk4MzYgMC4zMDk3MDcgOC44MzkxMyAwLjIzNTE5NiA4Ljc2NDQ2Qy0wLjA3MDg1OTEgOC40NTAzNSAtMC4wNzg5MTMyIDcuOTM0ODkgMC4yMzUxOTYgNy42MjA3OVoiIGZpbGw9IiMwMDFFNjAiLz4KPC9zdmc+Cgo=);
+  background-position: 50%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-color: hsla(0,0%,100%,0);
+  transition: transform .3s ease-in-out;
+}
+
+@media (max-width: 767.98px) {
+  .btn-primary__icon:after,
+  .btn-primary__icon:before {
+    width: 4.2px;
+    height: 6px;
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgNCA2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMSAxTDMuMDU3MTQgMy4wNTcxNEwxIDUuMTE0MjkiIHN0cm9rZT0iIzAwMUU2MCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K);
+    background-position: 50%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-color: hsla(0,0%,100%,0);
+  }
+}
+
+.btn-primary__icon:before {
+  transform: translate(-260%, -50%);
+}
+
+.btn-primary__icon:after {
+  transform: translate(-50%, -50%);
+}
+
+.btn-primary--white {
+  background-color: #fff;
+  box-shadow: none;
+}
+
+.btn-primary--white:before {
+  background: #c1cede;
+}
+
+.btn-primary--white .btn-primary__text {
+  color: #0032a0;
+  color: var(--text-color--primary, #0032a0);
+  transition: color .3s ease-in-out;
+}
+
+.btn-primary--white .btn-primary__icon {
+  background-color: #0032a0;
+  background-color: var(--text-color--primary, #0032a0);
+}
+
+.btn-primary--white .btn-primary__icon:after,
+.btn-primary--white .btn-primary__icon:before {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNiA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC4yMzUxOTYgNy42MjA3OUwzLjM2MDE4IDQuNDk1OEwwLjIzNTE5NiAxLjM3MDgyQzAuMTYwNjMgMS4yOTYyNSAwLjEwMTQ4MSAxLjIwNzczIDAuMDYxMTI1OSAxLjExMDMxQzAuMDIwNzcxIDEuMDEyODggMS41NzEzN2UtMDkgMC45MDg0NiAwIDAuODAzMDA4Qy0xLjU3MTM2ZS0wOSAwLjY5NzU1NSAwLjAyMDc3MSAwLjU5MzEzNSAwLjA2MTEyNTkgMC40OTU3MUMwLjEwMTQ4MSAwLjM5ODI4NSAwLjE2MDYzIDAuMzA5NzYyIDAuMjM1MTk2IDAuMjM1MTk1QzAuMzA5NzYyIDAuMTYwNjI5IDAuMzk4Mjg1IDAuMTAxNDggMC40OTU3MSAwLjA2MTEyNTFDMC41OTMxMzYgMC4wMjA3NzAyIDAuNjk3NTU2IC0xLjU3MTM3ZS0wOSAwLjgwMzAwOCAwQzAuOTA4NDYxIDEuNTcxMzdlLTA5IDEuMDEyODggMC4wMjA3NzAyIDEuMTEwMzEgMC4wNjExMjUxQzEuMjA3NzMgMC4xMDE0OCAxLjI5NjI1IDAuMTYwNjI5IDEuMzcwODIgMC4yMzUxOTVMNS4wNjc2NCAzLjkzMjAyQzUuMzgxNzUgNC4yNDYxMyA1LjM4MTc1IDQuNzUzNTMgNS4wNjc2NCA1LjA2NzY0TDEuMzcwODIgOC43NjQ0NkMxLjI5NjMxIDguODM5MTMgMS4yMDc4IDguODk4MzYgMS4xMTAzNyA4LjkzODc4QzEuMDEyOTQgOC45NzkyIDAuOTA4NDkxIDkgMC44MDMwMDggOUMwLjY5NzUyNSA5IDAuNTkzMDc4IDguOTc5MiAwLjQ5NTY0NSA4LjkzODc4QzAuMzk4MjEyIDguODk4MzYgMC4zMDk3MDcgOC44MzkxMyAwLjIzNTE5NiA4Ljc2NDQ2Qy0wLjA3MDg1OTEgOC40NTAzNSAtMC4wNzg5MTMyIDcuOTM0ODkgMC4yMzUxOTYgNy42MjA3OVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=);
+  background-position: 50%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-color: hsla(0,0%,100%,0);
+}
+
+@media (max-width: 767.98px) {
+  .btn-primary--white .btn-primary__icon:after,
+  .btn-primary--white .btn-primary__icon:before {
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgNCA2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMSAxTDMuMDU3MTQgMy4wNTcxNEwxIDUuMTE0MjkiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS1maWxsPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K);
+    background-position: 50%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-color: hsla(0,0%,100%,0);
+  }
+}
+
+.btn-primary--white:active .btn-primary__icon:after,
+.btn-primary--white:active .btn-primary__icon:before,
+.btn-primary--white:hover .btn-primary__icon:after,
+.btn-primary--white:hover .btn-primary__icon:before {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNiA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC4yMzUxOTYgNy42MjA3OUwzLjM2MDE4IDQuNDk1OEwwLjIzNTE5NiAxLjM3MDgyQzAuMTYwNjMgMS4yOTYyNSAwLjEwMTQ4MSAxLjIwNzczIDAuMDYxMTI1OSAxLjExMDMxQzAuMDIwNzcxIDEuMDEyODggMS41NzEzN2UtMDkgMC45MDg0NiAwIDAuODAzMDA4Qy0xLjU3MTM2ZS0wOSAwLjY5NzU1NSAwLjAyMDc3MSAwLjU5MzEzNSAwLjA2MTEyNTkgMC40OTU3MUMwLjEwMTQ4MSAwLjM5ODI4NSAwLjE2MDYzIDAuMzA5NzYyIDAuMjM1MTk2IDAuMjM1MTk1QzAuMzA5NzYyIDAuMTYwNjI5IDAuMzk4Mjg1IDAuMTAxNDggMC40OTU3MSAwLjA2MTEyNTFDMC41OTMxMzYgMC4wMjA3NzAyIDAuNjk3NTU2IC0xLjU3MTM3ZS0wOSAwLjgwMzAwOCAwQzAuOTA4NDYxIDEuNTcxMzdlLTA5IDEuMDEyODggMC4wMjA3NzAyIDEuMTEwMzEgMC4wNjExMjUxQzEuMjA3NzMgMC4xMDE0OCAxLjI5NjI1IDAuMTYwNjI5IDEuMzcwODIgMC4yMzUxOTVMNS4wNjc2NCAzLjkzMjAyQzUuMzgxNzUgNC4yNDYxMyA1LjM4MTc1IDQuNzUzNTMgNS4wNjc2NCA1LjA2NzY0TDEuMzcwODIgOC43NjQ0NkMxLjI5NjMxIDguODM5MTMgMS4yMDc4IDguODk4MzYgMS4xMTAzNyA4LjkzODc4QzEuMDEyOTQgOC45NzkyIDAuOTA4NDkxIDkgMC44MDMwMDggOUMwLjY5NzUyNSA5IDAuNTkzMDc4IDguOTc5MiAwLjQ5NTY0NSA4LjkzODc4QzAuMzk4MjEyIDguODk4MzYgMC4zMDk3MDcgOC44MzkxMyAwLjIzNTE5NiA4Ljc2NDQ2Qy0wLjA3MDg1OTEgOC40NTAzNSAtMC4wNzg5MTMyIDcuOTM0ODkgMC4yMzUxOTYgNy42MjA3OVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=);
+  background-position: 50%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-color: hsla(0,0%,100%,0);
+}
+
+@media (max-width: 767.98px) {
+  .btn-primary--white:active .btn-primary__icon:after,
+  .btn-primary--white:active .btn-primary__icon:before,
+  .btn-primary--white:hover .btn-primary__icon:after,
+  .btn-primary--white:hover .btn-primary__icon:before {
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgNCA2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMSAxTDMuMDU3MTQgMy4wNTcxNEwxIDUuMTE0MjkiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS1maWxsPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K);
+    background-position: 50%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-color: hsla(0,0%,100%,0);
+  }
+}
+
+.btn-primary--light {
+  background-color: #f0f5fc;
+  box-shadow: none;
+}
+
+.btn-primary--light:before {
+  background: #c1cede;
+}
+
+.btn-primary--light .btn-primary__text {
+  color: #0032a0;
+  transition: color .3s ease-in-out;
+}
+
+.btn-primary--light .btn-primary__icon {
+  background-color: #0032a0;
+  background-color: var(--text-color--primary, #0032a0);
+}
+
+.btn-primary--light .btn-primary__icon:after,
+.btn-primary--light .btn-primary__icon:before {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNiA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC4yMzUxOTYgNy42MjA3OUwzLjM2MDE4IDQuNDk1OEwwLjIzNTE5NiAxLjM3MDgyQzAuMTYwNjMgMS4yOTYyNSAwLjEwMTQ4MSAxLjIwNzczIDAuMDYxMTI1OSAxLjExMDMxQzAuMDIwNzcxIDEuMDEyODggMS41NzEzN2UtMDkgMC45MDg0NiAwIDAuODAzMDA4Qy0xLjU3MTM2ZS0wOSAwLjY5NzU1NSAwLjAyMDc3MSAwLjU5MzEzNSAwLjA2MTEyNTkgMC40OTU3MUMwLjEwMTQ4MSAwLjM5ODI4NSAwLjE2MDYzIDAuMzA5NzYyIDAuMjM1MTk2IDAuMjM1MTk1QzAuMzA5NzYyIDAuMTYwNjI5IDAuMzk4Mjg1IDAuMTAxNDggMC40OTU3MSAwLjA2MTEyNTFDMC41OTMxMzYgMC4wMjA3NzAyIDAuNjk3NTU2IC0xLjU3MTM3ZS0wOSAwLjgwMzAwOCAwQzAuOTA4NDYxIDEuNTcxMzdlLTA5IDEuMDEyODggMC4wMjA3NzAyIDEuMTEwMzEgMC4wNjExMjUxQzEuMjA3NzMgMC4xMDE0OCAxLjI5NjI1IDAuMTYwNjI5IDEuMzcwODIgMC4yMzUxOTVMNS4wNjc2NCAzLjkzMjAyQzUuMzgxNzUgNC4yNDYxMyA1LjM4MTc1IDQuNzUzNTMgNS4wNjc2NCA1LjA2NzY0TDEuMzcwODIgOC43NjQ0NkMxLjI5NjMxIDguODM5MTMgMS4yMDc4IDguODk4MzYgMS4xMTAzNyA4LjkzODc4QzEuMDEyOTQgOC45NzkyIDAuOTA4NDkxIDkgMC44MDMwMDggOUMwLjY5NzUyNSA5IDAuNTkzMDc4IDguOTc5MiAwLjQ5NTY0NSA4LjkzODc4QzAuMzk4MjEyIDguODk4MzYgMC4zMDk3MDcgOC44MzkxMyAwLjIzNTE5NiA4Ljc2NDQ2Qy0wLjA3MDg1OTEgOC40NTAzNSAtMC4wNzg5MTMyIDcuOTM0ODkgMC4yMzUxOTYgNy42MjA3OVoiIGZpbGw9IiNGMEY1RkMiLz4KPC9zdmc+Cg==);
+  background-position: 50%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-color: hsla(0,0%,100%,0);
+}
+
+@media (max-width: 767.98px) {
+  .btn-primary--light .btn-primary__icon:after,
+  .btn-primary--light .btn-primary__icon:before {
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgNCA2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMSAxTDMuMDU3MTQgMy4wNTcxNEwxIDUuMTE0MjkiIHN0cm9rZT0iI0YwRjVGQyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K);
+    background-position: 50%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-color: hsla(0,0%,100%,0);
+  }
+}
+
+.btn-primary--light:active .btn-primary__icon:after,
+.btn-primary--light:active .btn-primary__icon:before,
+.btn-primary--light:hover .btn-primary__icon:after,
+.btn-primary--light:hover .btn-primary__icon:before {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNiA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC4yMzUxOTYgNy42MjA3OUwzLjM2MDE4IDQuNDk1OEwwLjIzNTE5NiAxLjM3MDgyQzAuMTYwNjMgMS4yOTYyNSAwLjEwMTQ4MSAxLjIwNzczIDAuMDYxMTI1OSAxLjExMDMxQzAuMDIwNzcxIDEuMDEyODggMS41NzEzN2UtMDkgMC45MDg0NiAwIDAuODAzMDA4Qy0xLjU3MTM2ZS0wOSAwLjY5NzU1NSAwLjAyMDc3MSAwLjU5MzEzNSAwLjA2MTEyNTkgMC40OTU3MUMwLjEwMTQ4MSAwLjM5ODI4NSAwLjE2MDYzIDAuMzA5NzYyIDAuMjM1MTk2IDAuMjM1MTk1QzAuMzA5NzYyIDAuMTYwNjI5IDAuMzk4Mjg1IDAuMTAxNDggMC40OTU3MSAwLjA2MTEyNTFDMC41OTMxMzYgMC4wMjA3NzAyIDAuNjk3NTU2IC0xLjU3MTM3ZS0wOSAwLjgwMzAwOCAwQzAuOTA4NDYxIDEuNTcxMzdlLTA5IDEuMDEyODggMC4wMjA3NzAyIDEuMTEwMzEgMC4wNjExMjUxQzEuMjA3NzMgMC4xMDE0OCAxLjI5NjI1IDAuMTYwNjI5IDEuMzcwODIgMC4yMzUxOTVMNS4wNjc2NCAzLjkzMjAyQzUuMzgxNzUgNC4yNDYxMyA1LjM4MTc1IDQuNzUzNTMgNS4wNjc2NCA1LjA2NzY0TDEuMzcwODIgOC43NjQ0NkMxLjI5NjMxIDguODM5MTMgMS4yMDc4IDguODk4MzYgMS4xMTAzNyA4LjkzODc4QzEuMDEyOTQgOC45NzkyIDAuOTA4NDkxIDkgMC44MDMwMDggOUMwLjY5NzUyNSA5IDAuNTkzMDc4IDguOTc5MiAwLjQ5NTY0NSA4LjkzODc4QzAuMzk4MjEyIDguODk4MzYgMC4zMDk3MDcgOC44MzkxMyAwLjIzNTE5NiA4Ljc2NDQ2Qy0wLjA3MDg1OTEgOC40NTAzNSAtMC4wNzg5MTMyIDcuOTM0ODkgMC4yMzUxOTYgNy42MjA3OVoiIGZpbGw9IiNGMEY1RkMiLz4KPC9zdmc+Cg==);
+  background-position: 50%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-color: hsla(0,0%,100%,0);
+}
+
+@media (max-width: 767.98px) {
+  .btn-primary--light:active .btn-primary__icon:after,
+  .btn-primary--light:active .btn-primary__icon:before,
+  .btn-primary--light:hover .btn-primary__icon:after,
+  .btn-primary--light:hover .btn-primary__icon:before {
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgNCA2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMSAxTDMuMDU3MTQgMy4wNTcxNEwxIDUuMTE0MjkiIHN0cm9rZT0iI0YwRjVGQyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K);
+    background-position: 50%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-color: hsla(0,0%,100%,0);
+  }
+}
+
+.btn-primary--blue {
+  background-color: #001e60;
+  background-color: var(--text-color--secondary, #001e60);
+  box-shadow: none;
+}
+
+.btn-primary--blue:before {
+  background: #0032a0;
+  background: var(--text-color--primary, #0032a0);
+}
+
+.btn-primary--blue .btn-primary__text {
+  color: #fff;
+  transition: color .3s ease-in-out;
+}
+
+.btn-primary--blue .btn-primary__icon {
+  background-color: #fff;
+}
+
+.btn-primary--blue .btn-primary__icon:after,
+.btn-primary--blue .btn-primary__icon:before {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNiA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC4yMzUxOTYgNy42MjA3OUwzLjM2MDE4IDQuNDk1OEwwLjIzNTE5NiAxLjM3MDgyQzAuMTYwNjMgMS4yOTYyNSAwLjEwMTQ4MSAxLjIwNzczIDAuMDYxMTI1OSAxLjExMDMxQzAuMDIwNzcxIDEuMDEyODggMS41NzEzN2UtMDkgMC45MDg0NiAwIDAuODAzMDA4Qy0xLjU3MTM2ZS0wOSAwLjY5NzU1NSAwLjAyMDc3MSAwLjU5MzEzNSAwLjA2MTEyNTkgMC40OTU3MUMwLjEwMTQ4MSAwLjM5ODI4NSAwLjE2MDYzIDAuMzA5NzYyIDAuMjM1MTk2IDAuMjM1MTk1QzAuMzA5NzYyIDAuMTYwNjI5IDAuMzk4Mjg1IDAuMTAxNDggMC40OTU3MSAwLjA2MTEyNTFDMC41OTMxMzYgMC4wMjA3NzAyIDAuNjk3NTU2IC0xLjU3MTM3ZS0wOSAwLjgwMzAwOCAwQzAuOTA4NDYxIDEuNTcxMzdlLTA5IDEuMDEyODggMC4wMjA3NzAyIDEuMTEwMzEgMC4wNjExMjUxQzEuMjA3NzMgMC4xMDE0OCAxLjI5NjI1IDAuMTYwNjI5IDEuMzcwODIgMC4yMzUxOTVMNS4wNjc2NCAzLjkzMjAyQzUuMzgxNzUgNC4yNDYxMyA1LjM4MTc1IDQuNzUzNTMgNS4wNjc2NCA1LjA2NzY0TDEuMzcwODIgOC43NjQ0NkMxLjI5NjMxIDguODM5MTMgMS4yMDc4IDguODk4MzYgMS4xMTAzNyA4LjkzODc4QzEuMDEyOTQgOC45NzkyIDAuOTA4NDkxIDkgMC44MDMwMDggOUMwLjY5NzUyNSA5IDAuNTkzMDc4IDguOTc5MiAwLjQ5NTY0NSA4LjkzODc4QzAuMzk4MjEyIDguODk4MzYgMC4zMDk3MDcgOC44MzkxMyAwLjIzNTE5NiA4Ljc2NDQ2Qy0wLjA3MDg1OTEgOC40NTAzNSAtMC4wNzg5MTMyIDcuOTM0ODkgMC4yMzUxOTYgNy42MjA3OVoiIGZpbGw9IiMwMDFFNjAiLz4KPC9zdmc+Cgo=);
+  background-position: 50%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-color: hsla(0,0%,100%,0);
+}
+
+@media (max-width: 767.98px) {
+  .btn-primary--blue .btn-primary__icon:after,
+  .btn-primary--blue .btn-primary__icon:before {
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgNCA2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMSAxTDMuMDU3MTQgMy4wNTcxNEwxIDUuMTE0MjkiIHN0cm9rZT0iIzAwMUU2MCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K);
+    background-position: 50%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-color: hsla(0,0%,100%,0);
+  }
+}
+
+.btn-primary--blue:active .btn-primary__icon:after,
+.btn-primary--blue:active .btn-primary__icon:before,
+.btn-primary--blue:hover .btn-primary__icon:after,
+.btn-primary--blue:hover .btn-primary__icon:before {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNiA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC4yMzUxOTYgNy42MjA3OUwzLjM2MDE4IDQuNDk1OEwwLjIzNTE5NiAxLjM3MDgyQzAuMTYwNjMgMS4yOTYyNSAwLjEwMTQ4MSAxLjIwNzczIDAuMDYxMTI1OSAxLjExMDMxQzAuMDIwNzcxIDEuMDEyODggMS41NzEzN2UtMDkgMC45MDg0NiAwIDAuODAzMDA4Qy0xLjU3MTM2ZS0wOSAwLjY5NzU1NSAwLjAyMDc3MSAwLjU5MzEzNSAwLjA2MTEyNTkgMC40OTU3MUMwLjEwMTQ4MSAwLjM5ODI4NSAwLjE2MDYzIDAuMzA5NzYyIDAuMjM1MTk2IDAuMjM1MTk1QzAuMzA5NzYyIDAuMTYwNjI5IDAuMzk4Mjg1IDAuMTAxNDggMC40OTU3MSAwLjA2MTEyNTFDMC41OTMxMzYgMC4wMjA3NzAyIDAuNjk3NTU2IC0xLjU3MTM3ZS0wOSAwLjgwMzAwOCAwQzAuOTA4NDYxIDEuNTcxMzdlLTA5IDEuMDEyODggMC4wMjA3NzAyIDEuMTEwMzEgMC4wNjExMjUxQzEuMjA3NzMgMC4xMDE0OCAxLjI5NjI1IDAuMTYwNjI5IDEuMzcwODIgMC4yMzUxOTVMNS4wNjc2NCAzLjkzMjAyQzUuMzgxNzUgNC4yNDYxMyA1LjM4MTc1IDQuNzUzNTMgNS4wNjc2NCA1LjA2NzY0TDEuMzcwODIgOC43NjQ0NkMxLjI5NjMxIDguODM5MTMgMS4yMDc4IDguODk4MzYgMS4xMTAzNyA4LjkzODc4QzEuMDEyOTQgOC45NzkyIDAuOTA4NDkxIDkgMC44MDMwMDggOUMwLjY5NzUyNSA5IDAuNTkzMDc4IDguOTc5MiAwLjQ5NTY0NSA4LjkzODc4QzAuMzk4MjEyIDguODk4MzYgMC4zMDk3MDcgOC44MzkxMyAwLjIzNTE5NiA4Ljc2NDQ2Qy0wLjA3MDg1OTEgOC40NTAzNSAtMC4wNzg5MTMyIDcuOTM0ODkgMC4yMzUxOTYgNy42MjA3OVoiIGZpbGw9IiMwMDFFNjAiLz4KPC9zdmc+Cgo=);
+  background-position: 50%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-color: hsla(0,0%,100%,0);
+}
+
+@media (max-width: 767.98px) {
+  .btn-primary--blue:active .btn-primary__icon:after,
+  .btn-primary--blue:active .btn-primary__icon:before,
+  .btn-primary--blue:hover .btn-primary__icon:after,
+  .btn-primary--blue:hover .btn-primary__icon:before {
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgNCA2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMSAxTDMuMDU3MTQgMy4wNTcxNEwxIDUuMTE0MjkiIHN0cm9rZT0iIzAwMUU2MCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K);
+    background-position: 50%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-color: hsla(0,0%,100%,0);
+  }
+}
+</style>