@sunrise-upc/sales-static-components 3.8.1 → 3.8.3

package/dist/cjs/components/RibbonComponent/RibbonComponent.css

@@ -1,390 +1,390 @@
-.ribbonComponent_Wrapper{
-  width: 100%;
-}
-.ribbonComponent_Card {
-  display: flex;
-  align-items: center;
-  padding:16px 0;
-}
-.ribbonComponent_DarkText{
-  color: #ffffff !important;
-}
-.ribbonComponent_DarkDescription a {
-color: #ffffff;
-}
-.ribbonComponent_Image {
-  margin-top: 5px;
-  margin-right: 8px;
-}
-.ribbonComponent_Icon {
-  height: 24px;
-  width: 24px;
-}
-.ribbonComponent_TextContainer {
-  margin: 8px 0;
-  font-size: 16px;
-  line-height: 24px;
-}
-.ribbonComponent_Title {
-  font-weight: 700;
-}
-.ribbonComponent_Description {
-  font-weight: 400;
-}
-.ribbonComponent_CloseIcon {
-  margin-right: 16px;
-}
-.ribbonComponent_HrBreaker {
-  width: 1px;
-  height: 32px;
-  margin-left: 8px;
-  margin-right: 8px;
-  border-radius: 1px;
-  opacity: 0.2;
-  flex-shrink: 0;
-  background: #3D3935;
-}
-.ribbonComponent_OnlyTimer{
-  width:30px;
-}
-.ribbonComponent_Button{
-  text-wrap:nowrap;
-}
-.falcon-button-defaults {
-  border-radius: 28px;
-  cursor: pointer;
-  display: inline-block;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 700;
-  padding: 10px 24px;
-  text-decoration: none;
-}
-.ribbonComponent_phoneIcon {
-  background-size: contain;
-  display: inline-flex;
-  height: 19px;
-  margin: 0 8px 0 10px;
-  width: 19px;
-
-  &.beforeIcon {
-    margin: 0 8px 0 0;
-  }
-  &.afterIcon {
-    margin: 0 0 0 8px;
-  }
-
-}
-
-.ribbonComponent_ButtonSection {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-}
-.ribbonComponent_descriptionBlockSection {
-  display: flex;
-}
-/* Mobile only viewport */
-@media all and (max-width: 767px) {
-  .falcon-primary-button-v1-JC:visited {
-    background-color: #e97f77;
-  }
-  .ribbonComponent_Card {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    margin-left: 16px;
-  }
-  .ribbonComponent_CloseIcon1{
-    margin-right: 0;
-    position: absolute;
-    right: 16px;
-    margin-top: 16px;
-  }
-  .ribbonComponent_ButtonSection {
-    display: flex;
-    align-items: flex-start;
-    flex-direction: column;
-    padding-bottom: 16px;
-    padding-top: 8px;
-    margin-left: 32px;
-  }
-  .ribbonComponent_descriptionBlockSection {
-    padding-top:16px;
-    padding-right: 78px;
-    margin-left: 16px;
-  }
-  .ribbonComponent_Timer{
-    margin-left: 8px;
-    padding-bottom: 8px;
-  }
-  .ribbonComponent_Button{
-    margin-left: 8px;
-  }
-  .ribbonComponent_CloseIcon{
-    display: none;
-  }
-}
-/* Mobile and tablet viewport */
-@media all and (max-width: 1023px) {
-  .ribbonComponent_HrBreaker {
-    display: none;
-  }
-  .ribbonComponent_Button {
-    padding-bottom: 16px;
-  }
-}
-
-/* Tablet only viewport */
-@media all and (min-width: 768px) and (max-width: 1023px) {
-  .ribbonComponent_Card{
-    justify-content: space-between;
-  }
-  .ribbonComponent_ButtonSection {
-    display: flex;
-    flex-direction: column;
-    padding-right: 90px;
-    padding-left:70px;
-    margin: 6px 0 0 0;
-    align-items: flex-end;
-  }
-  .ribbonComponent_Button{
-    margin: 8px 0;
-  }
-  .ribbonComponent_CloseIcon{
-    display: none;
-  }
-  .ribbonComponent_CloseIcon1{
-    margin-right: 0;
-    position: absolute;
-    right: 40px;
-    padding-left: 16px;
-  }
-  .ribbonComponent_descriptionBlockSection{
-    margin-left:40px;
-  }
-}
-
-/* Desktop only viewport */
-@media (min-width: 1024px) {
-  .ribbonComponent_Card{
-    justify-content: space-between;
-    margin-left:0;
-  }
-  .ribbonComponent_Button{
-    margin: 0 16px;
-    text-wrap:nowrap;
-  }
-  .ribbonComponent_descriptionBlockSection{
-    margin:0 42px;
-  }
-  .ribbonComponent_ButtonSection{
-    padding-left: 60px;
-  }
-  .ribbonComponent_CloseIcon{
-    margin-right: 42px;
-  }
-  .ribbonComponent_CloseIcon1{
-    display: none;
-  }
-}
-@media (min-width: 1440px){
-  .ribbonComponent_Card{
-    max-width: 1440px;
-    margin: auto;
-  }
-  .ribbonComponent_descriptionBlockSection{
-    margin:0 72px;
-  }
-  .ribbonComponent_CloseIcon{
-    margin-right: 72px;
-  }
-  .ribbonComponent_ButtonSection{
-    padding-left: 80px;
-  }
-  .ribbonComponent_OnlyTimer{
-    width:60px;
-  }  
-}
-
-.falcon-primary-button-v1 > .falcon-button-defaults {
-  background-color: #da291c;
-  color: #ffffff;
-}
-.falcon-primary-button-v1:hover {
-  background-color: #961c13;
-}
-.falcon-primary-button-v1:visited {
-  background-color: #c7355f;
-}
-.falcon-primary-button-v1:disabled {
-  background-color: #e6e3df;
-  color: #b3aeaa;
-  cursor: default;
-}
-
-.falcon-primary-button-v1-JC > .falcon-button-defaults {
-  background-color: #ffffff;
-  color: #da291c;
-}
-.falcon-primary-button-v1-JC:hover {
-  background-color: #e97f77;
-  color: #ffffff;
-}
-.falcon-primary-button-v1-JC:visited {
-  background-color: #961c13;
-  color: #ffffff;
-}
-.falcon-primary-button-v1-JC:disabled {
-  background-color: #e6e3df;
-  color: #b3aeaa;
-  cursor: default;
-}
-.falcon-secondary-button-v1 > .falcon-button-defaults {
-  background-color: transparent;
-  border: 2px solid #da291c;
-  color: #da291c;
-}
-.falcon-secondary-button-v1:hover {
-  border-color: #961c13;
-  color: #961c13;
-}
-.falcon-secondary-button-v1:visited {
-  border-color: #c7355f;
-  color: #c7355f;
-}
-.falcon-secondary-button-v1:disabled {
-  border-color: #e6e3df;
-  color: #b3aeaa;
-}
-
-.falcon-secondary-button-v1-JC > .falcon-button-defaults {
-  background-color: transparent;
-  border: 2px solid #da291c;
-  color: #ffffff;
-}
-.falcon-secondary-button-v1-JC:hover {
-  border-color: #f1571d;
-}
-.falcon-secondary-button-v1-JC:visited {
-  border-color: #c7355f;
-}
-.falcon-secondary-button-v1-JC:disabled {
-  border-color: #e6e3df;
-  color: #b3aeaa;
-}
-.falcon-secondary-button-v4 > .falcon-button-defaults {
-  background-color: transparent;
-  padding-left: 0;
-  padding-right: 0;
-  color: #da291c;
-}
-.falcon-secondary-button-v4:hover {
-  border-color: #961c13;
-  color: #961c13;
-}
-.falcon-secondary-button-v4:visited {
-  border-color: #c7355f;
-  color: #c7355f;
-}
-.falcon-secondary-button-v4:disabled {
-  border-color: #e6e3df;
-  color: #b3aeaa;
-}
-
-.falcon-secondary-button-v4-JC > .falcon-button-defaults {
-  background-color: transparent;
-  padding: 0;
-  color: #ffffff;
-}
-.falcon-secondary-button-v4-JC:hover {
-  border-color: #c7355f;
-  color: #c7355f;
-}
-.falcon-secondary-button-v4-JC:visited {
-  border-color: #961c13;
-  color: #961c13;
-}
-.falcon-secondary-button-v4-JC:disabled {
-  border-color: #e6e3df;
-  color: #b3aeaa;
-}
-
-.falcon-secondary-button-v5 > .falcon-button-defaults {
-  background-color: transparent;
-  padding: 0;
-  color: #3d3935;
-  font-weight: 400;
-}
-.falcon-secondary-button-v5 > div {
-  text-decoration-line: underline;
-}
-
-.falcon-secondary-button-dark > .falcon-button-defaults {
-  background-color: transparent;
-  color: #3d3935;
-  border: 2px solid #3d3935;
-}
-.falcon-primary-dark-button {
-  background: #5f5955;
-  padding: 10px 24px;
-  box-shadow: 0px 2px 4px rgba(87, 84, 82, 0.2);
-  border-radius: 28px 0px 0px 28px;
-}
-.falcon-primary-dark-button:hover {
-  background: #86807c;
-  box-shadow: 0px 2px 4px rgba(87, 84, 82, 0.2);
-}
-.falcon-primary-dark-button:visited {
-  background: #86807c;
-  box-sizing: border-box;
-  box-shadow: 0px 2px 4px rgba(87, 84, 82, 0.2);
-  padding: 8px 22px;
-  border: 2px solid #5f5955;
-}
-
-
-.falcon-primary-dark-v2-button {
-  background: #000000;
-  padding: 14px 24px;
-  font-weight: 700;
-  border-radius: 28px;
-  color: #ffffff;
-
-  @media (max-width: 767px) {
-    padding: 10px 24px;
-  }
-
-}
-.falcon-primary-dark-v2-button:hover {
-  background: #1a1a1a;
-}
-.falcon-primary-dark-v2-button:visited {
-  background: #1a1a1a;
-  box-sizing: border-box;
-}
-
-.falcon-primary-white-v1-button {
-  background: #ffffff;
-  padding: 14px 24px;
-  font-weight: 700;
-  border-radius: 28px;
-  color: #000000;
-
-  @media (max-width: 767px) {
-    padding: 10px 24px;
-  }
- 
-}
-.falcon-primary-white-v1-button:hover {
-  background: #eeeeee;
-}
-.falcon-primary-white-v1-button:visited {
-  background: #eeeeee;
-  box-sizing: border-box;
-}
-.falcon-primary-white-v1-button:disabled {
-  background-color: #e6e3df;
-  color: #b3aeaa;
-  cursor: default;
+.ribbonComponent_Wrapper{
+  width: 100%;
+}
+.ribbonComponent_Card {
+  display: flex;
+  align-items: center;
+  padding:16px 0;
+}
+.ribbonComponent_DarkText{
+  color: #ffffff !important;
+}
+.ribbonComponent_DarkDescription a {
+color: #ffffff;
+}
+.ribbonComponent_Image {
+  margin-top: 5px;
+  margin-right: 8px;
+}
+.ribbonComponent_Icon {
+  height: 24px;
+  width: 24px;
+}
+.ribbonComponent_TextContainer {
+  margin: 8px 0;
+  font-size: 16px;
+  line-height: 24px;
+}
+.ribbonComponent_Title {
+  font-weight: 700;
+}
+.ribbonComponent_Description {
+  font-weight: 400;
+}
+.ribbonComponent_CloseIcon {
+  margin-right: 16px;
+}
+.ribbonComponent_HrBreaker {
+  width: 1px;
+  height: 32px;
+  margin-left: 8px;
+  margin-right: 8px;
+  border-radius: 1px;
+  opacity: 0.2;
+  flex-shrink: 0;
+  background: #3D3935;
+}
+.ribbonComponent_OnlyTimer{
+  width:30px;
+}
+.ribbonComponent_Button{
+  text-wrap:nowrap;
+}
+.falcon-button-defaults {
+  border-radius: 28px;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 700;
+  padding: 10px 24px;
+  text-decoration: none;
+}
+.ribbonComponent_phoneIcon {
+  background-size: contain;
+  display: inline-flex;
+  height: 19px;
+  margin: 0 8px 0 10px;
+  width: 19px;
+
+  &.beforeIcon {
+    margin: 0 8px 0 0;
+  }
+  &.afterIcon {
+    margin: 0 0 0 8px;
+  }
+
+}
+
+.ribbonComponent_ButtonSection {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.ribbonComponent_descriptionBlockSection {
+  display: flex;
+}
+/* Mobile only viewport */
+@media all and (max-width: 767px) {
+  .falcon-primary-button-v1-JC:visited {
+    background-color: #e97f77;
+  }
+  .ribbonComponent_Card {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-left: 16px;
+  }
+  .ribbonComponent_CloseIcon1{
+    margin-right: 0;
+    position: absolute;
+    right: 16px;
+    margin-top: 16px;
+  }
+  .ribbonComponent_ButtonSection {
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    padding-bottom: 16px;
+    padding-top: 8px;
+    margin-left: 32px;
+  }
+  .ribbonComponent_descriptionBlockSection {
+    padding-top:16px;
+    padding-right: 78px;
+    margin-left: 16px;
+  }
+  .ribbonComponent_Timer{
+    margin-left: 8px;
+    padding-bottom: 8px;
+  }
+  .ribbonComponent_Button{
+    margin-left: 8px;
+  }
+  .ribbonComponent_CloseIcon{
+    display: none;
+  }
+}
+/* Mobile and tablet viewport */
+@media all and (max-width: 1023px) {
+  .ribbonComponent_HrBreaker {
+    display: none;
+  }
+  .ribbonComponent_Button {
+    padding-bottom: 16px;
+  }
+}
+
+/* Tablet only viewport */
+@media all and (min-width: 768px) and (max-width: 1023px) {
+  .ribbonComponent_Card{
+    justify-content: space-between;
+  }
+  .ribbonComponent_ButtonSection {
+    display: flex;
+    flex-direction: column;
+    padding-right: 90px;
+    padding-left:70px;
+    margin: 6px 0 0 0;
+    align-items: flex-end;
+  }
+  .ribbonComponent_Button{
+    margin: 8px 0;
+  }
+  .ribbonComponent_CloseIcon{
+    display: none;
+  }
+  .ribbonComponent_CloseIcon1{
+    margin-right: 0;
+    position: absolute;
+    right: 40px;
+    padding-left: 16px;
+  }
+  .ribbonComponent_descriptionBlockSection{
+    margin-left:40px;
+  }
+}
+
+/* Desktop only viewport */
+@media (min-width: 1024px) {
+  .ribbonComponent_Card{
+    justify-content: space-between;
+    margin-left:0;
+  }
+  .ribbonComponent_Button{
+    margin: 0 16px;
+    text-wrap:nowrap;
+  }
+  .ribbonComponent_descriptionBlockSection{
+    margin:0 42px;
+  }
+  .ribbonComponent_ButtonSection{
+    padding-left: 60px;
+  }
+  .ribbonComponent_CloseIcon{
+    margin-right: 42px;
+  }
+  .ribbonComponent_CloseIcon1{
+    display: none;
+  }
+}
+@media (min-width: 1440px){
+  .ribbonComponent_Card{
+    max-width: 1440px;
+    margin: auto;
+  }
+  .ribbonComponent_descriptionBlockSection{
+    margin:0 72px;
+  }
+  .ribbonComponent_CloseIcon{
+    margin-right: 72px;
+  }
+  .ribbonComponent_ButtonSection{
+    padding-left: 80px;
+  }
+  .ribbonComponent_OnlyTimer{
+    width:60px;
+  }  
+}
+
+.falcon-primary-button-v1 > .falcon-button-defaults {
+  background-color: #da291c;
+  color: #ffffff;
+}
+.falcon-primary-button-v1:hover {
+  background-color: #961c13;
+}
+.falcon-primary-button-v1:visited {
+  background-color: #c7355f;
+}
+.falcon-primary-button-v1:disabled {
+  background-color: #e6e3df;
+  color: #b3aeaa;
+  cursor: default;
+}
+
+.falcon-primary-button-v1-JC > .falcon-button-defaults {
+  background-color: #ffffff;
+  color: #da291c;
+}
+.falcon-primary-button-v1-JC:hover {
+  background-color: #e97f77;
+  color: #ffffff;
+}
+.falcon-primary-button-v1-JC:visited {
+  background-color: #961c13;
+  color: #ffffff;
+}
+.falcon-primary-button-v1-JC:disabled {
+  background-color: #e6e3df;
+  color: #b3aeaa;
+  cursor: default;
+}
+.falcon-secondary-button-v1 > .falcon-button-defaults {
+  background-color: transparent;
+  border: 2px solid #da291c;
+  color: #da291c;
+}
+.falcon-secondary-button-v1:hover {
+  border-color: #961c13;
+  color: #961c13;
+}
+.falcon-secondary-button-v1:visited {
+  border-color: #c7355f;
+  color: #c7355f;
+}
+.falcon-secondary-button-v1:disabled {
+  border-color: #e6e3df;
+  color: #b3aeaa;
+}
+
+.falcon-secondary-button-v1-JC > .falcon-button-defaults {
+  background-color: transparent;
+  border: 2px solid #da291c;
+  color: #ffffff;
+}
+.falcon-secondary-button-v1-JC:hover {
+  border-color: #f1571d;
+}
+.falcon-secondary-button-v1-JC:visited {
+  border-color: #c7355f;
+}
+.falcon-secondary-button-v1-JC:disabled {
+  border-color: #e6e3df;
+  color: #b3aeaa;
+}
+.falcon-secondary-button-v4 > .falcon-button-defaults {
+  background-color: transparent;
+  padding-left: 0;
+  padding-right: 0;
+  color: #da291c;
+}
+.falcon-secondary-button-v4:hover {
+  border-color: #961c13;
+  color: #961c13;
+}
+.falcon-secondary-button-v4:visited {
+  border-color: #c7355f;
+  color: #c7355f;
+}
+.falcon-secondary-button-v4:disabled {
+  border-color: #e6e3df;
+  color: #b3aeaa;
+}
+
+.falcon-secondary-button-v4-JC > .falcon-button-defaults {
+  background-color: transparent;
+  padding: 0;
+  color: #ffffff;
+}
+.falcon-secondary-button-v4-JC:hover {
+  border-color: #c7355f;
+  color: #c7355f;
+}
+.falcon-secondary-button-v4-JC:visited {
+  border-color: #961c13;
+  color: #961c13;
+}
+.falcon-secondary-button-v4-JC:disabled {
+  border-color: #e6e3df;
+  color: #b3aeaa;
+}
+
+.falcon-secondary-button-v5 > .falcon-button-defaults {
+  background-color: transparent;
+  padding: 0;
+  color: #3d3935;
+  font-weight: 400;
+}
+.falcon-secondary-button-v5 > div {
+  text-decoration-line: underline;
+}
+
+.falcon-secondary-button-dark > .falcon-button-defaults {
+  background-color: transparent;
+  color: #3d3935;
+  border: 2px solid #3d3935;
+}
+.falcon-primary-dark-button {
+  background: #5f5955;
+  padding: 10px 24px;
+  box-shadow: 0px 2px 4px rgba(87, 84, 82, 0.2);
+  border-radius: 28px 0px 0px 28px;
+}
+.falcon-primary-dark-button:hover {
+  background: #86807c;
+  box-shadow: 0px 2px 4px rgba(87, 84, 82, 0.2);
+}
+.falcon-primary-dark-button:visited {
+  background: #86807c;
+  box-sizing: border-box;
+  box-shadow: 0px 2px 4px rgba(87, 84, 82, 0.2);
+  padding: 8px 22px;
+  border: 2px solid #5f5955;
+}
+
+
+.falcon-primary-dark-v2-button {
+  background: #000000;
+  padding: 14px 24px;
+  font-weight: 700;
+  border-radius: 28px;
+  color: #ffffff;
+
+  @media (max-width: 767px) {
+    padding: 10px 24px;
+  }
+
+}
+.falcon-primary-dark-v2-button:hover {
+  background: #1a1a1a;
+}
+.falcon-primary-dark-v2-button:visited {
+  background: #1a1a1a;
+  box-sizing: border-box;
+}
+
+.falcon-primary-white-v1-button {
+  background: #ffffff;
+  padding: 14px 24px;
+  font-weight: 700;
+  border-radius: 28px;
+  color: #000000;
+
+  @media (max-width: 767px) {
+    padding: 10px 24px;
+  }
+ 
+}
+.falcon-primary-white-v1-button:hover {
+  background: #eeeeee;
+}
+.falcon-primary-white-v1-button:visited {
+  background: #eeeeee;
+  box-sizing: border-box;
+}
+.falcon-primary-white-v1-button:disabled {
+  background-color: #e6e3df;
+  color: #b3aeaa;
+  cursor: default;
 }