Improve CommentCreate style on mobile view

2022-02-02 09:47:04 -03:00 · 2022-02-02 09:47:04 -03:00 · 55e0a7effe
commit 55e0a7effe
parent c1b84368a9
11 changed files with 344 additions and 207 deletions
--- a/ui/component/commentCreate/view.jsx
+++ b/ui/component/commentCreate/view.jsx
@ -494,6 +494,19 @@ export function CommentCreate(props: Props) {
            name={isReply ? 'create__reply' : 'create__comment'}
            onChange={(e) => setCommentValue(SIMPLE_SITE || !advancedEditor || isReply ? e.target.value : e)}
            openEmoteMenu={() => setShowEmotes(!showEmotes)}
+            handleTip={(isLBC) =>
+              doOpenModal(MODALS.SEND_TIP, {
+                uri,
+                isTipOnly: true,
+                hasSelectedTab: isLBC ? TAB_LBC : TAB_FIAT,
+                setAmount: (amount) => {
+                  setTipAmount(amount);
+                  setReviewingSupportComment(true);
+                },
+              })
+            }
+            handleSubmit={handleCreateComment}
+            noEmojis={isMobile}
            placeholder={__('Say something about this...')}
            quickActionHandler={!SIMPLE_SITE ? () => setAdvancedEditor(!advancedEditor) : undefined}
            quickActionLabel={
@ -526,195 +539,197 @@ export function CommentCreate(props: Props) {
      )}

      {/* Bottom Action Buttons */}
-      <div className="section__actions section__actions--no-margin">
-        {/* Submit Button */}
-        {isReviewingSupportComment ? (
-          <Button
-            autoFocus
-            button="primary"
-            disabled={disabled || !minAmountMet}
-            label={
-              isSubmitting
-                ? __('Sending...')
-                : commentFailure && tipAmount === successTip.tipAmount
-                ? __('Re-submit')
-                : __('Send')
-            }
-            onClick={handleSupportComment}
-          />
-        ) : isReviewingStickerComment && selectedSticker ? (
-          <Button
-            button="primary"
-            label={__('Send')}
-            disabled={(isSupportComment && (tipError || disableReviewButton)) || disableInput}
-            onClick={() => {
-              if (isSupportComment) {
-                handleSupportComment();
-              } else {
-                handleCreateComment();
-              }
-              setSelectedSticker(null);
-              setReviewingStickerComment(false);
-              setStickerSelector(false);
-              setIsSupportComment(false);
-            }}
-          />
-        ) : isSupportComment ? (
-          <Button
-            disabled={disabled || tipError || disableReviewButton || !minAmountMet}
-            type="button"
-            button="primary"
-            icon={activeTab === TAB_LBC ? ICONS.LBC : ICONS.FINANCE}
-            label={__('Review')}
-            onClick={() => setReviewingSupportComment(true)}
-            requiresAuth
-          />
-        ) : (
-          (!minTip || claimIsMine) && (
+      {!isMobile && (
+        <div className="section__actions section__actions--no-margin">
+          {/* Submit Button */}
+          {isReviewingSupportComment ? (
            <Button
-              ref={buttonRef}
+              autoFocus
              button="primary"
-              disabled={disabled || stickerSelector}
-              type="submit"
+              disabled={disabled || !minAmountMet}
              label={
-                isReply
-                  ? isSubmitting
-                    ? __('Replying...')
-                    : __('Reply')
-                  : isSubmitting
-                  ? __('Commenting...')
-                  : __('Comment --[button to submit something]--')
+                isSubmitting
+                  ? __('Sending...')
+                  : commentFailure && tipAmount === successTip.tipAmount
+                  ? __('Re-submit')
+                  : __('Send')
              }
-              requiresAuth
-              onClick={() => activeChannelClaim && commentValue.length && handleCreateComment()}
+              onClick={handleSupportComment}
            />
-          )
-        )}
-
-        {/** Stickers/Support Buttons **/}
-        {!supportDisabled && !stickerSelector && (
-          <>
-            {getActionButton(
-              __('Stickers'),
-              isReviewingStickerComment ? __('Different Sticker') : undefined,
-              ICONS.STICKER,
-              () => {
-                if (isReviewingStickerComment) setReviewingStickerComment(false);
+          ) : isReviewingStickerComment && selectedSticker ? (
+            <Button
+              button="primary"
+              label={__('Send')}
+              disabled={(isSupportComment && (tipError || disableReviewButton)) || disableInput}
+              onClick={() => {
+                if (isSupportComment) {
+                  handleSupportComment();
+                } else {
+                  handleCreateComment();
+                }
+                setSelectedSticker(null);
+                setReviewingStickerComment(false);
+                setStickerSelector(false);
                setIsSupportComment(false);
-                setStickerSelector(true);
-              }
-            )}
+              }}
+            />
+          ) : isSupportComment ? (
+            <Button
+              disabled={disabled || tipError || disableReviewButton || !minAmountMet}
+              type="button"
+              button="primary"
+              icon={activeTab === TAB_LBC ? ICONS.LBC : ICONS.FINANCE}
+              label={__('Review')}
+              onClick={() => setReviewingSupportComment(true)}
+              requiresAuth
+            />
+          ) : (
+            (!minTip || claimIsMine) && (
+              <Button
+                ref={buttonRef}
+                button="primary"
+                disabled={disabled || stickerSelector}
+                type="submit"
+                label={
+                  isReply
+                    ? isSubmitting
+                      ? __('Replying...')
+                      : __('Reply')
+                    : isSubmitting
+                    ? __('Commenting...')
+                    : __('Comment --[button to submit something]--')
+                }
+                requiresAuth
+                onClick={() => activeChannelClaim && commentValue.length && handleCreateComment()}
+              />
+            )
+          )}

-            {!claimIsMine && (
-              <>
-                {(!isSupportComment || activeTab !== TAB_LBC) &&
-                  getActionButton(
-                    __('Credits'),
-                    isSupportComment ? __('Switch to Credits') : undefined,
-                    ICONS.LBC,
-                    () => {
-                      setActiveTab(TAB_LBC);
+          {/** Stickers/Support Buttons **/}
+          {!supportDisabled && !stickerSelector && (
+            <>
+              {getActionButton(
+                __('Stickers'),
+                isReviewingStickerComment ? __('Different Sticker') : undefined,
+                ICONS.STICKER,
+                () => {
+                  if (isReviewingStickerComment) setReviewingStickerComment(false);
+                  setIsSupportComment(false);
+                  setStickerSelector(true);
+                }
+              )}

-                      if (isMobile) {
-                        doOpenModal(MODALS.SEND_TIP, {
-                          uri,
-                          isTipOnly: true,
-                          hasSelectedTab: TAB_LBC,
-                          setAmount: (amount) => {
-                            setTipAmount(amount);
-                            setReviewingSupportComment(true);
-                          },
-                        });
-                      } else {
-                        setIsSupportComment(true);
-                      }
-                    },
-                    !commentValue.length
-                  )}
+              {!claimIsMine && (
+                <>
+                  {(!isSupportComment || activeTab !== TAB_LBC) &&
+                    getActionButton(
+                      __('Credits'),
+                      isSupportComment ? __('Switch to Credits') : undefined,
+                      ICONS.LBC,
+                      () => {
+                        setActiveTab(TAB_LBC);

-                {stripeEnvironment &&
-                  (!isSupportComment || activeTab !== TAB_FIAT) &&
-                  getActionButton(
-                    __('Cash'),
-                    isSupportComment ? __('Switch to Cash') : undefined,
-                    ICONS.FINANCE,
-                    () => {
-                      setActiveTab(TAB_FIAT);
+                        if (isMobile) {
+                          doOpenModal(MODALS.SEND_TIP, {
+                            uri,
+                            isTipOnly: true,
+                            hasSelectedTab: TAB_LBC,
+                            setAmount: (amount) => {
+                              setTipAmount(amount);
+                              setReviewingSupportComment(true);
+                            },
+                          });
+                        } else {
+                          setIsSupportComment(true);
+                        }
+                      },
+                      !commentValue.length
+                    )}

-                      if (isMobile) {
-                        doOpenModal(MODALS.SEND_TIP, {
-                          uri,
-                          isTipOnly: true,
-                          hasSelectedTab: TAB_FIAT,
-                          setAmount: (amount) => {
-                            setTipAmount(amount);
-                            setReviewingSupportComment(true);
-                          },
-                        });
-                      } else {
-                        setIsSupportComment(true);
-                      }
-                    },
-                    !commentValue.length
-                  )}
-              </>
-            )}
-          </>
-        )}
+                  {stripeEnvironment &&
+                    (!isSupportComment || activeTab !== TAB_FIAT) &&
+                    getActionButton(
+                      __('Cash'),
+                      isSupportComment ? __('Switch to Cash') : undefined,
+                      ICONS.FINANCE,
+                      () => {
+                        setActiveTab(TAB_FIAT);

-        {/* Cancel Button */}
-        {(isSupportComment ||
-          isReviewingSupportComment ||
-          stickerSelector ||
-          isReviewingStickerComment ||
-          (isReply && !minTip)) && (
-          <Button
-            disabled={isSupportComment && isSubmitting}
-            button="link"
-            label={__('Cancel')}
-            onClick={() => {
-              if (isSupportComment || isReviewingSupportComment) {
-                if (!isReviewingSupportComment) setIsSupportComment(false);
-                setReviewingSupportComment(false);
-                if (stickerPrice) {
+                        if (isMobile) {
+                          doOpenModal(MODALS.SEND_TIP, {
+                            uri,
+                            isTipOnly: true,
+                            hasSelectedTab: TAB_FIAT,
+                            setAmount: (amount) => {
+                              setTipAmount(amount);
+                              setReviewingSupportComment(true);
+                            },
+                          });
+                        } else {
+                          setIsSupportComment(true);
+                        }
+                      },
+                      !commentValue.length
+                    )}
+                </>
+              )}
+            </>
+          )}
+
+          {/* Cancel Button */}
+          {(isSupportComment ||
+            isReviewingSupportComment ||
+            stickerSelector ||
+            isReviewingStickerComment ||
+            (isReply && !minTip)) && (
+            <Button
+              disabled={isSupportComment && isSubmitting}
+              button="link"
+              label={__('Cancel')}
+              onClick={() => {
+                if (isSupportComment || isReviewingSupportComment) {
+                  if (!isReviewingSupportComment) setIsSupportComment(false);
+                  setReviewingSupportComment(false);
+                  if (stickerPrice) {
+                    setReviewingStickerComment(false);
+                    setStickerSelector(false);
+                    setSelectedSticker(null);
+                  }
+                } else if (stickerSelector || isReviewingStickerComment) {
                  setReviewingStickerComment(false);
                  setStickerSelector(false);
                  setSelectedSticker(null);
+                } else if (isReply && !minTip && onCancelReplying) {
+                  onCancelReplying();
                }
-              } else if (stickerSelector || isReviewingStickerComment) {
-                setReviewingStickerComment(false);
-                setStickerSelector(false);
-                setSelectedSticker(null);
-              } else if (isReply && !minTip && onCancelReplying) {
-                onCancelReplying();
-              }
-            }}
-          />
-        )}
-
-        {/* Help Text */}
-        {deletedComment && <div className="error__text">{__('This comment has been deleted.')}</div>}
-        {!!minAmount && (
-          <div className="help--notice commentCreate__minAmountNotice">
-            <I18nMessage tokens={{ lbc: <CreditAmount noFormat amount={minAmount} /> }}>
-              {minTip ? 'Comment min: %lbc%' : minSuper ? 'HyperChat min: %lbc%' : ''}
-            </I18nMessage>
-            <Icon
-              customTooltipText={
-                minTip
-                  ? __('This channel requires a minimum tip for each comment.')
-                  : minSuper
-                  ? __('This channel requires a minimum amount for HyperChats to be visible.')
-                  : ''
-              }
-              className="icon--help"
-              icon={ICONS.HELP}
-              tooltip
-              size={16}
+              }}
            />
-          </div>
-        )}
-      </div>
+          )}
+
+          {/* Help Text */}
+          {deletedComment && <div className="error__text">{__('This comment has been deleted.')}</div>}
+          {!!minAmount && (
+            <div className="help--notice commentCreate__minAmountNotice">
+              <I18nMessage tokens={{ lbc: <CreditAmount noFormat amount={minAmount} /> }}>
+                {minTip ? 'Comment min: %lbc%' : minSuper ? 'HyperChat min: %lbc%' : ''}
+              </I18nMessage>
+              <Icon
+                customTooltipText={
+                  minTip
+                    ? __('This channel requires a minimum tip for each comment.')
+                    : minSuper
+                    ? __('This channel requires a minimum amount for HyperChats to be visible.')
+                    : ''
+                }
+                className="icon--help"
+                icon={ICONS.HELP}
+                tooltip
+                size={16}
+              />
+            </div>
+          )}
+        </div>
+      )}
    </Form>
  );
 }
--- a/ui/component/common/form-components/form-field.jsx
+++ b/ui/component/common/form-components/form-field.jsx
@ -48,6 +48,8 @@ type Props = {
  openEmoteMenu?: () => void,
  quickActionHandler?: (any) => any,
  render?: () => React$Node,
+  handleTip?: (isLBC: boolean) => any,
+  handleSubmit?: () => any,
 };

 export class FormField extends React.PureComponent<Props> {
@ -93,6 +95,8 @@ export class FormField extends React.PureComponent<Props> {
      openEmoteMenu,
      quickActionHandler,
      render,
+      handleTip,
+      handleSubmit,
      ...inputProps
    } = this.props;

@ -239,7 +243,7 @@ export class FormField extends React.PureComponent<Props> {
              {(label || quickAction) && (
                <div className="form-field__two-column">
                  <label htmlFor={name}>{label}</label>
-                  {quickAction}
+                  {countInfo}
                </div>
              )}

@ -260,6 +264,9 @@ export class FormField extends React.PureComponent<Props> {
                    maxLength={textAreaMaxLength || FF_MAX_CHARS_DEFAULT}
                    inputRef={this.input}
                    isLivestream={isLivestream}
+                    handleEmojis={openEmoteMenu}
+                    handleTip={handleTip}
+                    handleSubmit={handleSubmit}
                    {...inputProps}
                  />
                </React.Suspense>
@ -276,7 +283,6 @@ export class FormField extends React.PureComponent<Props> {
                    iconSize={20}
                  />
                )}
-                {countInfo}
              </div>
            </fieldset-section>
          );
--- a/ui/component/common/icon-custom.jsx
+++ b/ui/component/common/icon-custom.jsx
@ -2765,4 +2765,5 @@ export const icons = {
      </svg>
    );
  },
+  [ICONS.SUBMIT]: buildIcon(<path d="M2.01 21 23 12 2.01 3 2 10l15 2-15 2z" />),
 };
--- a/ui/component/livestreamChatLayout/view.jsx
+++ b/ui/component/livestreamChatLayout/view.jsx
@ -206,7 +206,7 @@ export default function LivestreamChatLayout(props: Props) {
            />
          </div>

-          <div className="livestream__commentCreate">
+          <div className="livestream__comment-create">
            <CommentCreate isLivestream bottom uri={uri} disableInput />
          </div>
        </div>
@ -293,7 +293,7 @@ export default function LivestreamChatLayout(props: Props) {
          />
        )}

-        <div className="livestream__commentCreate">
+        <div className="livestream__comment-create">
          <CommentCreate
            isLivestream
            bottom
--- a/ui/component/textareaWithSuggestions/view.jsx
+++ b/ui/component/textareaWithSuggestions/view.jsx
@ -2,6 +2,7 @@
 import { EMOTES_48px as EMOTES } from 'constants/emotes';
 import { matchSorter } from 'match-sorter';
 import { SEARCH_OPTIONS } from 'constants/search';
+import * as ICONS from 'constants/icons';
 import * as KEYCODES from 'constants/keycodes';
 import Autocomplete from '@mui/material/Autocomplete';
 import BusyIndicator from 'component/common/busy-indicator';
@ -15,6 +16,8 @@ import TextField from '@mui/material/TextField';
 import useLighthouse from 'effects/use-lighthouse';
 import useThrottle from 'effects/use-throttle';
 import { parseURI } from 'util/lbryURI';
+import Button from 'component/button';
+import { useIsMobile } from 'effects/use-screensize';

 const SUGGESTION_REGEX = new RegExp(
  '((?:^| |\n)@[^\\s=&#$@%?:;/\\"<>%{}|^~[]*(?::[\\w]+)?)|((?:^| |\n):[\\w+-]*:?)',
@ -63,6 +66,9 @@ type Props = {
  onBlur: (any) => any,
  onChange: (any) => any,
  onFocus: (any) => any,
+  handleEmojis: () => any,
+  handleTip: (isLBC: boolean) => any,
+  handleSubmit: () => any,
 };

 export default function TextareaWithSuggestions(props: Props) {
@ -90,8 +96,13 @@ export default function TextareaWithSuggestions(props: Props) {
    onBlur,
    onChange,
    onFocus,
+    handleEmojis,
+    handleTip,
+    handleSubmit,
  } = props;

+  const isMobile = useIsMobile();
+
  const inputDefaultProps = { className, placeholder, maxLength, type, disabled };

  const [suggestionValue, setSuggestionValue] = React.useState(undefined);
@ -378,10 +389,29 @@ export default function TextareaWithSuggestions(props: Props) {

  const renderInput = (params: any) => {
    const { InputProps, disabled, fullWidth, id, inputProps: autocompleteInputProps } = params;
+
+    if (isMobile) {
+      InputProps.startAdornment = <Button icon={ICONS.STICKER} onClick={handleEmojis} />;
+      InputProps.endAdornment = (
+        <>
+          <Button icon={ICONS.LBC} onClick={() => handleTip(true)} />
+          <Button icon={ICONS.FINANCE} onClick={() => handleTip(false)} />
+
+          {messageValue && messageValue.length > 0 && (
+            <Button button="primary" icon={ICONS.SUBMIT} iconColor="red" onClick={() => handleSubmit()} />
+          )}
+        </>
+      );
+    }
+
    const inputProps = { ...autocompleteInputProps, ...inputDefaultProps };
    const autocompleteProps = { InputProps, disabled, fullWidth, id, inputProps };

-    return <TextField inputRef={inputRef} multiline select={false} {...autocompleteProps} />;
+    return !isMobile ? (
+      <TextField inputRef={inputRef} multiline select={false} {...autocompleteProps} />
+    ) : (
+      <TextField inputRef={inputRef} variant="outlined" multiline minRows={1} select={false} {...autocompleteProps} />
+    );
  };

  const renderOption = (optionProps: any, label: string) => {
--- a/ui/constants/icons.js
+++ b/ui/constants/icons.js
@ -191,3 +191,4 @@ export const ODYSEE_WHITE_TEXT = 'OdyseeLogoWhiteText';
 export const ODYSEE_DARK_TEXT = 'OdyseeLogoDarkText';
 export const FEATURED = 'Featured';
 export const DISMISS_ALL = 'DismissAll';
+export const SUBMIT = 'Submit';
--- a/ui/scss/component/_form-field.scss
+++ b/ui/scss/component/_form-field.scss
@ -1,7 +1,6 @@
@import '../init/mixins';

 input,
-textarea,
 select,
 .date-picker-input {
  height: var(--height-input);
@ -37,6 +36,42 @@ select,
  }
 }

+@media (min-width: $breakpoint-small) {
+  textarea {
+    height: var(--height-input);
+    border-radius: var(--border-radius);
+    border: 1px solid;
+    color: var(--color-input);
+    border-color: var(--color-input-border);
+    background-color: var(--color-input-bg);
+    padding-right: var(--spacing-s);
+    padding-left: var(--spacing-s);
+
+    &:focus {
+      @include focus;
+    }
+
+    &::placeholder {
+      color: var(--color-input-placeholder);
+      opacity: 0.4;
+    }
+
+    &:disabled {
+      opacity: 0.4;
+
+      & + label {
+        opacity: 0.4;
+      }
+    }
+
+    &[type='range'] {
+      height: auto;
+      height: 0.5rem;
+      background-color: var(--color-secondary);
+    }
+  }
+}
+
 checkbox-element,
 radio-element,
 select {
@ -480,12 +515,18 @@ fieldset-section {

    @media (min-width: $breakpoint-small) {
      max-width: none;
+
+      select {
+        max-height: 1.5rem !important;
+        padding: 0 var(--spacing-xs);
+        padding-right: var(--spacing-l);
+      }
    }

-    select {
-      max-height: 1.5rem !important;
-      padding: 0 var(--spacing-xs);
-      padding-right: var(--spacing-l);
+    @media (max-width: $breakpoint-small) {
+      select {
+        max-height: 1.25rem !important;
+      }
    }
  }

--- a/ui/scss/component/_livestream-chat.scss
+++ b/ui/scss/component/_livestream-chat.scss
@ -112,7 +112,7 @@ $recent-msg-button__height: 2rem;
  }

  @media (min-width: $breakpoint-small) {
-    height: calc(100% - var(--header-height) - #{$discussion-header__height});
+    height: calc(100vh - var(--header-height) - #{$discussion-header__height});
  }

  @media (max-width: $breakpoint-small) {
@ -144,13 +144,27 @@ $recent-msg-button__height: 2rem;
  }
 }

-.livestream__commentCreate {
+.livestream__comment-create {
  padding: var(--spacing-s);
  border-top: 1px solid var(--color-border);
  margin-top: auto;

  @media (max-width: $breakpoint-small) {
    padding: var(--spacing-xxs);
+
+    span,
+    select,
+    option {
+      font-size: var(--font-xxsmall);
+    }
+
+    select {
+      padding: 0px var(--spacing-xxs) !important;
+    }
+
+    .select--slim {
+      margin: 0px;
+    }
  }
 }

@ -197,9 +211,9 @@ $recent-msg-button__height: 2rem;
 }

 .livestreamPinned__wrapper {
-  @extend .livestreamSuperchats__wrapper;
  display: flex;
  flex-shrink: 0;
+  position: relative;
  padding: var(--spacing-s) var(--spacing-xs);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-small);
@ -225,6 +239,7 @@ $recent-msg-button__height: 2rem;
  }

  @media (max-width: $breakpoint-small) {
+    z-index: 1300;
    max-width: 100%;
    padding: 0;
    padding-left: var(--spacing-xxs);
--- a/ui/scss/component/_textarea-suggestions.scss
+++ b/ui/scss/component/_textarea-suggestions.scss
@ -1,18 +1,43 @@
 .MuiAutocomplete-inputRoot {
-  padding: 0 !important;
-  font-family: inherit !important;
-  font-weight: inherit !important;
-  font-size: inherit !important;
-  color: var(--color-text) !important;
+  @media (min-width: $breakpoint-small) {
+    padding: 0 !important;
+    font-family: inherit !important;
+    font-weight: inherit !important;
+    font-size: inherit !important;
+    color: var(--color-text) !important;

-  .MuiOutlinedInput-notchedOutline {
-    visibility: hidden;
+    .MuiOutlinedInput-notchedOutline {
+      visibility: hidden;
+    }
+
+    .create__comment {
+      min-height: calc(var(--height-input) * 1.5) !important;
+    }
+  }
+}
+
+@media (max-width: $breakpoint-small) {
+  .MuiOutlinedInput-input {
+    padding: 0px var(--spacing-xxs);
  }

-  .create__comment {
-    @extend textarea;
+  .MuiOutlinedInput-root {
+    font-size: var(--font-xsmall) !important;
+    flex-wrap: nowrap !important;

-    min-height: calc(var(--height-input) * 1.5) !important;
+    textarea {
+      border: none;
+    }
+
+    .button--primary {
+      border-radius: 100%;
+      height: unset;
+      padding: var(--spacing-xxs);
+
+      .button__content {
+        height: unset;
+      }
+    }
  }
 }

--- a/ui/scss/init/_gui.scss
+++ b/ui/scss/init/_gui.scss
@ -178,8 +178,10 @@ img {
  text-indent: -9999px;
 }

-textarea {
-  min-height: calc(var(--height-input) * 2);
+@media (min-width: $breakpoint-small) {
+  textarea {
+    min-height: calc(var(--height-input) * 2);
+  }
 }

 .columns {
--- a/ui/scss/init/_reset.scss
+++ b/ui/scss/init/_reset.scss
@ -156,18 +156,19 @@ select {
  outline: none;
 }

-textarea {
-  width: 100%;
-  min-height: var(--spacing-xxl);
-  padding: var(--spacing-s);
-  // border-color should be added in apps for blur/focus
-  border: 1px solid;
+@media (min-width: 900px) {
+  textarea {
+    width: 100%;
+    min-height: var(--spacing-xxl);
+    padding: var(--spacing-s);
+    // border-color should be added in apps for blur/focus
+    border: 1px solid;

-  &:not([disabled]) {
-    resize: vertical;
+    &:not([disabled]) {
+      resize: vertical;
+    }
  }
 }
-
@media print {
  // sass-lint:disable-block no-important
  // Intelligent print styles