<div class="input-group">
<input
type="text" id="displayName" i18n-placeholder placeholder="Example: John Doe"
- formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
+ formControlName="displayName" class="form-control" [ngClass]="{ 'input-error': formErrors['displayName'] }"
>
</div>
align-items: center;
.upload-icon {
- @include apply-svg-color($input-border-color);
+ @include apply-svg-color(pvar(--inputBorderColor));
width: 90px;
margin-bottom: 25px;
width: $markdown-icon-width;
svg {
- color: $input-border-color;
- fill: $input-border-color;
+ color: pvar(--inputBorderColor);
+ fill: pvar(--inputBorderColor);
border-radius: 3px;
}
}
&:active,
&:hover {
my-global-icon svg {
- background-color: $input-border-color;
+ background-color: pvar(--inputBorderColor);
color: pvar(--mainBackgroundColor);
fill: pvar(--mainBackgroundColor);
}
.nav-preview {
padding: 10px;
- border: 1px solid $input-border-color;
- border-top: 1px dashed $input-border-color;
+ border: 1px solid pvar(--inputBorderColor);
+ border-top: 1px dashed pvar(--inputBorderColor);
border-bottom-right-radius: $input-border-radius;
border-bottom-left-radius: $input-border-radius;
overflow-y: auto;
word-wrap: break-word;
- border: 1px solid $input-border-color;
+ border: 1px solid pvar(--inputBorderColor);
border-top: 0;
border-bottom-left-radius: $input-border-radius;
grid-column: 1;
border: 0;
- border-right: 1px dashed $input-border-color;
+ border-right: 1px dashed pvar(--inputBorderColor);
resize: none;
}
grid-row: 2;
grid-column: 1;
border: 0;
- border-bottom: 1px dashed $input-border-color;;
+ border-bottom: 1px dashed pvar(--inputBorderColor);;
}
::ng-deep .tab-content {
<svg xmlns="http://www.w3.org/2000/svg" transform="scale(1.2)" viewBox="0 0 200 200">
<defs/>
- <path stroke="currentColor" stroke-width="3" d="M93 155H42a18 18 0 01-18-18V29a5 5 0 015-5h89a5 5 0 015 6L98 151a5 5 0 01-5 4zM34 34v103a8 8 0 008 8h47l22-111z"/>
- <path stroke="currentColor" stroke-width="3" d="M171 176H75a5 5 0 01-5-6l4-21a5 5 0 0110 2l-3 15h85V63a8 8 0 00-8-8h-45a5 5 0 010-10h45a18 18 0 0118 18v108a5 5 0 01-5 5zM50 92h0a5 5 0 01-5-5V63a17 17 0 0135 0v24a5 5 0 01-10 0V62a7 7 0 00-15 0v25a5 5 0 01-5 5z"/>
- <path stroke="currentColor" stroke-width="3" d="M75 76H50a5 5 0 010-10h25a5 5 0 010 10zM120 155a5 5 0 01-3-9l21-21h-18a5 5 0 010-10h30a5 5 0 014 9l-30 30a5 5 0 01-4 1z"/>
- <path stroke="currentColor" stroke-width="3" d="M150 155a5 5 0 01-4-1l-14-15a5 5 0 017-7l15 14a5 5 0 01-4 9zM143 110h-15a5 5 0 110-10h15a5 5 0 010 10z"/>
+ <path stroke="currentColor" fill="currentColor" stroke-width="3" d="M93 155H42a18 18 0 01-18-18V29a5 5 0 015-5h89a5 5 0 015 6L98 151a5 5 0 01-5 4zM34 34v103a8 8 0 008 8h47l22-111z"/>
+ <path stroke="currentColor" fill="currentColor" stroke-width="3" d="M171 176H75a5 5 0 01-5-6l4-21a5 5 0 0110 2l-3 15h85V63a8 8 0 00-8-8h-45a5 5 0 010-10h45a18 18 0 0118 18v108a5 5 0 01-5 5zM50 92h0a5 5 0 01-5-5V63a17 17 0 0135 0v24a5 5 0 01-10 0V62a7 7 0 00-15 0v25a5 5 0 01-5 5z"/>
+ <path stroke="currentColor" fill="currentColor" stroke-width="3" d="M75 76H50a5 5 0 010-10h25a5 5 0 010 10zM120 155a5 5 0 01-3-9l21-21h-18a5 5 0 010-10h30a5 5 0 014 9l-30 30a5 5 0 01-4 1z"/>
+ <path stroke="currentColor" fill="currentColor" stroke-width="3" d="M150 155a5 5 0 01-4-1l-14-15a5 5 0 017-7l15 14a5 5 0 01-4 9zM143 110h-15a5 5 0 110-10h15a5 5 0 010 10z"/>
</svg>
--inputForegroundColor: #{$input-foreground-color};
--inputBackgroundColor: #{$input-background-color};
--inputPlaceholderColor: #{$input-placeholder-color};
+ --inputBorderColor: #{$input-border-color};
--textareaForegroundColor: #{$textarea-foreground-color};
--textareaBackgroundColor: #{$textarea-background-color};
// ---------------------------------------------------------------------------
.dropdown-menu {
- color: pvar(--mainForegroundColor);
- background-color: pvar(--mainBackgroundColor);
-
.dropdown-header {
@include padding-left(1rem);
}
.dropdown-item {
+ color: pvar(--mainForegroundColor);
padding: 3px 15px;
&.active {
}
.btn-outline-secondary {
- border-color: $input-border-color;
+ border-color: pvar(--inputBorderColor);
&:focus-within,
&:focus,
}
.form-control-clear {
- color: rgba(0, 0, 0, 0.4);
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
position: absolute;
right: .5rem;
+ opacity: 0.4;
&:hover {
- color: rgba(0, 0, 0, 0.7);
+ opacity: 0.7;
cursor: pointer;
}
}
$dropdown-border-radius: 3px;
$dropdown-link-active-color: pvar(--mainForegroundColor);
$dropdown-link-active-bg: pvar(--mainBackgroundHoverColor);
+$dropdown-link-hover-color: pvar(--mainForegroundColor);
+$dropdown-link-hover-bg: pvar(--mainBackgroundHoverColor);
+$dropdown-color: pvar(--mainForegroundColor);
+$dropdown-bg: pvar(--mainBackgroundColor);
+$accordion-color: pvar(--mainForegroundColor);
+$accordion-bg: pvar(--mainBackgroundColor);
$accordion-button-active-bg: pvar(--mainColorVeryLight);
$accordion-button-active-color: pvar(--mainForegroundColor);
$accordion-button-focus-border-color: pvar(--mainColorLightest);
$accordion-button-focus-box-shadow: 0 0 0 .15rem pvar(--mainColorLightest);
+$accordion-border-color: pvar(--inputBorderColor);
+
+$input-group-addon-color: pvar(--mainForegroundColor);
max-width: $width;
color: pvar(--inputForegroundColor);
background-color: pvar(--inputBackgroundColor);
- border: 1px solid $input-border-color;
+ border: 1px solid pvar(--inputBorderColor);
border-radius: 3px;
font-size: $form-input-font-size;
line-height: $form-input-line-height;
&.disabled {
cursor: default;
color: #fff;
- background-color: $input-border-color;
+ background-color: pvar(--inputBorderColor);
}
my-global-icon {
&.disabled {
cursor: default;
color: pvar(--mainColor);
- background-color: $input-border-color;
+ background-color: pvar(--inputBorderColor);
}
my-global-icon {
select {
padding: 0 35px 0 12px;
position: relative;
- border: 1px solid $input-border-color;
+ border: 1px solid pvar(--inputBorderColor);
background: transparent none;
appearance: none;
height: $button-height;
top: 0;
width: 18px;
height: 18px;
- border: 1px solid $input-border-color;
+ border: 1px solid pvar(--inputBorderColor);
border-radius: 100%;
background: #fff;
}
width: 18px;
min-width: 18px;
height: 18px;
- border: $border-width solid $input-border-color;
+ border: $border-width solid pvar(--inputBorderColor);
border-radius: 3px;
vertical-align: middle;
cursor: pointer;
margin-bottom: 20px;
@if $separator {
- border-bottom: 1px solid $input-border-color;
+ border-bottom: 1px solid pvar(--inputBorderColor);
}
@media screen and (max-width: $small-view) {
$menu-background: #000;
$menu-color: #fff;
-$menu-bottom-color: #C6C6C6;
$menu-width: 240px;
$menu-lateral-padding: 26px;
--inputForegroundColor: var(--inputForegroundColor),
--inputBackgroundColor: var(--inputBackgroundColor),
--inputPlaceholderColor: var(--inputPlaceholderColor),
+ --inputBorderColor: var(--inputBorderColor),
--textareaForegroundColor: var(--textareaForegroundColor),
--textareaBackgroundColor: var(--textareaBackgroundColor),
}
}
+ .p-dropdown,
+ .p-dropdown-trigger {
+ color: pvar(--mainForegroundColor);
+ background-color: pvar(--mainBackgroundColor);
+ }
+
.p-paginator-current {
position: absolute;
right: 0;