@elliemae/ds-basic 2.3.0-next.2 → 2.3.0-next.3

package/styles/components/packages/ds-basic/node_modules/@elliemae/ds-basic/styles/components/packages/ds-button-group/DSButtonGroup.scss

@@ -0,0 +1,59 @@
+// ********************************************
+// 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-basic/node_modules/@elliemae/ds-basic/styles/components/packages/ds-card/DSCard.scss

@@ -0,0 +1,39 @@
+@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-basic/node_modules/@elliemae/ds-basic/styles/components/packages/ds-card-array/DSCardArray.scss

@@ -0,0 +1,50 @@
+$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-basic/node_modules/@elliemae/ds-basic/styles/components/packages/ds-circular-progress-indicator/DSCircularProgressIndicator.scss

@@ -0,0 +1,81 @@
+$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-basic/node_modules/@elliemae/ds-basic/styles/components/packages/ds-codeeditor/DSCodeEditor.scss

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

package/styles/components/packages/ds-basic/node_modules/@elliemae/ds-basic/styles/components/packages/ds-codeeditor/components/DSCodeEditorImpl.scss

@@ -0,0 +1,69 @@
+$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-basic/node_modules/@elliemae/ds-basic/styles/components/packages/ds-comments/DSComments.scss

@@ -0,0 +1,163 @@
+$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);
+  }
+}