Updated all component styles

new mixins, consolidated all original styles files uncomitted
2019-08-12 16:48:46 -04:00
parent 3d509c84a2
commit 47b43d78d9
45 changed files with 829 additions and 202 deletions
--- a/app/javascript/gabsocial/features/account_timeline/components/inner_header/inner_header.js
+++ b/app/javascript/gabsocial/features/account_timeline/components/inner_header/inner_header.js
@@ -6,7 +6,6 @@ import { NavLink } from 'react-router-dom';
 import { debounce } from 'lodash';
 import Button from '../../../components/button';
 import { autoPlayGif, me, isStaff } from '../../../initial_state';
-import Icon from '../../../components/icon';
 import Avatar from '../../../components/avatar';
 import { shortNumberFormat } from '../../../utils/numbers';
 import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
@@ -42,17 +41,12 @@ const messages = defineMessages({
  unendorse: { id: 'account.unendorse', defaultMessage: 'Don\'t feature on profile' },
  admin_account: { id: 'status.admin_account', defaultMessage: 'Open moderation interface for @{name}' },
  add_or_remove_from_list: { id: 'account.add_or_remove_from_list', defaultMessage: 'Add or Remove from lists' },
+  accountFollowsYou: { id: 'account.follows_you', defaultMessage: 'Follows you' },
+  accountBlocked: { id: 'account.blocked', defaultMessage: 'Blocked' },
+  accountMuted: { id: 'account.muted', defaultMessage: 'Muted' },
+  domainBlocked: { id: 'account.domain_blocked', defaultMessage: 'Domain hidden' },
 });

-const dateFormatOptions = {
-  month: 'short',
-  day: 'numeric',
-  year: 'numeric',
-  hour12: false,
-  hour: '2-digit',
-  minute: '2-digit',
-};
-
 export default @injectIntl
 class Header extends ImmutablePureComponent {

@@ -175,15 +169,15 @@ class Header extends ImmutablePureComponent {
    if (!account || !me) return info;

    if (me !== account.get('id') && account.getIn(['relationship', 'followed_by'])) {
-      info.push(<span key='followed_by' className='relationship-tag'><FormattedMessage id='account.follows_you' defaultMessage='Follows you' /></span>);
+      info.push(<span key='followed_by' className='relationship-tag'>{intl.formatMessage(messages.accountFollowsYou)}</span>);
    } else if (me !== account.get('id') && account.getIn(['relationship', 'blocking'])) {
-      info.push(<span key='blocked' className='relationship-tag'><FormattedMessage id='account.blocked' defaultMessage='Blocked' /></span>);
+      info.push(<span key='blocked' className='relationship-tag'>{intl.formatMessage(messages.accountBlocked)}</span>);
    }

    if (me !== account.get('id') && account.getIn(['relationship', 'muting'])) {
-      info.push(<span key='muted' className='relationship-tag'><FormattedMessage id='account.muted' defaultMessage='Muted' /></span>);
+      info.push(<span key='muted' className='relationship-tag'>{intl.formatMessage(messages.accountMuted)}</span>);
    } else if (me !== account.get('id') && account.getIn(['relationship', 'domain_blocking'])) {
-      info.push(<span key='domain_blocked' className='relationship-tag'><FormattedMessage id='account.domain_blocked' defaultMessage='Domain hidden' /></span>);
+      info.push(<span key='domain_blocked' className='relationship-tag'>{intl.formatMessage(messages.domainBlocked)}</span>);
    }

    return info;
--- a/app/javascript/gabsocial/features/account_timeline/components/inner_header/inner_header.scss
+++ b/app/javascript/gabsocial/features/account_timeline/components/inner_header/inner_header.scss
@@ -5,12 +5,12 @@
  color: $primary-text-color;
  background-color: $base-overlay-background;
  text-transform: uppercase;
-  font-size: 11px;
-  font-weight: 500;
  padding: 4px;
  border-radius: 4px;
  opacity: 0.7;

+  @include text-sizing(11px, 500);
+
  &:hover {
    opacity: 1;
  }
--- a/app/javascript/gabsocial/features/account_timeline/components/moved_note/moved_note.scss
+++ b/app/javascript/gabsocial/features/account_timeline/components/moved_note/moved_note.scss
@@ -13,8 +13,8 @@

    >span {
      display: block;
-      overflow: hidden;
-      text-overflow: ellipsis;
+
+      @include text-overflow;
    }
  }

@@ -33,8 +33,8 @@
    strong,
    span {
      display: block;
-      text-overflow: ellipsis;
-      overflow: hidden;
+      
+      @include text-overflow;
    }

    strong {
--- a/app/javascript/gabsocial/features/account_timeline/components/profile_info_panel/profile_info_panel.scss
+++ b/app/javascript/gabsocial/features/account_timeline/components/profile_info_panel/profile_info_panel.scss
@@ -33,12 +33,11 @@
      span {
        color: $primary-text-color;

+        @include text-sizing(15px, 400, 1.25);
+
        body.theme-gabsocial-light & {
          color: $gab-default-text-light;
        }
-
-        font-size: 15px;
-        line-height: 1.25;
      }
    }
  }
@@ -51,15 +50,14 @@
    }

    .emojione {
-      width: 22px;
-      height: 22px;
+      @include size(22px);
    }

    h1 {
      span:first-of-type {
        color: #ffffff;

-        @include text-overflow;
+        @include text-overflow(nowrap);
        @include text-sizing(20px, 600, 1.25);

        body.theme-gabsocial-light & {
@@ -70,10 +68,9 @@
      small {
        display: block;
        color: $secondary-text-color;
-        overflow: hidden;
-        text-overflow: ellipsis;

-        @include text-sizing(16px, 400, 1.5)
+        @include text-sizing(16px, 400, 1.5);
+        @include text-overflow;
      }
    }
  }
@@ -83,8 +80,8 @@
    flex: 1 1;
    color: $primary-text-color;
    margin: 15px 0;
-    font-size: 15px;
-    line-height: 1.25;
+
+    @include text-sizing(15px, 400, 1.25);

    a {
      color: lighten($ui-highlight-color, 8%);
@@ -121,8 +118,7 @@
      flex: 1 1;

      * {
-        font-size: 15px;
-        line-height: 24px;
+        @include text-sizing(15px, 400, 24px);
      }

      dt {
--- a/app/javascript/gabsocial/features/compose/components/compose_form/compose_form.scss
+++ b/app/javascript/gabsocial/features/compose/components/compose_form/compose_form.scss
@@ -0,0 +1,144 @@
+.compose-form {
+  padding: 10px;
+
+  &__sensitive-button {
+    padding: 0 10px 10px 10px;
+
+    @include text-sizing(14px, 500);
+
+    &.active {
+      color: $highlight-text-color;
+    }
+
+    input[type=checkbox] {
+      display: none;
+    }
+
+    .checkbox {
+      display: inline-block;
+      position: relative;
+      box-sizing: border-box;
+      flex: 0 0 auto;
+      margin-right: 10px;
+      top: -1px;
+      vertical-align: middle;
+
+      @include size(18px);
+      @include border-design($ui-primary-color, 1px, 4px);
+
+      &.active {
+        border-color: $highlight-text-color;
+        background: $highlight-text-color;
+      }
+    }
+  }
+
+  .emoji-picker-dropdown {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    z-index: 1;
+  }
+
+  &.condensed {
+    .autosuggest-textarea__textarea {
+      min-height: 46px;
+      border-radius: 5px;
+    }
+  }
+
+  .emoji-picker-wrapper {
+    position: relative;
+    height: 0;
+  }
+
+  &__modifiers {
+    color: $inverted-text-color;
+    font-family: inherit;
+    font-size: 14px;
+    background: $simple-background-color;
+  }
+
+  &__buttons-wrapper {
+    padding: 10px;
+    background: darken($simple-background-color, 8%);
+    border-radius: 0 0 4px 4px;
+    flex: 0 0 auto;
+
+    @include flex(space-between);
+
+    .compose-form__buttons {
+      display: flex;
+
+      .compose-form__sensitive-button {
+        display: none;
+
+        &.compose-form__sensitive-button--visible {
+          display: block;
+        }
+
+        .compose-form__sensitive-button__icon {
+          line-height: 27px;
+        }
+      }
+    }
+
+    .icon-button {
+      box-sizing: content-box;
+      padding: 0 3px;
+    }
+  }
+
+  &__publish {
+    min-width: 0;
+    flex: 0 0 auto;
+
+    @include flex(flex-end);
+  }
+
+  &__publish-button-wrapper {
+    overflow: hidden;
+    padding-top: 10px;
+  }
+}
+
+.spoiler-input {
+  height: 0;
+  transform-origin: bottom;
+  opacity: 0.0;
+  position: relative;
+
+  &--visible {
+    height: 36px;
+    margin-bottom: 11px;
+    opacity: 1.0;
+  }
+
+  &__input {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0;
+    color: $inverted-text-color;
+    background: $simple-background-color;
+    padding: 10px;
+    font-family: inherit;
+    font-size: 14px;
+    resize: vertical;
+    border: 0;
+    outline: 0;
+    border-radius: 4px;
+
+    &:focus {
+      outline: 0;
+    }
+
+    @include breakpoint(sm) {
+      font-size: 16px;
+    }
+  }
+}
+
+.no-reduce-motion .spoiler-input {
+  transition: height 0.4s ease, opacity 0.4s ease;
+}
--- a/app/javascript/gabsocial/features/compose/components/emoji_picker_dropdown/emoji_picker_dropdown.scss
+++ b/app/javascript/gabsocial/features/compose/components/emoji_picker_dropdown/emoji_picker_dropdown.scss
@@ -53,13 +53,13 @@

 .emoji-button {
  display: block;
-  font-size: 24px;
-  line-height: 24px;
  margin-left: 2px;
  width: 24px;
  outline: 0;
  cursor: pointer;

+  @include text-sizing(24px, 400, 24px);
+
  &:active,
  &:focus {
    outline: 0 !important;
@@ -69,10 +69,9 @@
    filter: grayscale(100%);
    opacity: 0.8;
    display: block;
-    margin: 0;
-    width: 22px;
-    height: 22px;
-    margin-top: 2px;
+    margin: 2px 0 0 0;
+
+    @include size(22px);
  }

  &:hover,
@@ -83,4 +82,36 @@
      filter: none;
    }
  }
+}
+
+.no-reduce-motion .pulse-loading {
+  transform-origin: center center;
+  animation: heartbeat 1.5s ease-in-out infinite both;
+}
+
+@keyframes heartbeat {
+  from {
+    transform: scale(1);
+    animation-timing-function: ease-out;
+  }
+
+  10% {
+    transform: scale(0.91);
+    animation-timing-function: ease-in;
+  }
+
+  17% {
+    transform: scale(0.98);
+    animation-timing-function: ease-out;
+  }
+
+  33% {
+    transform: scale(0.87);
+    animation-timing-function: ease-in;
+  }
+
+  45% {
+    transform: scale(1);
+    animation-timing-function: ease-out;
+  }
 }
--- a/app/javascript/gabsocial/features/compose/components/navigation_bar/navigation_bar.scss
+++ b/app/javascript/gabsocial/features/compose/components/navigation_bar/navigation_bar.scss
@@ -47,7 +47,7 @@
    display: block;
    font-weight: 500;

-    @include text-overflow;
+    @include text-overflow(nowrap);
  }

  &__profile-edit {
--- a/app/javascript/gabsocial/features/compose/components/reply_indicator/reply_indicator.scss
+++ b/app/javascript/gabsocial/features/compose/components/reply_indicator/reply_indicator.scss
@@ -48,15 +48,12 @@

 .reply-indicator-content {
  position: relative;
-  font-size: 15px;
-  line-height: 20px;
-  word-wrap: break-word;
-  font-weight: 400;
-  overflow: hidden;
-  text-overflow: ellipsis;
  padding-top: 2px;
  color: $primary-text-color;

+  @include text-sizing(15px, 400, 20px);
+  @include text-overflow(normal, break-word);
+
  &:focus {
    outline: 0;
  }
@@ -70,9 +67,9 @@
  }

  .emojione {
-    width: 20px;
-    height: 20px;
    margin: -3px 0 0;
+
+    @include size(20px);
  }

  p {
--- a/app/javascript/gabsocial/features/compose/compose.scss
+++ b/app/javascript/gabsocial/features/compose/compose.scss
@@ -41,8 +41,8 @@
  flex-direction: column;
  overflow: hidden;
  overflow-y: auto;
-  width: 100%;
-  height: 100%;
+
+  @include size(100%);

  &.darker {
    background: $ui-base-color;
@@ -59,11 +59,11 @@
    display: block;
    object-fit: contain;
    object-position: bottom left;
-    width: 100%;
-    height: 100%;
    pointer-events: none;
    user-drag: none;
-    user-select: none;
+
+    @include unselectable;
+    @include size(100%);
  }

  @media screen and (min-height: 640px) {
@@ -93,8 +93,8 @@
  .drawer {
    flex: 0 0 auto;
    padding: 10px;
-    padding-left: 5px;
-    padding-right: 5px;
+
+    @include horizontal-padding(5px);

    &:first-child {
      padding-left: 10px;
--- a/app/javascript/gabsocial/features/follow_requests/components/account_authorize/account_authorize.scss
+++ b/app/javascript/gabsocial/features/follow_requests/components/account_authorize/account_authorize.scss
@@ -16,8 +16,8 @@
    strong,
    span {
      display: block;
-      text-overflow: ellipsis;
-      overflow: hidden;
+
+      @include text-overflow;
    }

    strong {
@@ -33,12 +33,12 @@

 .account__header__content {
  color: $darker-text-color;
-  font-size: 14px;
-  font-weight: 400;
  overflow: hidden;
  word-break: normal;
  word-wrap: break-word;

+  @include text-sizing(14px, 400);
+
  p {
    margin-bottom: 20px;

@@ -55,4 +55,18 @@
      text-decoration: none;
    }
  }
+}
+
+.account--panel {
+  background: lighten($ui-base-color, 4%);
+  border-top: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  display: flex;
+  flex-direction: row;
+  padding: 10px 0;
+}
+
+.account--panel__button {
+  flex: 1 1 auto;
+  text-align: center;
 }
--- a/app/javascript/gabsocial/features/introduction/introduction.scss
+++ b/app/javascript/gabsocial/features/introduction/introduction.scss
@@ -135,8 +135,7 @@
  }

  &__action {
-    padding: 25px;
-    padding-top: 0;
+    padding: 0 25px 25px 25px;

    @include flex(center, center);
  }
--- a/app/javascript/gabsocial/features/notifications/components/notification/notification.scss
+++ b/app/javascript/gabsocial/features/notifications/components/notification/notification.scss
@@ -1,20 +1,21 @@
 .notification {

+
  &--favourite {
+    .status.status-direct {
+      background: transparent;

+      .icon-button.disabled {
+        color: lighten($action-button-color, 13%);
+      }
+    }
  }

-  &--follow {
+  &--follow {}

-  }
+  &--reblog {}

-  &--reblog {
-
-  }
-
-  &--poll {
-
-  }
+  &--poll {}

  &__message {
    margin: 0 10px 0 68px;
@@ -32,7 +33,7 @@
    >span {
      display: inline;

-      @include text-overflow;
+      @include text-overflow(nowrap);
    }
  }

--- a/app/javascript/gabsocial/features/search/components/header/header.scss
+++ b/app/javascript/gabsocial/features/search/components/header/header.scss
@@ -18,7 +18,7 @@
    max-width: 1200px;

    @include text-sizing(27px, bold, 32px);
-    @include text-overflow;
+    @include text-overflow(nowrap);
    @include margin-center;

    @media (min-width:895px) and (max-width:1190px) {
--- a/app/javascript/gabsocial/features/status/components/card/card.scss
+++ b/app/javascript/gabsocial/features/status/components/card/card.scss
@@ -0,0 +1,169 @@
+.status-card {
+  display: flex;
+  font-size: 14px;
+  color: $dark-text-color;
+  margin-top: 14px;
+  text-decoration: none;
+  overflow: hidden;
+
+  @include border-design(lighten($ui-base-color, 8%), 1px, 4px);
+
+  &__actions {
+    @include flex(center, center);
+    @include abs-position(0, 0, 0, 0);
+
+    &>div {
+      background: rgba($base-shadow-color, 0.6);
+      border-radius: 8px;
+      padding: 12px 9px;
+      flex: 0 0 auto;
+
+      @include flex(center, center);
+    }
+
+    button,
+    a {
+      display: inline;
+      color: $secondary-text-color;
+      background: transparent;
+      border: 0;
+      padding: 0 8px;
+      text-decoration: none;
+      font-size: 18px;
+      line-height: 18px;
+
+      &:hover,
+      &:active,
+      &:focus {
+        color: $primary-text-color;
+      }
+    }
+
+    a {
+      font-size: 19px;
+      position: relative;
+      bottom: -1px;
+    }
+  }
+
+  &__title {
+    display: block;
+    font-weight: 500;
+    margin-bottom: 5px;
+    color: $darker-text-color;
+    text-decoration: none;
+
+    @include text-overflow(nowrap);
+  }
+
+  &__content {
+    flex: 1 1 auto;
+    overflow: hidden;
+    padding: 14px 14px 14px 8px;
+  }
+
+  &__description {
+    color: $darker-text-color;
+  }
+
+  &__host {
+    display: block;
+    margin-top: 5px;
+    font-size: 13px;
+
+    @include text-overflow(nowrap);
+  }
+
+  &__image {
+    flex: 0 0 100px;
+    background: lighten($ui-base-color, 8%);
+    position: relative;
+
+    &>.fa {
+      font-size: 21px;
+      position: absolute;
+      transform-origin: 50% 50%;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &__image-image {
+    border-radius: 4px 0 0 4px;
+    display: block;
+    margin: 0;
+    object-fit: cover;
+    background-size: cover;
+    background-position: center center;
+
+    @include size(100%);
+  }
+
+  &.horizontal {
+    display: block;
+  }
+
+  &.horizontal & {
+    &__image {
+      width: 100%;
+    }
+
+    &__image-image {
+      border-radius: 4px 4px 0 0;
+    }
+
+    &__title {
+      white-space: inherit;
+    }
+  }
+
+  &.compact {
+    border-color: lighten($ui-base-color, 4%);
+
+    &.interactive {
+      border: 0;
+    }
+  }
+
+  &.compact & {
+    &__content {
+      padding: 10px 8px 8px 8px;
+    }
+
+    &__title {
+      white-space: nowrap;
+    }
+
+    &__image {
+      flex: 0 0 60px;
+    }
+  }
+}
+
+a.status-card {
+  cursor: pointer;
+
+  &:hover {
+    background: lighten($ui-base-color, 8%);
+  }
+
+  &.compact:hover {
+    background-color: lighten($ui-base-color, 4%);
+  }
+}
+
+.status-card-photo {
+  cursor: zoom-in;
+  display: block;
+  text-decoration: none;
+  margin: 0;
+
+  @include size(100%, auto);
+}
+
+.status-card-video {
+  iframe {
+    @include size(100%);
+  }
+}
--- a/app/javascript/gabsocial/features/status/components/detailed_status/detailed_status.scss
+++ b/app/javascript/gabsocial/features/status/components/detailed_status/detailed_status.scss
@@ -0,0 +1,96 @@
+.detailed-status {
+  background: lighten($ui-base-color, 4%);
+  padding: 14px 10px;
+
+  &--flex {
+    @include flex(space-between, flex-start, row, wrap);
+
+    .status__content,
+    .detailed-status__meta {
+      flex: 100%;
+    }
+  }
+
+  .status__content {
+    @include text-sizing(19px, 400, 24px);
+
+    .emojione {
+      margin: -1px 0 0;
+
+      @include size(24px);
+    }
+
+    .status__content__spoiler-link {
+      line-height: 24px;
+      margin: -1px 0 0;
+    }
+  }
+
+  .video-player {
+    margin-top: 8px;
+  }
+
+
+  &__meta {
+    margin-top: 15px;
+    color: $dark-text-color;
+
+    @include text-sizing(14px, 400, 18px);
+  }
+
+  &__datetime {
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &__favorites,
+  &__reblogs {
+    display: inline-block;
+    margin-left: 6px;
+
+    @include text-sizing(12px, 500);
+  }
+
+  &__display-name,
+  &__datetime,
+  &__application {
+    text-decoration: none;
+  }
+
+  &__display-name {
+    &:hover strong {
+      text-decoration: underline;
+    }
+  }
+
+  &__application,
+  &__datetime {
+    color: inherit;
+  }
+
+  &__display-name {
+    color: $secondary-text-color;
+    display: block;
+    line-height: 24px;
+    margin-bottom: 15px;
+    overflow: hidden;
+
+    strong,
+    span {
+      display: block;
+
+      @include text-overflow;
+    }
+
+    strong {
+      font-size: 16px;
+      color: $primary-text-color;
+    }
+  }
+
+  &__display-avatar {
+    float: left;
+    margin-right: 10px;
+  }
+}
--- a/app/javascript/gabsocial/features/ui/util/reduced_motion.js
+++ b/app/javascript/gabsocial/features/ui/util/reduced_motion.js
@@ -9,7 +9,7 @@ const extractValue = (value) => {
  return (typeof value === 'object' && value && 'val' in value) ? value.val : value;
 };

-class ReducedMotion extends Component {
+class ReducedMotion extends PureComponent {

  static propTypes = {
    defaultStyle: PropTypes.object,
--- a/app/javascript/gabsocial/features/video/video.scss
+++ b/app/javascript/gabsocial/features/video/video.scss
@@ -94,15 +94,15 @@
  }

  &__buttons-bar {
-    display: flex;
-    justify-content: space-between;
    padding-bottom: 10px;
+
+    @include flex(space-between);
  }

  &__buttons {
    font-size: 16px;

-    @include text-overflow;
+    @include text-overflow(nowrap);

    &.left {
      button {
@@ -177,13 +177,12 @@

    &__handle {
      z-index: 3;
-      border-radius: 50%;
      transition: opacity .1s ease;
      background: lighten($ui-highlight-color, 8%);
      box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
      pointer-events: none;

-      @include size(12px);
+      @include circle(12px);
      @include abs-position(auto, auto, 16px, 70px);
    }
  }
@@ -222,11 +221,11 @@
    &__progress,
    &__buffer {
      display: block;
-      position: absolute;
      height: 4px;
      border-radius: 4px;
-      top: 10px;
      background: lighten($ui-highlight-color, 8%);
+
+      @include abs-position(10px);
    }

    &__buffer {
@@ -234,10 +233,8 @@
    }

    &__handle {
-      position: absolute;
      z-index: 3;
      opacity: 0;
-      top: 6px;
      margin-left: -6px;
      transition: opacity .1s ease;
      background: lighten($ui-highlight-color, 8%);
@@ -245,6 +242,7 @@
      pointer-events: none;

      @include circle(12px);
+      @include abs-position(6px);

      &.active {
        opacity: 1;
@@ -262,8 +260,7 @@
  &.fullscreen {
    .video-player__buttons {
      button {
-        padding-top: 10px;
-        padding-bottom: 10px;
+        @include vertical-padding(10px);
      }
    }
  }