Changeset View
Changeset View
Standalone View
Standalone View
web/modals/apps/apps.css
| div.appsDirectoryContainer { | div.appsDirectoryContainer { | ||||
| display: flex; | display: flex; | ||||
| flex-direction: column; | flex-direction: column; | ||||
| align-items: flex-start; | padding-top: 34px; | ||||
| padding-bottom: 16px; | |||||
| } | } | ||||
| h4.appsHeader { | h4.appsHeader { | ||||
| color: var(--fg); | color: var(--fg); | ||||
| padding: 20px 0 40px 40px; | padding: 20px 0 40px 40px; | ||||
| font-weight: var(--semi-bold); | font-weight: var(--semi-bold); | ||||
| } | } | ||||
| div.appsDirectoryList { | div.appsDirectoryList { | ||||
| margin-left: 20px; | |||||
| display: flex; | display: flex; | ||||
| flex-direction: column; | flex-direction: column; | ||||
| row-gap: 10px; | row-gap: 16px; | ||||
| width: 100%; | |||||
| box-sizing: border-box; | |||||
| padding: 12px 32px; | |||||
| } | } | ||||
| div.appListingContainer { | div.appListingContainer { | ||||
| color: var(--fg); | color: var(--fg); | ||||
| display: flex; | display: flex; | ||||
| flex-direction: row; | flex-direction: row; | ||||
| align-items: center; | align-items: space-between; | ||||
| } | } | ||||
| div.appListingTextContainer { | div.appListingTextContainer { | ||||
| display: flex; | display: flex; | ||||
| flex-direction: column; | flex-direction: column; | ||||
| flex: 1; | flex: 1; | ||||
| } | } | ||||
| h5.appName { | h5.appName { | ||||
| font-weight: var(--semi-bold); | font-weight: var(--semi-bold); | ||||
| margin-bottom: 4px; | margin-bottom: 4px; | ||||
| } | } | ||||
| small.appCopy { | small.appCopy { | ||||
| font-size: var(--xs-font-12); | font-size: var(--xs-font-12); | ||||
| } | } | ||||
| div.appListingIcon { | .appListingIcon { | ||||
| padding: 0 20px; | padding: 0 20px 0 0; | ||||
| align-self: stretch; | align-self: stretch; | ||||
| display: flex; | display: flex; | ||||
| align-items: center; | align-items: center; | ||||
| } | } | ||||
| .appListingIconState { | .appListingIconState { | ||||
| padding: 0 20px; | padding: 0 0 0 20px; | ||||
| font-size: var(--xl-font-20); | font-size: var(--xl-font-20); | ||||
| } | } | ||||
| div.iconReadOnly { | div.iconReadOnly { | ||||
| color: var(--app-list-icon-read-only-color); | color: var(--app-list-icon-read-only-color); | ||||
| } | } | ||||
| .iconEnabled { | .iconEnabled { | ||||
| color: var(--app-list-icon-enabled-color); | color: var(--app-list-icon-enabled-color); | ||||
| } | } | ||||
| .iconDisabled { | .iconDisabled { | ||||
| color: var(--app-list-icon-disabled-color); | color: var(--app-list-icon-disabled-color); | ||||
| } | } | ||||