@elliemae/ds-basic 2.3.0-next.3 → 3.0.0-alpha.0

package/styles/components/packages/ds-button-group/DSButtonGroup.scss

@@ -1,59 +0,0 @@
-// ********************************************
-// container definition
-$btn-group-container: #{$prefix}-button-group;
-
-// ********************************************
-// element definition
-$btn-el: #{$prefix}-button;
-
-.#{$btn-group-container} {
-  display: flex;
-
-  &--horizontal {
-    &.#{$btn-group-container}--s {
-      & > .#{$btn-el} { margin-right: space(s); }      
-    } 
-
-    &.#{$btn-group-container}--m {   
-      & > .#{$btn-el} { margin-right: space(m); }         
-    }    
-
-    &.#{$btn-group-container}--l {    
-      & > .#{$btn-el} { margin-right: space(l); }
-    }  
-
-    .#{$btn-el} {            
-      &:not(:last-child) {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-      &:not(:first-child) {
-        margin-left: -1px;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-    }
-  }
-
-  &--vertical {
-    &.#{$btn-group-container}--s {
-      & > .#{$btn-el} { margin-bottom: space(s); }      
-    } 
-
-    &.#{$btn-group-container}--m {   
-      & > .#{$btn-el} { margin-bottom: space(m); }         
-    }    
-
-    &.#{$btn-group-container}--l {    
-      & > .#{$btn-el} { margin-bottom: space(l); }
-    } 
-
-    flex-direction: column;
-  }
-
-  .#{$btn-el} {
-    &:hover { z-index: 3; }
-    &:focus { z-index: 2; }
-  }
-
-}

package/styles/components/packages/ds-card/DSCard.scss

@@ -1,39 +0,0 @@
-@function separator-border($color: 200, $size: 1px) {
-    @return $size solid color(neutral, $color);
-}
-
-// ********************************************
-// container definition
-$el-container: #{$prefix}-card;
-$el-card-body: #{$prefix}-card-body;
-$el-header: #{$prefix}-card-header;
-$el-heading: #{$el-header}__heading;
-$el-pull-right: #{$el-header}__pull-right;
-
-
-
-.#{$el-container} {
-     border: 1px solid color(neutral, 050);
-     @include border-radius(0);
-     @include box-shadow (1px 1px 3px 1px rgba(0,0,0,0.30));
-    
-
-    .#{$el-header} {
-        color: color(neutral, 600);
-        background: color(neutral, 050);
-        padding: 6px 15px;
-        border-bottom: 1px solid transparent;
-        @include border-radius(0);
-        .#{$el-heading} {
-            color: color(neutral, 600);
-            font-family: inherit;
-            font-size: 18pt;
-        }
-        .#{$el-pull-right} {
-            float: right;
-        }
-    }
-    .#{$el-card-body}{
-        padding:1rem;
-    }
-} 

package/styles/components/packages/ds-card-array/DSCardArray.scss

@@ -1,50 +0,0 @@
-$card-array: #{$prefix}-card-array;
-$wrapper: #{$card-array}__wrapper;
-$box: #{$card-array}__box;
-
-.#{$wrapper} {
-  padding: space(xs);
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-
-
-  @for $i from 1 through 4 {
-    &--cols-lg-#{$i} { 
-      .#{$box} {
-        $width: 100 / #{$i};
-        width: calc(#{$width}%  - (#{space(s)} * 2));
-      }
-    }
-  }
-
-  @media (max-width: 1024px) {
-    @for $i from 1 through 4 {
-      &--cols-md-#{$i} { 
-        .#{$box} {
-          $width: 100 / #{$i};
-          width: calc(#{$width}%  - (#{space(s)} * 2));
-        }
-      }
-    }
-  }
-  @media (max-width: 800px) {
-    @for $i from 1 through 4 {
-      &--cols-sm-#{$i} { 
-        .#{$box} {
-          $width: 100 / #{$i};
-          width: calc(#{$width}%  - (#{space(s)} * 2));
-        }
-      }
-    }
-  }
-}
-
-.#{$box} {
-  margin: space(s);
-  width: calc(33.33% - (#{space(s)} * 2));
-  @include box-shadow(depth(100));
-  background: color(neutral, 0);
-  padding: space(xs);
-}

package/styles/components/packages/ds-circular-progress-indicator/DSCircularProgressIndicator.scss

@@ -1,81 +0,0 @@
-$circular-progress-indicator: #{$prefix}-circular-progress-indicator;
-$wrapper: #{$circular-progress-indicator}-wrapper;
-$track: #{$circular-progress-indicator}__track;
-$label: #{$circular-progress-indicator}__label;
-$arc-white: #{$circular-progress-indicator}__arc-white;
-$arc-gray: #{$circular-progress-indicator}__arc-gray;
-$arc-blue: #{$circular-progress-indicator}__arc-blue;
-
-
-.#{$wrapper} {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  width: fit-content;
-  margin: 0;
-}
-
-.#{$label} {
-  margin-top: space(s);
-}
-
-.#{$track} {
-  stroke: color(neutral, 100);
-}
-
-.#{$arc-blue} {
-  transform-origin: 33px 33px;
-  animation: rotation1 2.7s ease-out  infinite;
-}
-
-.#{$arc-white} {
-  transform-origin: 33px 33px;
-  animation: rotation2 2.7s ease-out infinite;
-}
-
-.#{$arc-gray} {
-  transform-origin: 33px 33px;
-  animation: rotation2 2.7s ease-out infinite;
-}
-
-@keyframes rotation1 {
-  0% {
-    stroke: url(#grad1);
-    transform: rotate(0deg);
-  }
-  49% {
-    stroke: url(#grad1);
-  }
-  50% {
-    stroke: #5594e2;
-    transform: rotate(450deg);
-  }
-  51% {
-    stroke: url(#grad2);
-  }
-  100% {
-    stroke: url(#grad2);
-    transform: rotate(0deg);
-  }
-}
-
-@keyframes rotation2 {
-  0% {
-    transform: rotate(0deg);
-  }
-  20% {
-    transform: rotate(0deg);
-  }
-  40% {
-    transform: rotate(90deg);
-  }
-  60% {
-    transform: rotate(90deg);
-  }
-  80% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(0deg);
-  }
-}

package/styles/components/packages/ds-codeeditor/DSCodeEditor.scss

@@ -1 +0,0 @@
-@import './components/DSCodeEditorImpl';

package/styles/components/packages/ds-codeeditor/components/DSCodeEditorImpl.scss

@@ -1,69 +0,0 @@
-$el-container: #{$prefix}-code-editor;
-$el-file-name: #{$el-container}-file-name;
-$el-find-replace-btn: #{$el-container}-find-replace-btn;
-$el-next-back-btn: #{$el-container}-next-back-btn;
-$el-find: #{$el-container}-find;
-$el-replace: #{$el-container}-replace;
-$el-replace-btns: #{$el-container}-replace-btns;
-$options-group: #{$el-container}-options-group;
-
-// dimsum components
-$ds-checkbox: #{$prefix}-form-element-checkbox;
-
-.#{$el-file-name} {
-	padding-bottom: space(s);
-	border-bottom: 1px solid color(neutral, 050);
-}
-
-.#{$el-find-replace-btn} {
-    display: flex;
-    margin-top: space(s);
-    margin-bottom: space(s);
-
-    .em-ds-button:first-child {
-    	margin-right: space(s);
-    }
-}
-
-.#{$el-next-back-btn},
-.#{$el-replace-btns} {
-	display: flex;
-}
-
-.#{$el-replace},
-.#{$el-replace-btns} {
-	margin-top: space(s);
-}
-
-.#{$el-replace-btns} {
-	margin-bottom: space(s);
-	.em-ds-button:first-child {
-    	margin-right: space(s);
-    }
-}
-
-.#{$el-find} {
-	align-items: baseline;
-	.em-ds-input {
-		margin-right: space(xs);
-	}
-	.em-ds-form-element-checkbox {
-		flex: 0.5;
-
-		.em-ds-form-element-checkbox__input-button {
-			margin-right: space(xs);
-		}
-	}
-}
-
-.#{$options-group} {
-	padding: 0 space(xs);
-	display: flex;
-	.#{$ds-checkbox}:not(:last-child) {
-		margin-right: space(s);
-	}
-}
-
-.ace_editor {
-	width: 100% !important;
-}

package/styles/components/packages/ds-comments/DSComments.scss

@@ -1,163 +0,0 @@
-$comments: #{$prefix}-comments;
-$comments-wrapper: #{$comments}__comments;
-$comments-area: #{$comments}__area;
-$wrapper-width: calc(#{space(xl)} * 7);
-$comment-area-height: space(xxl) * 2.03;
-
-.#{$comments-wrapper} {
-  width: $wrapper-width;
-  display: flex;
-  align-items: flex-end;
-  &-scroll {
-    overflow-x: scroll;
-    height: 100%;
-    padding: 1px;
-    &--not-scroll {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-end;
-      justify-content: flex-end;
-    }
-  }
-  padding-bottom: $comment-area-height;
-  position: relative;
-  .#{$comments-area} {
-    position: absolute;
-    bottom: 0;
-    left: 1;
-  }
-}
-
-// comment area
-
-.#{$comments-area} {
-  border-top: solid 1px color(neutral, 100);
-  padding: space(xs) space(m);
-  height: $comment-area-height;
-
-  width: calc(#{space(xl)} * 7 - 2px);
-}
-
-// counter
-$counter: #{$comments}__counter;
-.#{$counter} {
-  text-align: right;
-  padding: space(xxs);
-  span {
-    margin: 0 space(xxs) * 0.3;
-  }
-}
-
-// submit
-$submit: #{$comments}__submit-wrapper;
-.#{$submit} {
-  padding: space(xs) 0;
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  // align-items: center;
-}
-
-// card wrapper
-
-$card-wrapper: #{$comments}__comment-card-wrapper;
-.#{$card-wrapper} {
-  min-height: space(xxl) * 1.18;
-  min-width: space(xxl) * 3.82;
-  padding-left: space(m);
-  padding-right: space(m);
-  width: 100%;
-  &:focus {
-    outline: none;
-    position: relative;
-
-    &:after {
-      content: '';
-      // z-index: 10;
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      pointer-events: none;
-      @include dsFocus();
-    }
-  }
-  &--borderBottom{
-    border-top: solid 0 color(neutral, 100);
-    border-bottom: solid 1px color(neutral, 100);
-    margin-bottom: space(s);
-  }
-}
-
-// card empty
-
-$card-empty: #{$comments}__comment-empty;
-$card-empty-icon: #{$comments}__comment-empty-icon;
-$card-empty-label: #{$comments}__comment-empty-label;
-
-.#{$card-empty} {
-  @extend .#{$card-wrapper};
-  width: $wrapper-width;
-  text-align: center;
-}
-
-.#{$card-empty-icon} {
-  padding: space(s) space(m);
-  svg, svg:not([fill]) {
-    fill: color(neutral, 200);
-  }
-}
-
-.#{$card-empty-label} {
-  padding: 0 space(m) space(s) space(m);
-  color: color(neutral, 500);
-}
-
-// header
-$header: #{$comments}__comment-card-header;
-$header-left: #{$comments}__comment-card-left;
-$header-name: #{$comments}__comment-card-name;
-$header-data: #{$comments}__comment-card-data;
-
-.#{$header} {
-  border-top: solid 1px color(neutral, 100);
-  display: flex;
-  padding: space(xxs) space(xxs) space(xxs) space(xs);
-  &--borderBottom{
-    border-top: solid 0 color(neutral, 100);
-  }
-}
-.#{$header-left} {
-  flex: 1;
-}
-.#{$header-name} {
-  font-size: font-size(500);
-  font-weight: font-weight(semibold);
-  color: color(neutral, 700);
-  padding-bottom: space(xxs) * 0.5;
-}
-.#{$header-data} {
-  font-size: font-size(300);
-  font-weight: font-weight(light);
-  color: color(neutral, 500);
-  span {
-    padding: 0 space(xxs);
-  }
-}
-
-// content
-$content: #{$comments}__comment-card-content;
-.#{$content} {
-  padding: 0 space(xs) space(xs) space(xs);
-  font-size: font-size(400);
-  font-weight: font-weight(normal);
-  line-height: 1.3;
-  color: color(neutral, 500);
-  button {
-    display: inline-block;
-    height: auto;
-    padding-left: space(xs);
-    padding-right: space(xs);
-  }
-}