@dvrd/dvr-controls 1.0.14 → 1.0.16

package/src/style/common-variables.scss

@@ -0,0 +1,243 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+/**
+Contains common application stuff.
+It should contain all common colors used in the application.
+Specific colors that is only used once or in a component, should be contained in the css of that compponent.
+ */
+$color-blue-1: #009fe3;
+$color-blue-1-hover: darken($color-blue-1, 10%);
+$color-blue-1-darken: darken($color-blue-1, 10%);
+$color-blue-2: #008dca;
+$color-blue-3: #575757;
+$color-blue-4: #DEEAF6;
+$color-blue-5: #3687bc;
+$color-blue-6: #779bbc;
+$color-blue-text: #2A435F;
+$color-blue-facebook: #4267B2;
+$color-gray-1: #f8f8f8;
+$color-gray-2: gray;
+$color-gray-3: lighten(gray, 10%);
+$color-gray-4: #ccc;
+$color-gray-5: #434b50;
+$color-gray-6: #F2F2F2;
+$color-gray-7: #e4e4e4;
+$color-gray-header: #3a4044;
+$color-gray-header-text: #d8d8d8;
+$color-orange-1: #f39320;
+$color-orange-2: #b05a20;
+$color-orange-1-hover: rgba(243, 147, 32, .8);
+$color-yellow-1: #fff000;
+$color-green-1: #18A155;
+$color-green-2: rgb(234, 254, 234);
+$color-green-3: #edf1f2;
+$color-green-4: #94FB82;
+$color-green-5: #E2EFDA;
+$color-green-whatsapp: #29A71A;
+$color-green-platform: #99cb00;
+$color-pink-1: #fbe1d5;
+$color-pink-1-hover: rgba(251, 225, 213, .6);
+$color-red: red;
+$color-red-secondary: #ffcfd0;
+$color-red-1: #ff7e78;
+$color-red-2: #FDD4CC;
+$color-red-regio: #ca031a;
+
+$color-text-dark: #333;
+
+$z-index-normal: 100;
+$z-index-high: 200;
+$z-index-popup-1: 1000;
+$z-index-popup-2: 1100;
+$z-index-popup-3: 1200;
+$z-index-popup-4: 1300;
+$z-index-dialog: 1400;
+$z-index-menu: 1350;
+
+$border-radius-popup: 1.5rem;
+
+@mixin hoverTransition($backgroundColor: $color-blue-1, $color: white, $hoverBackgroundColor: $color-blue-1-hover,
+$hoverColor: white, $duration: .2s) {
+  background-color: $backgroundColor;
+  color: $color;
+  transition: background-color $duration ease, color $duration ease;
+  &:hover {
+    background-color: $hoverBackgroundColor;
+    color: $hoverColor;
+  }
+}
+
+@mixin hasDisabled() {
+  &:disabled {
+    background-color: $color-gray-3 !important;
+    user-select: none !important;
+    cursor: default !important;
+  }
+}
+
+@mixin headerBackgroundColor() {
+  background-color: $color-blue-1;
+}
+
+@mixin blueBackgroundColor() {
+  background-color: $color-blue-1;
+}
+
+@mixin primaryBackgroundColor() {
+  background-color: $color-gray-7;
+}
+
+@mixin activeBackgroundColor() {
+  background-color: $color-pink-1;
+}
+
+@mixin hoverBackgroundColor() {
+  background-color: $color-green-2;
+}
+
+@mixin linkFontColorBlue() {
+  color: $color-blue-1;
+}
+
+@mixin s-borderRadius() {
+  border-radius: .25rem;
+}
+
+@mixin borderRadius($customRadius: .3125rem) {
+  border-radius: $customRadius;
+}
+
+@mixin l-borderRadius() {
+  border-radius: .5rem;
+}
+
+@mixin box-shadow($shadow-radius, $shadow-opacity, $red: 0, $green: 0, $blue: 0) {
+  box-shadow: 0 0 $shadow-radius 0 rgba($red, $green, $blue, $shadow-opacity);
+}
+
+@mixin boxShadow($shadow-radius: .5rem, $shadow-opacity: .2) {
+  @include box-shadow($shadow-radius, $shadow-opacity);
+}
+
+//Current platform Label-A shadow. Light shadow bottom/right
+@mixin boxShadow2() {
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .2);
+}
+
+@mixin boxShadow3() {
+  box-shadow: 0 .375rem .75rem rgba(0, 0, 0, .175);
+}
+
+@mixin transform($translateX, $translateY) {
+  transform: translateX($translateX) translateY($translateY);
+}
+
+@mixin transformY($translateY) {
+  transform: translateY($translateY);
+}
+
+@mixin transformX($translateX) {
+  transform: translateX($translateX);
+}
+
+@mixin centerXY($position: absolute) {
+  position: $position;
+  top: 50%;
+  left: 50%;
+  @include transform(-50%, -50%);
+}
+
+@mixin centerY() {
+  top: 50%;
+  @include transformY(-50%);
+}
+
+@mixin centerX() {
+  left: 50%;
+  @include transformX(-50%);
+}
+
+// Put this on the parent
+@mixin centerFlexVertical() {
+  display: flex;
+  align-items: center;
+}
+
+@mixin hideLongText() {
+  overflow: hidden;
+  white-space: nowrap;
+  text-decoration: none;
+  text-overflow: ellipsis;
+}
+
+@mixin row() {
+  @include clearfix();
+}
+
+@mixin defaultPopup($position: absolute, $z-index: $z-index-high, $top: 0, $width: 45rem) {
+  @include centerX;
+  @include borderRadius(1rem);
+  @include boxShadow(1rem, .6);
+  position: $position;
+  top: $top;
+  background-color: white;
+  z-index: $z-index;
+  width: $width;
+  max-width: calc(90% - 2rem);
+
+  @include for-phone-only() {
+    margin-left: 2rem;
+  }
+}
+
+@mixin mobilePopupLocation() {
+  @include for-phone-only() {
+    position: fixed;
+    width: calc(90% - 4rem);
+    margin-left: 2rem;
+  }
+}
+
+@mixin withBackground() {
+  z-index: $z-index-popup-4;
+}
+
+@mixin textStroke($strokeColor: lighten($color-gray-5, 5%)) {
+  text-shadow: -1px -1px 0 $strokeColor,
+  1px -1px 0 $strokeColor,
+  -1px 1px 0 $strokeColor,
+  1px 1px 0 $strokeColor;
+}
+
+@mixin backgroundShadow($color: black) {
+  box-shadow: 0 1px 5px 0 rgba($color, 0.2), 0 2px 2px 0 rgba($color, 0.14), 0 3px 1px -2px rgba($color, 0.12);
+}
+
+@mixin backgroundShadow2(){
+  box-shadow: 0 4px 4px rgba(black, 0.05);
+  border-radius: .5rem;
+}
+
+@mixin popupContainer() {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(black, .4);
+  z-index: $z-index-popup-4 + 1;
+}
+
+@mixin popupDialog() {
+  @include centerXY;
+  @include backgroundShadow;
+  @include borderRadius(.5rem);
+  background-color: white;
+  overflow: hidden;
+
+  @include break-sm-down {
+    max-width: 90vw;
+  }
+}

package/src/style/display-breakpoints.scss

@@ -0,0 +1,141 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+/**
+It contains common device/screen breakpoints. Be careful updating these when devices change through the years.
+Ref: https://medium.com/@catalinbridinel/this-makes-more-sense-than-the-counter-example-but-it-definitely-not-the-100-correct-way-7f4fb7e66c87
+ **/
+
+//===========================
+// Material-UI Breakpoints
+//===========================
+@mixin break-xs {
+  @media(max-width: 599px) {
+    @content;
+  }
+}
+
+@mixin break-sm {
+  @media(min-width: 600px) and (max-width: 959px) {
+    @content;
+  }
+}
+
+@mixin break-sm-down {
+  @media(max-width: 959px) {
+    @content;
+  }
+}
+
+@mixin break-sm-up {
+  @media(min-width: 600px) {
+    @content;
+  }
+}
+
+@mixin break-md {
+  @media(min-width: 960px) and (max-width: 1279px) {
+    @content;
+  }
+}
+
+@mixin break-md-down {
+  @media(max-width: 1279px) {
+    @content;
+  }
+}
+
+@mixin break-md-up {
+  @media(min-width: 960px) {
+    @content;
+  }
+}
+
+@mixin break-lg {
+  @media(min-width: 1280px) and (max-width: 1919px) {
+    @content;
+  }
+}
+
+@mixin break-lg-down {
+  @media(max-width: 1919px) {
+    @content;
+  }
+}
+
+@mixin break-lg-up {
+  @media(min-width: 1280px) {
+    @content;
+  }
+}
+
+@mixin break-xl {
+  @media(min-width: 1920px) {
+    @content;
+  }
+}
+
+//===========================
+// End Material-UI Breakpoints
+//===========================
+
+@mixin for-phone-only {
+  @media (max-width: 599px) {
+    @content;
+  }
+}
+
+@mixin for-tablet-portrait-up {
+  @media (min-width: 600px) {
+    @content;
+  }
+}
+
+@mixin for-tablet-portait-only {
+  @media (min-width: 600px) and (max-width: 899px) {
+    @content;
+  }
+}
+
+@mixin for-tablet-portrait-down {
+  @media (max-width: 899px) {
+    @content;
+  }
+}
+
+@mixin for-tablet-landscape-up {
+  @media (min-width: 900px) {
+    @content;
+  }
+}
+
+@mixin for-tablet-landscape-only {
+  @media (min-width: 900px) and (max-width: 1199px) {
+    @content;
+  }
+}
+
+@mixin for-tablet-landscape-down {
+  @media (max-width: 1199px) {
+    @content;
+  }
+}
+
+@mixin for-desktop-up {
+  @media (min-width: 1200px) {
+    @content;
+  }
+}
+
+@mixin for-desktop-only {
+  @media (min-width: 1200px) and (max-width: 1799px) {
+    @content;
+  }
+}
+
+@mixin for-big-desktop-up {
+  @media (min-width: 1800px) {
+    @content;
+  }
+}