mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-30 16:18:07 +01:00
eb4f051b23
* parentd89e5336a6author georgewrmarshall <george.marshall@consensys.net> 1636692862 -0800 committer hmalik88 <hassan.malik@consensys.net> 1637342043 -0500 Initial SnapSettingsCard component Updates to styles but having specificity issues so increased specificity Updates to styles but having specificity issues so increased specificity added overflow fix and added tests lockfile update prettier fix added stylelint ignore yarn.lock fixed * merge conflict fix * package/yarn fix * fixed package.json * updated lockfile... * removed comment * removed unnecessary key/val for chip status indicator color * bumped lattice to 0.4.0 in package json, fixed yarn lock * removed dupe entry in yarn lock * ran yarn setup to update lock file * updated chip label prop * parentd89e5336a6author georgewrmarshall <george.marshall@consensys.net> 1636692862 -0800 committer hmalik88 <hassan.malik@consensys.net> 1637342043 -0500 Initial SnapSettingsCard component Updates to styles but having specificity issues so increased specificity Updates to styles but having specificity issues so increased specificity added overflow fix and added tests lockfile update prettier fix added stylelint ignore yarn.lock fixed * merge conflict fix * package/yarn fix * fixed package.json * updated lockfile... * removed comment * bumped lattice to 0.4.0 in package json, fixed yarn lock * removed dupe entry in yarn lock * ran yarn setup to update lock file * Using IconWithFallback instead of SiteIcon, fixing icon prop, and adding status story and docs page * Updating to follow storybook folder convention * Updates to styles * Adding localization * added todo comment Co-authored-by: hmalik88 <hassan.malik@consensys.net>
58 lines
1.1 KiB
SCSS
58 lines
1.1 KiB
SCSS
$version-max-width: 56px; // Increase to show more of the version number
|
|
$body-line-clamp: 4; // Number of lines in card body before truncating
|
|
|
|
.snap-settings-card {
|
|
&__title {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
&__toggle-container {
|
|
margin-left: auto;
|
|
|
|
&__toggle-button {
|
|
margin-right: -12px; // react-toggle-button width fix
|
|
}
|
|
}
|
|
|
|
&__body {
|
|
overflow: hidden;
|
|
/* stylelint-disable */
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: $body-line-clamp;
|
|
-webkit-box-orient: vertical;
|
|
/* stylelint-enable */
|
|
}
|
|
|
|
&__version.box {
|
|
margin-left: auto;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
min-width: $version-max-width;
|
|
flex: 0 0 $version-max-width;
|
|
text-align: right;
|
|
}
|
|
|
|
&__chip.chip {
|
|
margin: 0;
|
|
margin-left: auto;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
&__button.button {
|
|
padding: 4px 16px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
&__date-added {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|