ids-enterprise-wc 1.0.0-beta.10 → 1.0.0-beta.11

package/components/ids-splitter/ids-splitter.css

@@ -1,71 +0,0 @@
-/* Ids Splitter Component */
-.ids-splitter {
-  display: flex;
-  position: relative;
-  height: 100%;
-  width: 100%;
-}
-.ids-splitter.axis-x {
-  flex-direction: row;
-}
-.ids-splitter.axis-y {
-  flex-direction: column;
-}
-.ids-splitter .ids-splitter-split-bar {
-  position: absolute;
-}
-.ids-splitter .ids-splitter-split-bar .split-bar {
-  display: flex;
-  position: relative;
-  height: 100%;
-  width: 100%;
-  align-items: center;
-  justify-content: center;
-  transition: background-color var(--ids-transition-length) var(--ids-transition-ease);
-}
-.ids-splitter .ids-splitter-split-bar .split-bar:hover {
-  background-color: var(--ids-splitter-bar-hover-background-color);
-}
-.ids-splitter .ids-splitter-split-bar[axis=x] {
-  height: 100%;
-  width: var(--ids-splitter-bar-width);
-  top: 0;
-}
-.ids-splitter .ids-splitter-split-bar[axis=x].align-start {
-  border-inline-start: 1px solid var(--ids-splitter-bar-border-color);
-}
-.ids-splitter .ids-splitter-split-bar[axis=x].align-end {
-  border-inline-end: 1px solid var(--ids-splitter-bar-border-color);
-  margin-inline-start: -var(--ids-splitter-bar-width);
-}
-.ids-splitter .ids-splitter-split-bar[axis=y] {
-  height: var(--ids-splitter-bar-width);
-  left: 0;
-  width: 100%;
-}
-.ids-splitter .ids-splitter-split-bar[axis=y].align-start {
-  border-block-start: 1px solid var(--ids-splitter-bar-border-color);
-}
-.ids-splitter .ids-splitter-split-bar[axis=y].align-end {
-  border-block-end: 1px solid var(--ids-splitter-bar-border-color);
-  margin-block-start: -var(--ids-splitter-bar-width);
-}
-.ids-splitter .ids-splitter-split-bar[axis=y] ids-icon {
-  transform: rotate(-90deg);
-}
-.ids-splitter .ids-splitter-split-bar[is-dragging], .ids-splitter .ids-splitter-split-bar:focus {
-  outline: none;
-  background-color: var(--ids-splitter-bar-hover-background-color);
-}
-.ids-splitter .ids-splitter-split-bar[is-dragging][axis=x].align-start, .ids-splitter .ids-splitter-split-bar[is-dragging][axis=x].align-end, .ids-splitter .ids-splitter-split-bar[is-dragging][axis=y].align-start, .ids-splitter .ids-splitter-split-bar[is-dragging][axis=y].align-end, .ids-splitter .ids-splitter-split-bar:focus[axis=x].align-start, .ids-splitter .ids-splitter-split-bar:focus[axis=x].align-end, .ids-splitter .ids-splitter-split-bar:focus[axis=y].align-start, .ids-splitter .ids-splitter-split-bar:focus[axis=y].align-end {
-  border-color: var(--ids-splitter-bar-dragging-border-color);
-  box-shadow: var(--ids-splitter-bar-dragging-box-shadow);
-}
-.ids-splitter .ids-splitter-split-bar[disabled] {
-  display: none;
-}
-
-::slotted(ids-splitter-pane) {
-  display: grid;
-  overflow: auto;
-}

package/components/ids-step-chart/ids-step-chart.css

@@ -1,275 +0,0 @@
-/* Ids Step Chart Component */
-:root {
-  width: 100%;
-}
-
-.ids-step-chart {
-  contain: content;
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  margin: var(--ids-step-chart-margin);
-}
-.ids-step-chart .step-label-container {
-  margin-block-end: var(--ids-step-chart-inner-margin);
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  flex: 1 1 auto;
-}
-.ids-step-chart .step-label-container .secondary-label {
-  display: flex;
-  flex-direction: row;
-}
-.ids-step-chart .step-label-container .secondary-label .completed-label {
-  margin-inline-end: var(--ids-step-chart-inner-margin);
-}
-.ids-step-chart .step-label-container .secondary-label .icon {
-  margin-inline-start: var(--ids-step-chart-inner-margin);
-}
-.ids-step-chart .step-chart-container {
-  display: flex;
-  flex-direction: row;
-  flex: 1 1 auto;
-}
-.ids-step-chart .step-chart-container .step {
-  margin: calc(var(--ids-step-chart-inner-margin) - 3px);
-  height: var(--ids-step-chart-height);
-  box-sizing: content-box;
-  border: 1px;
-  flex: 1 1 auto;
-}
-.ids-step-chart .step-chart-container .step[color=ruby01] {
-  background-color: var(--ids-color-ruby-10);
-}
-.ids-step-chart .step-chart-container .step[color=ruby02] {
-  background-color: var(--ids-color-ruby-20);
-}
-.ids-step-chart .step-chart-container .step[color=ruby03] {
-  background-color: var(--ids-color-ruby-30);
-}
-.ids-step-chart .step-chart-container .step[color=ruby04] {
-  background-color: var(--ids-color-ruby-40);
-}
-.ids-step-chart .step-chart-container .step[color=ruby05] {
-  background-color: var(--ids-color-ruby-50);
-}
-.ids-step-chart .step-chart-container .step[color=ruby06] {
-  background-color: var(--ids-color-ruby-60);
-}
-.ids-step-chart .step-chart-container .step[color=ruby07] {
-  background-color: var(--ids-color-ruby-70);
-}
-.ids-step-chart .step-chart-container .step[color=ruby08] {
-  background-color: var(--ids-color-ruby-80);
-}
-.ids-step-chart .step-chart-container .step[color=ruby09] {
-  background-color: var(--ids-color-ruby-90);
-}
-.ids-step-chart .step-chart-container .step[color=ruby10] {
-  background-color: var(--ids-color-ruby-100);
-}
-.ids-step-chart .step-chart-container .step[color=amber01] {
-  background-color: var(--ids-color-amber-10);
-}
-.ids-step-chart .step-chart-container .step[color=amber02] {
-  background-color: var(--ids-color-amber-20);
-}
-.ids-step-chart .step-chart-container .step[color=amber03] {
-  background-color: var(--ids-color-amber-30);
-}
-.ids-step-chart .step-chart-container .step[color=amber04] {
-  background-color: var(--ids-color-amber-40);
-}
-.ids-step-chart .step-chart-container .step[color=amber05] {
-  background-color: var(--ids-color-amber-50);
-}
-.ids-step-chart .step-chart-container .step[color=amber06] {
-  background-color: var(--ids-color-amber-60);
-}
-.ids-step-chart .step-chart-container .step[color=amber07] {
-  background-color: var(--ids-color-amber-70);
-}
-.ids-step-chart .step-chart-container .step[color=amber08] {
-  background-color: var(--ids-color-amber-80);
-}
-.ids-step-chart .step-chart-container .step[color=amber09] {
-  background-color: var(--ids-color-amber-90);
-}
-.ids-step-chart .step-chart-container .step[color=amber10] {
-  background-color: var(--ids-color-amber-100);
-}
-.ids-step-chart .step-chart-container .step[color=emerald01] {
-  background-color: var(--ids-color-emerald-10);
-}
-.ids-step-chart .step-chart-container .step[color=emerald02] {
-  background-color: var(--ids-color-emerald-20);
-}
-.ids-step-chart .step-chart-container .step[color=emerald03] {
-  background-color: var(--ids-color-emerald-30);
-}
-.ids-step-chart .step-chart-container .step[color=emerald04] {
-  background-color: var(--ids-color-emerald-40);
-}
-.ids-step-chart .step-chart-container .step[color=emerald05] {
-  background-color: var(--ids-color-emerald-50);
-}
-.ids-step-chart .step-chart-container .step[color=emerald06] {
-  background-color: var(--ids-color-emerald-60);
-}
-.ids-step-chart .step-chart-container .step[color=emerald07] {
-  background-color: var(--ids-color-emerald-70);
-}
-.ids-step-chart .step-chart-container .step[color=emerald08] {
-  background-color: var(--ids-color-emerald-80);
-}
-.ids-step-chart .step-chart-container .step[color=emerald09] {
-  background-color: var(--ids-color-emerald-90);
-}
-.ids-step-chart .step-chart-container .step[color=emerald10] {
-  background-color: var(--ids-color-emerald-100);
-}
-.ids-step-chart .step-chart-container .step[color=azure01] {
-  background-color: var(--ids-color-azure-10);
-}
-.ids-step-chart .step-chart-container .step[color=azure02] {
-  background-color: var(--ids-color-azure-20);
-}
-.ids-step-chart .step-chart-container .step[color=azure03] {
-  background-color: var(--ids-color-azure-30);
-}
-.ids-step-chart .step-chart-container .step[color=azure04] {
-  background-color: var(--ids-color-azure-40);
-}
-.ids-step-chart .step-chart-container .step[color=azure05] {
-  background-color: var(--ids-color-azure-50);
-}
-.ids-step-chart .step-chart-container .step[color=azure06] {
-  background-color: var(--ids-color-azure-60);
-}
-.ids-step-chart .step-chart-container .step[color=azure07] {
-  background-color: var(--ids-color-azure-70);
-}
-.ids-step-chart .step-chart-container .step[color=azure08] {
-  background-color: var(--ids-color-azure-80);
-}
-.ids-step-chart .step-chart-container .step[color=azure09] {
-  background-color: var(--ids-color-azure-90);
-}
-.ids-step-chart .step-chart-container .step[color=azure10] {
-  background-color: var(--ids-color-azure-100);
-}
-.ids-step-chart .step-chart-container .step[color=turquoise01] {
-  background-color: var(--ids-color-turquoise-10);
-}
-.ids-step-chart .step-chart-container .step[color=turquoise02] {
-  background-color: var(--ids-color-turquoise-20);
-}
-.ids-step-chart .step-chart-container .step[color=turquoise03] {
-  background-color: var(--ids-color-turquoise-30);
-}
-.ids-step-chart .step-chart-container .step[color=turquoise04] {
-  background-color: var(--ids-color-turquoise-40);
-}
-.ids-step-chart .step-chart-container .step[color=turquoise05] {
-  background-color: var(--ids-color-turquoise-50);
-}
-.ids-step-chart .step-chart-container .step[color=turquoise06] {
-  background-color: var(--ids-color-turquoise-60);
-}
-.ids-step-chart .step-chart-container .step[color=turquoise07] {
-  background-color: var(--ids-color-turquoise-70);
-}
-.ids-step-chart .step-chart-container .step[color=turquoise08] {
-  background-color: var(--ids-color-turquoise-80);
-}
-.ids-step-chart .step-chart-container .step[color=turquoise09] {
-  background-color: var(--ids-color-turquoise-90);
-}
-.ids-step-chart .step-chart-container .step[color=turquoise10] {
-  background-color: var(--ids-color-turquoise-100);
-}
-.ids-step-chart .step-chart-container .step[color=amethyst01] {
-  background-color: var(--ids-color-amethyst-10);
-}
-.ids-step-chart .step-chart-container .step[color=amethyst02] {
-  background-color: var(--ids-color-amethyst-20);
-}
-.ids-step-chart .step-chart-container .step[color=amethyst03] {
-  background-color: var(--ids-color-amethyst-30);
-}
-.ids-step-chart .step-chart-container .step[color=amethyst04] {
-  background-color: var(--ids-color-amethyst-40);
-}
-.ids-step-chart .step-chart-container .step[color=amethyst05] {
-  background-color: var(--ids-color-amethyst-50);
-}
-.ids-step-chart .step-chart-container .step[color=amethyst06] {
-  background-color: var(--ids-color-amethyst-60);
-}
-.ids-step-chart .step-chart-container .step[color=amethyst07] {
-  background-color: var(--ids-color-amethyst-70);
-}
-.ids-step-chart .step-chart-container .step[color=amethyst08] {
-  background-color: var(--ids-color-amethyst-80);
-}
-.ids-step-chart .step-chart-container .step[color=amethyst09] {
-  background-color: var(--ids-color-amethyst-90);
-}
-.ids-step-chart .step-chart-container .step[color=amethyst10] {
-  background-color: var(--ids-color-amethyst-100);
-}
-.ids-step-chart .step-chart-container .step[color=slate01] {
-  background-color: var(--ids-color-neutral-10);
-}
-.ids-step-chart .step-chart-container .step[color=slate02] {
-  background-color: var(--ids-color-neutral-20);
-}
-.ids-step-chart .step-chart-container .step[color=slate03] {
-  background-color: var(--ids-color-neutral-30);
-}
-.ids-step-chart .step-chart-container .step[color=slate04] {
-  background-color: var(--ids-color-neutral-40);
-}
-.ids-step-chart .step-chart-container .step[color=slate05] {
-  background-color: var(--ids-color-neutral-50);
-}
-.ids-step-chart .step-chart-container .step[color=slate06] {
-  background-color: var(--ids-color-neutral-60);
-}
-.ids-step-chart .step-chart-container .step[color=slate07] {
-  background-color: var(--ids-color-neutral-70);
-}
-.ids-step-chart .step-chart-container .step[color=slate08] {
-  background-color: var(--ids-color-neutral-80);
-}
-.ids-step-chart .step-chart-container .step[color=slate09] {
-  background-color: var(--ids-color-neutral-90);
-}
-.ids-step-chart .step-chart-container .step[color=slate10] {
-  background-color: var(--ids-color-neutral-100);
-}
-.ids-step-chart .step-chart-container .step[color=base] {
-  background-color: var(--ids-color-primary);
-}
-.ids-step-chart .step-chart-container .step[color=info] {
-  background-color: var(--ids-color-info);
-}
-.ids-step-chart .step-chart-container .step[color=caution] {
-  background-color: var(--ids-color-caution);
-}
-.ids-step-chart .step-chart-container .step[color=error] {
-  background-color: var(--ids-color-error);
-}
-.ids-step-chart .step-chart-container .step[color=success] {
-  background-color: var(--ids-color-success);
-}
-.ids-step-chart .step-chart-container .step[color=warning] {
-  background-color: var(--ids-color-warning);
-}
-.ids-step-chart .step-chart-container .step.untouched {
-  background-color: var(--ids-step-chart-step-background-color);
-}
-.ids-step-chart .step-chart-container .step.completed {
-  background-color: var(--ids-step-chart-step-completed-background-color);
-}

package/components/ids-swaplist/ids-swaplist.css

@@ -1,69 +0,0 @@
-.ids-swaplist {
-  box-shadow: var(--ids-swaplist-box-shadow);
-  display: flex;
-  flex-direction: row;
-}
-
-.swap-buttons {
-  margin-inline-start: auto;
-}
-
-ids-swappable-item {
-  padding: var(--ids-swaplist-item-padding);
-  padding-inline-start: var(--ids-swaplist-item-padding-inline-start);
-  position: relative;
-  margin-block-end: var(--ids-swaplist-item-margin-block-end);
-}
-ids-swappable-item.is-hidden {
-  height: 0;
-  padding: 0;
-  border: none;
-  overflow: hidden;
-}
-
-ids-swappable-item[over] {
-  border: var(--ids-swaplist-item-over-border);
-}
-
-ids-button {
-  position: relative;
-  padding: var(--ids-swaplist-toolbar-button-padding);
-  height: var(--ids-swaplist-toolbar-button-height);
-  width: var(--ids-swaplist-toolbar-button-width);
-}
-ids-button::part(button) {
-  padding: var(--ids-swaplist-toolbar-button-padding);
-  align-items: center;
-  display: flex;
-  justify-content: center;
-}
-ids-button::part(button):hover {
-  background-color: var(--ids-swaplist-toolbar-button-hover-background-color);
-}
-
-ids-card {
-  flex: 1;
-}
-ids-card::part(card) {
-  margin-block-end: var(--ids-swaplist-card-margin-block-end);
-}
-ids-card::part(header) {
-  border-block-end: var(--ids-swaplist-card-header-border-block-end);
-}
-ids-card::part(content) {
-  height: var(--ids-swaplist-card-content-height);
-}
-ids-card.card::part(card) {
-  border-radius: var(--ids-swaplist-card-border-radius);
-  border-inline-start-width: var(--ids-swaplist-card-border-inline-start-width);
-  box-shadow: var(--ids-swaplist-card-box-shadow);
-}
-ids-card.card:first-child::part(card) {
-  border-inline-start-width: var(--ids-swaplist-card-first-child-border-inline-start-width);
-  border-start-start-radius: var(--ids-swaplist-border-radius);
-  border-end-start-radius: var(--ids-swaplist-border-radius);
-}
-ids-card.card:last-child::part(card) {
-  border-start-end-radius: var(--ids-swaplist-border-radius);
-  border-end-end-radius: var(--ids-swaplist-border-radius);
-}

package/components/ids-swappable/ids-swappable.css

@@ -1,72 +0,0 @@
-:root {
-  font-family: var(--ids-swappable-item-font-family);
-  border: var(--ids-swappable-item-border);
-  cursor: var(--ids-swappable-item-cursor);
-  display: block;
-  transition: height 0.4s ease, padding 0.4s ease;
-}
-
-:host(:hover) {
-  background-color: var(--ids-swappable-item-hover-background-color);
-  position: relative;
-}
-:host(:hover)::before {
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translate(5px, -47%);
-  font-size: var(--ids-swappable-item-hover-before-font-size);
-  content: var(--ids-swappable-item-hover-before-content);
-}
-
-:host([dir=rtl]:hover)::before {
-  left: unset;
-  right: 5px;
-  transform: translate(-1px, -47%);
-}
-
-:host(:focus) {
-  border: var(--ids-swappable-item-focus-border);
-  box-shadow: var(--ids-swappable-item-focus-box-shadow);
-  outline: var(--ids-swappable-item-focus-outline);
-}
-
-:host([selected]) {
-  cursor: var(--ids-swappable-item-selected-cursor);
-}
-
-:host([dragging]) {
-  opacity: var(--ids-swappable-item-dragging-opacity);
-}
-
-:host([dragging]:not(.slotted-ids-tab)),
-:host([selected]:not(.slotted-ids-tab)) {
-  background-color: var(--ids-swappable-item-selected-background-color);
-  color: var(--ids-swappable-item-selected-text-color);
-}
-
-:host([over]) {
-  border: var(--ids-swappable-item-over-border);
-}
-
-:host(.p-8) {
-  padding-block: var(--ids-spacing-lg);
-  padding-inline-end: var(--ids-spacing-lg);
-  padding-inline-start: var(--ids-spacing-xxl);
-}
-
-:host(.is-hidden) {
-  height: var(--ids-spacing-none);
-  padding: var(--ids-spacing-none);
-  border: none;
-  overflow: hidden;
-}
-
-::slotted(ids-tab) {
-  position: relative;
-  margin: -1px;
-}
-
-:host(.slotted-ids-tab:not(.orientation-vertical)) {
-  margin-inline-start: var(--ids-spacing-md);
-}

package/components/ids-swipe-action/ids-swipe-action.css

@@ -1,66 +0,0 @@
-/* Ids Swipe Container Css */
-.ids-swipe-container {
-  display: flex;
-  overflow-x: scroll;
-  scroll-snap-type: x proximity;
-  scroll-behavior: smooth;
-  margin-left: -1px;
-  border-radius: var(--ids-card-border-radius);
-}
-.ids-swipe-container.continuous {
-  scroll-snap-type: x proximity;
-}
-.ids-swipe-container.continuous .ids-swipe-action-left,
-.ids-swipe-container.continuous .ids-swipe-action-right {
-  scroll-snap-align: initial;
-}
-
-.ids-swipe-container::-webkit-scrollbar {
-  display: none;
-}
-
-.swipe-container {
-  scrollbar-width: none;
-}
-
-.ids-swipe-element {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  padding: var(--ids-spacing-xxl);
-  font-family: var(--ids-font-family);
-  scroll-snap-align: start;
-  scroll-snap-stop: always;
-  min-width: calc(100% - 32px);
-}
-
-.ids-swipe-action {
-  border-radius: 6px;
-  display: flex;
-  align-items: center;
-  min-width: 100%;
-}
-
-.ids-swipe-action-left {
-  scroll-snap-align: start;
-  scroll-snap-stop: always;
-}
-
-.ids-swipe-action-right {
-  justify-content: flex-end;
-  scroll-snap-align: start;
-  scroll-snap-stop: always;
-}
-
-::slotted(ids-button) {
-  display: contents;
-  position: sticky;
-}
-
-@-moz-document url-prefix("") {
-  .ids-swipe-container {
-    overflow-x: hidden;
-  }
-  .ids-swipe-action-left {
-    display: none;
-  }
-}

package/components/ids-switch/ids-switch.css

@@ -1,103 +0,0 @@
-/* Ids Switch Component */ /**
- * Switch Mixins.
- */
-.ids-switch {
-  margin-block-end: var(--ids-input-margin-bottom);
-}
-.ids-switch label {
-  cursor: var(--ids-cursor-pointer);
-  user-select: none;
-  padding-inline-start: 40px;
-  position: relative;
-  display: inline-block;
-}
-.ids-switch label:hover .slider::after {
-  box-shadow: 0 2px 5px var(--ids-switch-toggle-hover-background-color);
-}
-.ids-switch label:active .slider::after {
-  box-shadow: var(--ids-switch-toggle-focus-box-shadow);
-}
-.ids-switch.disabled label {
-  cursor: var(--ids-cursor-default);
-}
-.ids-switch input[type=checkbox] {
-  position: absolute;
-  cursor: var(--ids-cursor-default);
-  opacity: 0;
-  height: 0;
-  width: 0;
-}
-.ids-switch input[type=checkbox] ~ .slider {
-  position: absolute;
-  background-color: var(--ids-switch-pole-off-background-color);
-  border-radius: 4px;
-  display: inline-block;
-  height: 4px;
-  left: 0;
-  top: 10px;
-  width: 31px;
-}
-.ids-switch input[type=checkbox] ~ .slider::after {
-  position: absolute;
-  background-color: var(--ids-switch-toggle-off-background-color);
-  border: 1px solid var(--ids-switch-toggle-off-border-color);
-  border-radius: var(--ids-border-radius-round);
-  content: "";
-  height: 14px;
-  left: 0;
-  top: -7px;
-  width: 14px;
-  transition: all var(--ids-transition-length) var(--ids-transition-ease);
-}
-.ids-switch input[type=checkbox]:checked ~ .slider {
-  background-color: var(--ids-switch-pole-on-background-color);
-  transition: all var(--ids-transition-length) var(--ids-transition-ease);
-}
-.ids-switch input[type=checkbox]:checked ~ .slider::after {
-  background-color: var(--ids-switch-toggle-on-background-color);
-  border-color: var(--ids-switch-toggle-on-border-color);
-  left: 15px;
-  transition: all var(--ids-transition-length) var(--ids-transition-ease);
-}
-.ids-switch input[type=checkbox]:focus ~ .slider::after {
-  box-shadow: var(--ids-switch-toggle-focus-box-shadow);
-}
-.ids-switch input[type=checkbox]:disabled ~ .slider {
-  background-color: var(--ids-switch-pole-off-disabled-background-color);
-  border-color: var(--ids-switch-pole-off-disabled-border-color);
-  cursor: var(--ids-cursor-default);
-}
-.ids-switch input[type=checkbox]:disabled ~ .slider::after {
-  background-color: var(--ids-switch-toggle-off-disabled-background-color);
-  border-color: var(--ids-switch-toggle-off-disabled-border-color);
-  box-shadow: none;
-}
-.ids-switch input[type=checkbox]:disabled ~ .label-text {
-  cursor: var(--ids-cursor-default);
-  color: var(--ids-text-color-disabled);
-}
-.ids-switch input[type=checkbox]:disabled:checked ~ .slider {
-  background-color: var(--ids-switch-pole-on-disabled-background-color);
-  border-color: var(--ids-switch-pole-on-disabled-border-color);
-}
-.ids-switch input[type=checkbox]:disabled:checked ~ .slider::after {
-  border-color: var(--ids-switch-toggle-on-disabled-border-color);
-  background-color: var(--ids-switch-toggle-on-disabled-background-color);
-}
-
-:host([dir=rtl]) input[type=checkbox] ~ .slider {
-  left: initial;
-  right: 0;
-}
-:host([dir=rtl]) input[type=checkbox]:checked ~ .slider::after {
-  left: 0;
-  right: 15px;
-}
-:host([dir=rtl]) input[type=checkbox] ~ .slider::after {
-  left: initial;
-  right: 0;
-}
-:host([dir=rtl]) label {
-  padding-right: 40px;
-  padding-left: 0;
-}