<!-- Input starts -->
<input type="text" class="c-input" placeholder="Placeholder example" value="">
<!-- Input ends -->
<!-- Input starts -->
<input type="text" class="c-input{{#if size}} c-input--{{size}}{{/if}}{{#if mod}} {{mod}}{{/if}}"{{#if inputID}} id="{{inputID}}"{{/if}} placeholder="{{ placeholder }}" value="{{value}}">
<!-- Input ends -->
/* No context defined for this component. */
.c-input--power-select {
min-height: $input-height;
.ember-power-select-trigger {
position: relative;
border-radius: $global-radius;
overflow-x: hidden;
text-overflow: ellipsis;
min-height: $input-height;
padding: $space-xxs $space-md 0 $space-xs;
.ember-power-select-trigger--active,
.ember-power-select-trigger:focus {
border: $input-borders;
}
}
.ember-text-field {
width: 100%;
}
.ember-power-select-multiple-options {
display: flex;
align-items: center;
line-height: 2.3;
overflow-x: auto;
}
.ember-power-select-multiple-option {
display: flex;
align-items: center;
flex-direction: row-reverse;
padding: 0 0 0 $space-xs;
border-radius: $global-radius;
background-color: $color-brand-primary-900;
+ .ember-power-select-multiple-option {
margin-left: $space-xxxs;
}
}
.option-name {
padding-bottom: rem(1);
color: $color-white;
font-size: $text-size-7;
white-space: nowrap;
}
.ember-power-select-multiple-remove-btn {
padding: 0 $space-xs;
color: $color-white;
line-height: 1.8;
cursor: pointer;
opacity: 0.6;
transition: $global-transition;
&:hover {
opacity: 1;
}
}
.ember-power-select-trigger-multiple-input {
height: auto;
border: 0;
padding: 0;
width: 100%;
}
.ember-power-select-trigger-multiple-input:focus {
margin: 0;
padding: 0;
}
.ember-power-select-status-icon {
border-width: rem(7) rem(5) 0;
border-color: $color-grey-400 transparent transparent;
right: $space-xs;
}
.ember-power-select-placeholder,
.ember-power-select-selected-item {
margin: 0;
padding: 0 $space-unit 0 0;
}
.ember-power-select-placeholder {
line-height: 2.2;
}
.ember-power-select-selected-item {
padding: $space-xxxs $space-xs $space-xxxs 0;
}
}
.c-input--power-select--sm {
min-height: auto;
.ember-power-select-trigger {
height: auto;
width: 100%;
padding: 0 $space-xs;
min-height: auto;
display: flex;
align-items: center;
}
.ember-text-field {
height: auto;
padding: $space-xs 0 $space-xs $space-xs;
}
.ember-power-select-placeholder,
.ember-power-select-selected-item {
margin: 0;
padding: 0 $space-unit 0 0;
}
.ember-power-select-selected-item {
padding: 0 $space-unit 0 $space-xs;
}
}
.c-input {
width: 100%;
height: $input-height;
padding: $space-xs;
border: $input-borders;
border-radius: $global-radius;
}
.c-textarea {
width: 100%;
padding: $space-xs;
border: $input-borders;
border-radius: $global-radius;
}
.c-input--sm {
width: auto;
height: auto;
}
.c-input--btn {
width: auto;
height: auto;
min-height: rem(36);
padding: $space-sm $space-xs;
border: rem(1) solid $color-btn-border;
border-right: 0;
border-radius: $global-radius 0 0 $global-radius;
font-size: rem(14);
+ .c-btn {
border-radius: 0 $global-radius $global-radius 0;
}
}
// RANGE INPUT
.c-input-range {
-webkit-appearance: none;
width: 100%;
height: auto;
padding: $space-xs 0;
border: 0;
}
.c-input-range--age {
padding: rem(6) 0 rem(2);
min-height: rem(28);
}
.c-input-range__value {
font-weight: 600;
}
.c-input-range__extra {
display: flex;
justify-content: space-between;
margin-top: -#{$space-xs};
color: $color-grey-600;
font-size: $text-size-7;
}
// INPUT WITH ADD NEW BUTTON
.c-input--add-new {
display: flex;
flex-direction: column;
> .c-btn {
margin-left: auto;
padding: $space-xxxs 0 0;
font-size: $text-size-8;
min-height: auto;
}
}
// Cross-Browser range styles
.c-input-range:focus {
outline: none;
}
.c-input-range::-webkit-slider-runnable-track {
width: 100%;
height: rem(6);
border: 0 solid rgba(0, 0, 0, 0);
border-radius: rem(50);
background: rgba($color-grey-400, 0.78);
box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
cursor: pointer;
}
.c-input-range::-webkit-slider-thumb {
-webkit-appearance: none;
width: rem(20);
height: rem(20);
margin-top: rem(-7);
border: rem(1) solid rgba(0, 0, 0, 0.1);
border-radius: rem(50);
background: $color-grey-0;
box-shadow: rem(1) rem(1) rem(3) rgba(0, 0, 0, 0.5), 0 0 rem(1) rgba(13, 13, 13, 0.5);
cursor: pointer;
}
.c-input-range:focus::-webkit-slider-runnable-track {
background: rgba(234, 234, 234, 0.78);
}
.c-input-range::-moz-range-track {
width: 100%;
height: rem(6);
border: 0 solid rgba(0, 0, 0, 0);
border-radius: rem(50);
background: rgba($color-grey-400, 0.78);
box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
cursor: pointer;
}
.c-input-range::-moz-range-thumb {
width: rem(20);
height: rem(20);
border: rem(1) solid rgba(0, 0, 0, 0.1);
border-radius: rem(50);
background: $color-grey-0;
box-shadow: rem(1) rem(1) rem(3) rgba(0, 0, 0, 0.5), 0 0 rem(1) rgba(13, 13, 13, 0.5);
cursor: pointer;
}
.c-input-range::-ms-track {
width: 100%;
height: rem(6);
border-color: transparent;
background: transparent;
color: transparent;
cursor: pointer;
}
.c-input-range::-ms-fill-lower {
border: 0 solid rgba(0, 0, 0, 0);
border-radius: rem(50);
background: rgba(122, 122, 122, 0.78);
box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
}
.c-input-range::-ms-fill-upper {
border: 0 solid rgba(0, 0, 0, 0);
border-radius: rem(50);
background: rgba($color-grey-400, 0.78);
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.c-input-range::-ms-thumb {
width: rem(20);
height: rem(20);
height: rem(6);
border: rem(1) solid rgba(0, 0, 0, 0.1);
border-radius: rem(50);
background: $color-grey-0;
box-shadow: rem(1) rem(1) rem(3) rgba(0, 0, 0, 0.5), 0 0 rem(1) rgba(13, 13, 13, 0.5);
cursor: pointer;
}
.c-input-range:focus::-ms-fill-lower {
background: rgba($color-grey-400, 0.78);
}
.c-input-range:focus::-ms-fill-upper {
background: rgba($color-grey-400, 0.78);
}
// Quantity fix column input
.c-input--qty {
width: rem(100);
text-align: center;
}
.c-sub-options,
.o-sub-details {
padding: $space-unit;
border-radius: $global-radius;
background-color: lighten($color-grey-100, 1%);
border: rem(1) solid $color-grey-300;
}
There are no notes for this item.