You need to sign in to do that
Don't have an account?
Abhilash M
I would like to know how to use salesforce lightning design system
I would like to know how to use sldsI am trying to use the salesforce lightning design system for styling my application. I am just copying and pasting the code which are present in slds for various components , Still I am getting an error in my CSS component of my App.
How to use the SCSS of the slds in our App.?
I have referred to the Trailhead, STill I am not able to figure out how to use the styling slds in my app?
For example :I am using the SCSS of forms component here
.slds-input {
@include form-states;
display: inline-block;
padding: 0 $spacing-medium 0 $spacing-small;
line-height: $line-height-button;
min-height: calc(#{$line-height-button} + 2px); /* For IE */
}
.slds-input--small {
@include placeholder($weight: $font-weight-regular);
line-height: $line-height-button-small;
min-height: calc(#{$line-height-button-small} + 2px); /* For IE */
padding: {
left: $spacing-x-small;
right: $spacing-x-small;
}
}
.slds-input--bare {
background-color: transparent;
border: none;
color: $color-text-default;
&:focus,
&:active {
outline: 0;
}
}
.slds-input-has-icon {
position: relative;
.slds-input__icon {
@include square($square-icon-medium-content);
position: absolute;
top: 50%;
margin-top: (($square-icon-medium-content / 2) * -1);
@include deprecate("0.20.0") {
fill: $color-text-icon-default;
}
}
&--left {
.slds-input__icon {
left: $spacing-small;
}
.slds-input,
.slds-input--bare {
padding-left: $spacing-x-large;
}
}
&--right {
.slds-input__icon {
right: $spacing-small;
}
.slds-input,
.slds-input--bare {
padding-right: $spacing-x-large;
}
}
}
what does the @include form-states; refer to ? what is the use in CSS?
How to use the SCSS of the slds in our App.?
I have referred to the Trailhead, STill I am not able to figure out how to use the styling slds in my app?
For example :I am using the SCSS of forms component here
.slds-input {
@include form-states;
display: inline-block;
padding: 0 $spacing-medium 0 $spacing-small;
line-height: $line-height-button;
min-height: calc(#{$line-height-button} + 2px); /* For IE */
}
.slds-input--small {
@include placeholder($weight: $font-weight-regular);
line-height: $line-height-button-small;
min-height: calc(#{$line-height-button-small} + 2px); /* For IE */
padding: {
left: $spacing-x-small;
right: $spacing-x-small;
}
}
.slds-input--bare {
background-color: transparent;
border: none;
color: $color-text-default;
&:focus,
&:active {
outline: 0;
}
}
.slds-input-has-icon {
position: relative;
.slds-input__icon {
@include square($square-icon-medium-content);
position: absolute;
top: 50%;
margin-top: (($square-icon-medium-content / 2) * -1);
@include deprecate("0.20.0") {
fill: $color-text-icon-default;
}
}
&--left {
.slds-input__icon {
left: $spacing-small;
}
.slds-input,
.slds-input--bare {
padding-left: $spacing-x-large;
}
}
&--right {
.slds-input__icon {
right: $spacing-small;
}
.slds-input,
.slds-input--bare {
padding-right: $spacing-x-large;
}
}
}
what does the @include form-states; refer to ? what is the use in CSS?
NOTE: When including code please use the "Add a code sample" button (icon <>) to increase readability and make it easier to reference.