rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

styles: make class names BEM and extract sn-dropdown-item style

Browse Source
This commit is contained in:
Antonella Sgarlatta
2021-05-25 16:09:14 -03:00
parent cdf8f60655
commit eb89fe4a01
5 changed files with 37 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/assets/javascripts/components/NotesOptions.tsx
View File

@@ -52,10 +52,6 @@ export const NotesOptions = observer(
const tagsButtonRef = useRef<HTMLButtonElement>();
const iconClass = 'color-neutral mr-2';
const buttonClass =
'flex items-center border-0 focus:inner-ring-info ' +
'cursor-pointer hover:bg-contrast color-text bg-transparent px-3 ' +
'text-left';
useEffect(() => {
if (onSubmenuChange) {
@@ -144,7 +140,7 @@ export const NotesOptions = observer(
}}
onBlur={closeOnBlur}
ref={tagsButtonRef}
className={`${buttonClass} py-1.5 justify-between`}
className="sn-dropdown-item justify-between"
>
<div className="flex items-center">
<Icon type="hashtag" className={iconClass} />
@@ -169,7 +165,7 @@ export const NotesOptions = observer(
{appState.tags.tags.map((tag) => (
<button
key={tag.title}
className={`${buttonClass} py-2`}
className="sn-dropdown-item sn-dropdown-item--no-icon"
onBlur={closeOnBlur}
onClick={() => {
appState.notes.isTagInSelectedNotes(tag)
@@ -194,7 +190,7 @@ export const NotesOptions = observer(
{unpinned && (
<button
onBlur={closeOnBlur}
className={`${buttonClass} py-1.5`}
className="sn-dropdown-item"
onClick={() => {
appState.notes.setPinSelectedNotes(true);
}}
@@ -206,7 +202,7 @@ export const NotesOptions = observer(
{pinned && (
<button
onBlur={closeOnBlur}
className={`${buttonClass} py-1.5`}
className="sn-dropdown-item"
onClick={() => {
appState.notes.setPinSelectedNotes(false);
}}
@@ -218,7 +214,7 @@ export const NotesOptions = observer(
{unarchived && (
<button
onBlur={closeOnBlur}
className={`${buttonClass} py-1.5`}
className="sn-dropdown-item"
onClick={() => {
appState.notes.setArchiveSelectedNotes(true);
}}
@@ -230,7 +226,7 @@ export const NotesOptions = observer(
{archived && (
<button
onBlur={closeOnBlur}
className={`${buttonClass} py-1.5`}
className="sn-dropdown-item"
onClick={() => {
appState.notes.setArchiveSelectedNotes(false);
}}
@@ -242,7 +238,7 @@ export const NotesOptions = observer(
{notTrashed && (
<button
onBlur={closeOnBlur}
className={`${buttonClass} py-1.5`}
className="sn-dropdown-item"
onClick={async () => {
await appState.notes.setTrashSelectedNotes(true);
}}
@@ -255,7 +251,7 @@ export const NotesOptions = observer(
<>
<button
onBlur={closeOnBlur}
className={`${buttonClass} py-1.5`}
className="sn-dropdown-item"
onClick={async () => {
await appState.notes.setTrashSelectedNotes(false);
}}
@@ -265,7 +261,7 @@ export const NotesOptions = observer(
</button>
<button
onBlur={closeOnBlur}
className={`${buttonClass} py-1.5`}
className="sn-dropdown-item"
onClick={async () => {
await appState.notes.deleteNotesPermanently();
}}
@@ -275,7 +271,7 @@ export const NotesOptions = observer(
</button>
<button
onBlur={closeOnBlur}
className={`${buttonClass} py-1.5`}
className="sn-dropdown-item"
onClick={async () => {
await appState.notes.emptyTrash();
}}

2
app/assets/javascripts/components/SearchOptions.tsx
View File

@@ -63,7 +63,7 @@ const SearchOptions = observer(({ appState }: Props) => {
style={{
top: optionsPanelTop,
}}
className="sn-dropdown sn-dropdown-anchor-right absolute grid gap-2 py-2"
className="sn-dropdown sn-dropdown--anchor-right absolute grid gap-2 py-2"
>
<Switch
className="h-10"

2
app/assets/javascripts/components/Switch.tsx
View File

@@ -42,7 +42,7 @@ export const Switch: FunctionalComponent<SwitchProps> = (
<span
aria-hidden
className={`sn-switch-handle ${
checked ? 'sn-switch-handle-right' : ''
checked ? 'sn-switch-handle--right' : ''
}`}
/>
</CustomCheckboxContainer>

2
app/assets/javascripts/components/Tag.tsx
View File

@@ -10,7 +10,7 @@ export const Tag: FunctionalComponent<TagProps> = ({ title, className }) => (
<span
className={`bg-contrast rounded text-xs color-text p-1 flex items-center ${className ?? ''}`}
>
<Icon type="hashtag" className="small color-neutral mr-1" />
<Icon type="hashtag" className="sn-icon--small color-neutral mr-1" />
{title}
</span>
);

30
app/assets/stylesheets/_sn.scss
View File

@@ -235,11 +235,11 @@
@extend .h-5;
@extend .w-5;
@extend .fill-current;
}
.sn-icon.small {
@extend .h-3\.5 ;
@extend .w-3\.5 ;
&.sn-icon--small {
@extend .h-3\.5 ;
@extend .w-3\.5 ;
}
}
.sn-dropdown {
@@ -253,7 +253,7 @@
z-index: $z-index-dropdown-menu;
&.sn-dropdown-anchor-right {
&.sn-dropdown--anchor-right {
right: 0;
}
@@ -297,7 +297,7 @@
top: 50%;
transform: translate(0px, -50%);
&.sn-switch-handle-right {
&.sn-switch-handle--right {
transform: translate(
calc(2rem - 1.125rem),
-50%
@@ -308,3 +308,21 @@
.sn-component .sk-app-bar .sk-app-bar-item {
justify-content: flex-start;
}
.sn-dropdown-item {
@extend .flex;
@extend .items-center;
@extend .border-0;
@extend .focus\:inner-ring-info;
@extend .cursor-pointer;
@extend .hover\:bg-contrast;
@extend .color-text;
@extend .bg-transparent;
@extend .px-3;
@extend .py-1\.5;
@extend .text-left;
&.sn-dropdown-item--no-icon {
@extend .py-2;
}
}