@iamproperty/components 4.1.1-beta-7 → 5.1.0-beta

package/assets/sass/foundations/circles.scss

@@ -1,75 +0,0 @@
-@use "../_func" as *;
-
-.circle {
-  position: relative;
-  border-radius: 50%;
-  height: 1em;
-  width: 1em;
-  display: inline-block;
-  font-size: rem(200);
-  overflow: hidden;
-  @include var(color,--colour-secondary);
-
-  &:not([class*="gradient-"]){
-
-    border: 2px solid currentColor;
-  }
-
-  &:not([class*="border-"]):before{
-
-    background-color: currentColor;
-  }
-
-  &:not([class*="gradient-"]):before {
-    content: "";
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    mask-image: var(--icon-bg);
-    mask-size: rem(34);
-    mask-repeat: repeat;
-    mask-position: 50% 50%;
-    -webkit-mask-image: var(--icon-bg);
-    -webkit-mask-size: rem(34);
-    -webkit-mask-repeat: repeat;
-    -webkit-mask-position: 50% 51%;
-  }
-
-  &--cross:before,
-  &--plus:before {
-
-    background-color: currentColor;
-    --icon-bg: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' style='stroke-width: 1.25px; stroke: black;' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-3.3,20.41l6.6-6.82m.11,6.71-6.82-6.6M13.7,37.41l6.6-6.82m.11,6.71-6.82-6.6M13.7,3.41l6.6-6.82m.11,6.71L13.59-3.3M30.7,20.41l6.6-6.82m.11,6.71-6.82-6.6'/%3E%3C/svg%3E");
-  }
-
-  &--plus:before {
-
-    transform: rotate(46deg);
-  }
-  
-  &--stripe:before {
-
-    background-color: currentColor;
-    --icon-bg: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' style='stroke-width: 2px; stroke: black;' xmlns='http://www.w3.org/2000/svg'%3E%3Cline y1='8.5' x2='34' y2='8.5' /%3E%3Cline y1='25.5' x2='34' y2='25.5' /%3E%3C/svg%3E");
-    transform: rotate(45deg);
-  }
-
-  &--dots:before {
-
-    background-color: currentColor;
-    --icon-bg: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='17' r='3' /%3E%3Ccircle cy='17' r='3' /%3E%3Ccircle cx='34' cy='17' r='3' /%3E%3Ccircle cx='17' cy='34' r='3' /%3E%3C/svg%3E");
-  }
-
-  // Add an image into a circle
-  > img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-}