Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SLDS+ Updates (Kondo/Cosmo) #7275

Draft
wants to merge 5 commits into
base: feature/256
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@
<aura:if isTrue="{!greaterthan(v.batchInfo.recordCount,0)}">
<lightning:layout horizontalAlign="center">
<lightning:layoutItem size="12" class="slds-grid slds-grid_align-center slds-p-bottom_medium">
<div class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_warning" role="alert">
<div class="slds-notify_alert slds-theme_warning" role="alert">
<span class="slds-assistive-text">{!$Label.c.PageMessagesWarning}</span>
<lightning:icon iconName="utility:warning" alternativeText="warning" class="iconContainer"/>
<h2>
Expand Down Expand Up @@ -169,7 +169,7 @@
<aura:if isTrue="{!greaterthan(v.batchInfo.recordCount,0)}">
<lightning:layout horizontalAlign="center">
<lightning:layoutItem size="12" class="slds-grid slds-grid_align-center slds-p-bottom_medium">
<div class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_warning" role="alert">
<div class="slds-notify_alert slds-theme_warning" role="alert">
<span class="slds-assistive-text">{!$Label.c.PageMessagesWarning}</span>
<lightning:icon iconName="utility:warning" alternativeText="warning" class="iconContainer"/>
<h2>
Expand Down Expand Up @@ -269,7 +269,7 @@
<aura:if isTrue="{!greaterthan(v.batchInfo.recordCount,0)}">
<lightning:layout horizontalAlign="center">
<lightning:layoutItem size="12" class="slds-grid slds-grid_align-center slds-p-bottom_medium">
<div class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_warning" role="alert">
<div class="slds-notify_alert slds-theme_warning" role="alert">
<span class="slds-assistive-text">{!$Label.c.PageMessagesWarning}</span>
<lightning:icon iconName="utility:warning" alternativeText="warning" class="iconContainer"/>
<h2>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.THIS.slds-tabs_card {
background: white;
background: var(--slds-g-color-disabled-container-1, white);
}

/*link-like behaviors*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,12 @@

/*color for selected card border*/
.THIS .selectedDonationCard {
border: 2px solid rgb(21, 137, 238);
border: var(--slds-g-radius-border-1, 2px) solid var(--slds-g-color-brand-base-60, rgb(21, 137, 238));
}

/*shade selected check icon*/
.THIS .selectedCheckmark > lightning-primitive-icon > svg {
fill: rgb(21, 137, 238);
fill: var(--slds-g-color-accent-1, rgb(21, 137, 238));
}

/*prevent card header from truncating long opp or payment names*/
Expand Down
2 changes: 1 addition & 1 deletion force-app/main/default/aura/CRLP_Rollup/CRLP_Rollup.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
/*margin is for view mode indentation*/
.THIS .slds-form-element__label{
margin-left: .5rem;
font-size: 13px;
font-size: var(--slds-g-font-size-base, 13px);
}
.THIS .slds-form-element__icon{
margin-left: .2rem;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@

<!--START TOAST-->
<div class="slds-notify_container slds-float_left">
<div class="{! 'slds-notify slds-notify_toast slds-theme_' + v.toastStatus + ' ' + v.toastHideClass}"
<div class="{! 'slds-notify_toast slds-theme_' + v.toastStatus + ' ' + v.toastHideClass}"
role="alert">
<lightning:icon iconName="{!'utility:' + v.toastStatus}" class="slds-p-right_small" variant="inverse"
size="small" alternativeText="{!v.notificationText.alternativeText}"/>
Expand Down Expand Up @@ -127,7 +127,7 @@
<!-- START ACCESS DISABLED MESSAGE -->
<aura:if isTrue="{! !and(v.isCRLPEnabled, v.isSystemAdminUser)}">
<div class="slds-p-around_medium">
<div class="slds-notify slds-notify_toast slds-theme_warning">
<div class="slds-notify_toast slds-theme_warning">
<lightning:icon iconName="utility:block_visitor" class="slds-p-right_small" variant="inverse"
size="small" alternativeText="{!v.notificationText.alternativeText}"/>
<div class="slds-notify__content">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
padding: .25em 0em .25em 0em;
line-height: 19.5px;
text-align: left;
font-size: 13px;
font-size: var(--slds-g-font-size-base, 13px);
background-color: transparent;
}
/*lightning table links hover*/
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.THIS li.selected {
background-color: token(colorBackgroundRowSelected);
background-color: var(--slds-s-table-row-color-background-selected, token(colorBackgroundRowSelected));
}

.THIS .slds-modal__container {
Expand Down
34 changes: 14 additions & 20 deletions force-app/main/default/aura/HH_AutoComplete/HH_AutoComplete.cmp
Original file line number Diff line number Diff line change
Expand Up @@ -29,27 +29,21 @@
</aura:set>

<aura:set attribute="listFooter">
<div class="slds-lookup__item">
<ul class="slds-lookup__list">
<li id="newContact" class="slds-lookup__item" tabindex="0" onclick="{!c.handleNewContact}" onkeydown="{!c.handleKeyPress}" role="listitem" data-qa-locator="newContact">
<span role="option">
<div class="slds-media slds-tile slds-hint-parent">
<div class="slds-media__figure">
<lightning:icon iconName="utility:add"
class="slds-icon_x-small" size="small"/>
</div>
<div class="slds-media__body">
<div class="slds-tile__detail slds-text-body_small">
<ul>
<li><ui:outputText value="{!$Label.npo02.NewContact}" /></li>
</ul>
</div>
</div>
<li id="newContact" class="slds-listbox__item" tabindex="0" onclick="{!c.handleNewContact}" onkeydown="{!c.handleKeyPress}" role="listitem" data-qa-locator="newContact">
<span role="option">
<div class="slds-media slds-tile slds-hint-parent slds-listbox__option slds-listbox__option_entity">
<div class="slds-media__figure slds-listbox__option-icon">
<lightning:icon iconName="utility:add"
class="slds-media__figure slds-listbox__option-icon slds-icon_container" size="small"/>
</div>
<div class="slds-media__body">
<div class="slds-text-body_small slds-listbox__option-text slds-listbox__option-text_entity">
<ui:outputText value="{!$Label.npo02.NewContact}" />
</div>
</span>
</li>
</ul>
</div>
</div>
</div>
</span>
</li>
</aura:set>

<aura:set attribute="loadingIndicator">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<aura:component extends="c:autocompleteOption" >
<aura:registerEvent name="keypressEvent" type="c:HH_KeypressEvent"/>
<aura:handler event="c:HH_NewFocussedElement" action="{!c.handleNewFocussedElement}"/>
<li class="slds-lookup__item" role="listitem" tabindex="0" onkeydown="{!c.handleKeyPress}" id="{!v.value.Id}" onclick="{!c.handleClick}" data-qa-locator="{!'Add ' + v.value.Name}">
<li class="slds-listbox__item" role="listitem" tabindex="0" onkeydown="{!c.handleKeyPress}" id="{!v.value.Id}" onclick="{!c.handleClick}" data-qa-locator="{!'Add ' + v.value.Name}">
<span role="option">
<div class="slds-media slds-tile slds-hint-parent">
<div class="slds-media__figure">
<div class="slds-media slds-tile slds-hint-parent slds-listbox__option slds-listbox__option_entity">
<div class="slds-media__figure slds-listbox__option-icon">
<lightning:icon iconName="{!'standard:' + (!empty(v.value.HHId__c) ? 'household' : 'contact')}"
class="slds-icon_small" size="small"/>
</div>
Expand All @@ -15,7 +15,7 @@
class="slds-shrink-none" size="large"
alternativeText="{!$Label.npo02.Add + ' ' + v.value.Name}" ariaLabel="{!$Label.npo02.Add + ' ' + v.value.Name}" />
</div>
<div class="slds-tile__detail slds-text-body_small">
<div class="slds-tile__detail slds-text-body_small slds-listbox__option-text slds-listbox__option-text_entity">
<ul>
<aura:if isTrue="{!v.value.npo02__Household__r.Name != null}" >
<li>{!v.value.npo02__Household__r.Name}</li>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.THIS .removeBtn:hover, .THIS .removeBtn:focus, .THIS .removeBtn.is-selected {
background: none;
border: 0;
border: none;
}
2 changes: 1 addition & 1 deletion force-app/main/default/aura/HH_Container/HH_Container.cmp
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@
<div class="slds-p-bottom_small">
<div class="slds-grid">
<div class="slds-col slds-text-heading_label slds-p-around_x-small">{!$Label.npo02.HouseholdMembers}</div>
<div class="slds-col slds-text-align_right slds-p-around_x-small">
<div class="slds-col slds-p-around_x-small">
<!-- the autocomplete component for finding and adding contacts -->
<c:HH_AutoComplete aura:id="HHAutoComplete" hhId="{!v.hhId}"
namespacePrefix="{!v.namespacePrefix}"
Expand Down
4 changes: 2 additions & 2 deletions force-app/main/default/aura/HH_Container/HH_Container.css
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,6 @@

.THIS .required {
padding-left: 2px;
color: red;
font-weight: 700;
color: var(--slds-g-color-error-base-50, red);
font-weight: bold;
}
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@
}
.THIS .disabledEdit {
pointer-events: none;
color: #706e6b;
color: var(--slds-g-color-on-surface-1, #706e6b);
cursor: default;
}
.THIS .styleButton:disabled {
color: #706e6b;
color: var(--slds-g-color-on-surface-1, #706e6b);
}
.THIS .activeIcon svg {
fill: #006dcc;
fill: var(--slds-g-color-accent-2, #006dcc);
}
.THIS .successIcon svg {
fill: rgb(94, 180, 255);
fill: var(--slds-g-color-brand-base-70, rgb(94, 180, 255));
}
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
}
.THIS .disabledEdit {
pointer-events: none;
color: #706e6b;
color: var(--slds-g-color-on-surface-1, #706e6b);
cursor: default;
}
.THIS .activeIcon svg {
fill: #006dcc;
fill: var(--slds-g-color-accent-2, #006dcc);
}
42 changes: 23 additions & 19 deletions force-app/main/default/aura/autocomplete/autocomplete.cmp
Original file line number Diff line number Diff line change
Expand Up @@ -33,39 +33,43 @@
<aura:registerEvent name="newFocussedElement" type="c:HH_NewFocussedElement"/>
<aura:registerEvent name="reachFooter" type="c:HH_ReachFooter"/>

<div class="slds" aura:id="autocomplete">
<div class="slds-combobox_container" aura:id="autocomplete">
<div
class="{!'slds-lookup ' + (and(!empty(v.value), !empty(v.displayValue)) ? 'slds-has-selection' : '')}"
class="{!'' + (and(!empty(v.value), !empty(v.displayValue)) ? 'slds-has-selection' : '')}"
data-select="single"
data-scope="single"
data-typeahead="true">
<div class="slds-form-element">
<div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click">
<aura:if isTrue="{!!empty(v.label)}">
<span class="slds-form-element__label slds-float_left" id="inputLabel" >{!v.label}</span>
</aura:if>
<div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right" onfocusin="{!c.handleFocusInput}" aria-labelledby="inputLabel">
<lightning:icon iconName="utility:search"
class="slds-input__icon slds-icon-text-default" size="x-small"/>
<ui:inputText aura:id="input"
class="{!'slds-input ' + (and(!empty(v.value), !empty(v.displayValue)) ? 'slds-hide' : '')}"
class="{!'slds-combobox__input slds-input ' + (and(!empty(v.value), !empty(v.displayValue)) ? 'slds-hide' : '')}"
placeholder="{!v.placeholder}"
value="{!v.displayValue}"
updateOn="keyup"
keyup="{!c.handleKeypressOnInput}"
/>
<span class="slds-icon_container slds-icon-utility-search slds-input__icon slds-input__icon_right">
<lightning:icon iconName="utility:search"
class="slds-icon slds-icon slds-icon_x-small slds-icon-text-default"
size="x-small"
/>
</span>
</div>
</div>

<div class="{!'slds-lookup__menu' + (v.isListVisible ? ' slds-show' : ' slds-hide')}" role="listbox" aura:id="list" tabindex="-1" onfocusin="{!c.handleListFocus}" onfocusout="{!c.handleListBlur}" onfocus="{!c.handleListFocus}" onblur="{!c.handleListBlur}">
<aura:if isTrue="{!v.showListHeader}">
<div class="slds-lookup__item">
<span>
<lightning:icon iconName="utility:search" class="slds-icon-text-default" size="small"/>
&quot;{!v.keyword}&quot; {!if(!empty(v.searchContext), v.searchContext, '')}
</span>
</div>
</aura:if>
<ul aura:id="ullist" tabindex="-1" class="slds-lookup__list">
<div class="{!'slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid' + (v.isListVisible ? ' slds-show' : ' slds-hide')}" role="listbox" aura:id="list" tabindex="-1" onfocusin="{!c.handleListFocus}" onfocusout="{!c.handleListBlur}" onfocus="{!c.handleListFocus}" onblur="{!c.handleListBlur}">
<ul aura:id="ullist" tabindex="-1" class="slds-listbox slds-listbox_vertical">
<aura:if isTrue="{!v.showListHeader}">
<li class="slds-listbox__item">
<span class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_term">
<lightning:icon iconName="utility:search" class="slds-media__figure slds-listbox__option-icon" size="small"/>
&quot;{!v.keyword}&quot; {!if(!empty(v.searchContext), v.searchContext, '')}
</span>
</li>
</aura:if>
<aura:if isTrue="{!v.showLoadingIndicator}">
{!v.loadingIndicator}
</aura:if>
Expand All @@ -75,10 +79,10 @@
{!v.emptyListContent}
</aura:set>
</aura:if>
<aura:if isTrue="{!v.showListFooter}">
{!v.listFooter}
</aura:if>
</ul>
<aura:if isTrue="{!v.showListFooter}">
{!v.listFooter}
</aura:if>
</div>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<aura:registerEvent name="optionSelected" type="c:autocompleteSelectListOption"/>

<aura:attribute name="body" type="Aura.Component[]">
<li class="slds-lookup__item">
<li class="slds-listbox__item">
<ui:button class="slds-button" press="{!c.handleClick}">
<aura:if isTrue="{!and(!empty(v.iconSprite), !empty(v.iconName))}">
<lightning:icon iconName="{!v.iconSprite + ':' + v.iconName}" size="small"/>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
.THIS .errorFont {
color: #C23934;
color: var(--slds-g-color-error-1, #C23934);
}
14 changes: 7 additions & 7 deletions force-app/main/default/lwc/bdiFieldMappings/bdiFieldMappings.css
Original file line number Diff line number Diff line change
@@ -1,29 +1,29 @@
.slds-text-heading_medium_extension, .slds-text-heading_small_extension {
font-weight: 400;
font-weight: normal;
font-family: "Salesforce Sans";
}

.slds-text_extension {
color: #080707;
color: var(--slds-g-color-on-success-2, #080707);
font-family: "Salesforce Sans";
font-size: 13px;
font-size: var(--slds-g-font-size-base, 13px);
line-height: 20px;
}

.table-header {
color: #080707;
color: var(--slds-g-color-on-success-2, #080707);
font-family: "Salesforce Sans";
font-size: 14px;
font-size: var(--slds-g-font-scale-1, 14px);
line-height: 21px;
}

.table-header_source {
border-bottom: 2px solid black;
border-bottom: var(--slds-g-radius-border-1, 2px) solid var(--slds-g-color-neutral-base-10, black);
margin-right: 4rem;
}

.table-header_target {
border-bottom: 2px solid black;
border-bottom: var(--slds-g-radius-border-1, 2px) solid var(--slds-g-color-neutral-base-10, black);
margin-left: 1.75rem;
margin-right: 3rem;
}
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
.slds-button_extension-back {
height: 40px;
color: #006DCC;
color: var(--slds-g-color-accent-2, #006DCC);
font-family: "Salesforce Sans";
font-size: 13px;
font-size: var(--slds-g-font-size-base, 13px);
line-height: 40px;
font-weight: 300;
font-weight: normal;
}

.slds-text-heading_medium_extension, .slds-text-heading_small_extension {
font-weight: 400;
font-weight: normal;
font-family: "Salesforce Sans";
}

.slds-text_extension {
color: #080707;
color: var(--slds-g-color-on-success-2, #080707);
font-family: "Salesforce Sans";
font-size: 13px;
font-size: var(--slds-g-font-size-base, 13px);
line-height: 20px;
}

.table-header {
color: #080707;
color: var(--slds-g-color-on-success-2, #080707);
font-family: "Salesforce Sans";
font-size: 14px;
font-size: var(--slds-g-font-scale-1, 14px);
line-height: 21px;
}

Expand All @@ -31,7 +31,7 @@
}

.table-no-field-mappings {
background-color: rgb(250, 250, 249);
background-color: var(--slds-g-color-disabled-container-1, rgb(250, 250, 249));
}

.custom-col {
Expand Down
Loading
Loading