Commit a2b5d72e authored by mgabdev's avatar mgabdev

Progress

parent 3af35f48
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import Column from '../column'; import Column from '../column';
import ColumnHeader from '../column_header'; import { ColumnHeader } from '../column_header';
import IconButton from '../icon_button'; import IconButton from '../icon_button';
import './bundle_column_error.scss'; import './bundle_column_error.scss';
......
...@@ -7,7 +7,7 @@ import Video from '../features/video'; ...@@ -7,7 +7,7 @@ import Video from '../features/video';
import Card from '../features/status/components/card'; import Card from '../features/status/components/card';
import Poll from 'gabsocial/components/poll'; import Poll from 'gabsocial/components/poll';
import ModalRoot from '../components/modal_root'; import ModalRoot from '../components/modal_root';
import MediaModal from '../components/modal'; import { MediaModal } from '../components/modal';
import { List as ImmutableList, fromJS } from 'immutable'; import { List as ImmutableList, fromJS } from 'immutable';
const { localeData, messages } = getLocale(); const { localeData, messages } = getLocale();
......
...@@ -2,7 +2,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; ...@@ -2,7 +2,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import StatusListContainer from '../../containers/status_list_container'; import StatusListContainer from '../../containers/status_list_container';
import Column from '../../components/column'; import Column from '../../components/column';
import ColumnSettings from './components/column_settings'; import ColumnSettings from './components/column_settings';
import HomeColumnHeader from '../../components/column_header'; import { HomeColumnHeader } from '../../components/column_header';
import { import {
expandCommunityTimeline, expandCommunityTimeline,
expandPublicTimeline, expandPublicTimeline,
......
...@@ -5,7 +5,7 @@ import AccountContainer from '../../../../containers/account_container'; ...@@ -5,7 +5,7 @@ import AccountContainer from '../../../../containers/account_container';
import StatusContainer from '../../../../containers/status_container'; import StatusContainer from '../../../../containers/status_container';
import TrendingItem from '../../../../components/trending_item'; import TrendingItem from '../../../../components/trending_item';
import Icon from '../../../../components/icon'; import Icon from '../../../../components/icon';
import WhoToFollowPanel from '../../../../components/panel'; import { WhoToFollowPanel } from '../../../../components/panel';
import './search_results.scss'; import './search_results.scss';
......
...@@ -101,7 +101,7 @@ class Create extends PureComponent { ...@@ -101,7 +101,7 @@ class Create extends PureComponent {
disabled={disabled} disabled={disabled}
onChange={this.handleCoverImageChange} onChange={this.handleCoverImageChange}
/> />
<button className='standard-small'>{intl.formatMessage(messages.create)}</button> <button className='button'>{intl.formatMessage(messages.create)}</button>
</div> </div>
</form> </form>
); );
......
...@@ -47,7 +47,7 @@ class Groups extends ImmutablePureComponent { ...@@ -47,7 +47,7 @@ class Groups extends ImmutablePureComponent {
return ( return (
<div className="group-column-header"> <div className="group-column-header">
<div className="group-column-header__cta"><Link to="/groups/create" className="button standard-small">{intl.formatMessage(messages.create)}</Link></div> <div className="group-column-header__cta"><Link to="/groups/create" className="button">{intl.formatMessage(messages.create)}</Link></div>
<div className="group-column-header__title">{intl.formatMessage(messages.heading)}</div> <div className="group-column-header__title">{intl.formatMessage(messages.heading)}</div>
<div className="column-header__wrapper"> <div className="column-header__wrapper">
......
import StatusListContainer from '../../containers/status_list_container'; import StatusListContainer from '../../containers/status_list_container';
import Column from '../../components/column'; import Column from '../../components/column';
import ColumnHeader from '../../components/column_header'; import { ColumnHeader } from '../../components/column_header';
import { expandHashtagTimeline, clearTimeline } from '../../actions/timelines'; import { expandHashtagTimeline, clearTimeline } from '../../actions/timelines';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { connectHashtagStream } from '../../actions/streaming'; import { connectHashtagStream } from '../../actions/streaming';
......
...@@ -10,7 +10,7 @@ import { fetchList, deleteList } from '../../actions/lists'; ...@@ -10,7 +10,7 @@ import { fetchList, deleteList } from '../../actions/lists';
import { openModal } from '../../actions/modal'; import { openModal } from '../../actions/modal';
import ColumnIndicator from '../../components/column_indicator'; import ColumnIndicator from '../../components/column_indicator';
import Icon from '../../components/icon'; import Icon from '../../components/icon';
import HomeColumnHeader from '../../components/column_header'; import { HomeColumnHeader } from '../../components/column_header';
import Button from '../../components/button'; import Button from '../../components/button';
import ColumnHeaderSettingButton from '../../components/column_header_setting_button'; import ColumnHeaderSettingButton from '../../components/column_header_setting_button';
......
...@@ -5,7 +5,7 @@ import { createSelector } from 'reselect'; ...@@ -5,7 +5,7 @@ import { createSelector } from 'reselect';
import { List as ImmutableList } from 'immutable'; import { List as ImmutableList } from 'immutable';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import Column from '../../components/column'; import Column from '../../components/column';
import ColumnHeader from '../../components/column_header'; import { ColumnHeader } from '../../components/column_header';
import { import {
expandNotifications, expandNotifications,
scrollTopNotifications, scrollTopNotifications,
......
...@@ -32,12 +32,12 @@ import { ...@@ -32,12 +32,12 @@ import {
import { initMuteModal } from '../../actions/mutes'; import { initMuteModal } from '../../actions/mutes';
import { initReport } from '../../actions/reports'; import { initReport } from '../../actions/reports';
import { makeGetStatus } from '../../selectors'; import { makeGetStatus } from '../../selectors';
import ColumnHeader from '../../components/column_header'; import { ColumnHeader } from '../../components/column_header';
import StatusContainer from '../../containers/status_container'; import StatusContainer from '../../containers/status_container';
import { openModal } from '../../actions/modal'; import { openModal } from '../../actions/modal';
import { boostModal, deleteModal, me } from '../../initial_state'; import { boostModal, deleteModal, me } from '../../initial_state';
import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../../utils/fullscreen'; import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../../utils/fullscreen';
import { textForScreenReader, defaultMediaVisibility } from '../../components/status'; import { textForScreenReader, defaultMediaVisibility } from '../../components/status/status';
import Icon from '../../components/icon'; import Icon from '../../components/icon';
import ColumnIndicator from '../../components/column_indicator'; import ColumnIndicator from '../../components/column_indicator';
......
...@@ -18,7 +18,7 @@ import { openModal } from '../../actions/modal'; ...@@ -18,7 +18,7 @@ import { openModal } from '../../actions/modal';
import WrappedRoute from './util/wrapped_route'; import WrappedRoute from './util/wrapped_route';
import UploadArea from '../../components/upload_area'; import UploadArea from '../../components/upload_area';
import TabsBar from '../../components/tabs_bar'; import TabsBar from '../../components/tabs_bar';
import WhoToFollowPanel from '../../components/panel'; import { WhoToFollowPanel } from '../../components/panel';
import LinkFooter from '../../components/link_footer'; import LinkFooter from '../../components/link_footer';
import ProfilePage from 'gabsocial/pages/profile_page'; import ProfilePage from 'gabsocial/pages/profile_page';
import GroupPage from 'gabsocial/pages/group_page'; import GroupPage from 'gabsocial/pages/group_page';
...@@ -65,6 +65,7 @@ import '../../components/status'; ...@@ -65,6 +65,7 @@ import '../../components/status';
import { fetchGroups } from '../../actions/groups'; import { fetchGroups } from '../../actions/groups';
import { Fragment } from 'react'; import { Fragment } from 'react';
import '../../../styles/application.scss';
import './ui.scss'; import './ui.scss';
const messages = defineMessages({ const messages = defineMessages({
......
...@@ -2,9 +2,9 @@ import { Fragment } from 'react'; ...@@ -2,9 +2,9 @@ import { Fragment } from 'react';
import { PropTypes } from 'prop-types'; import { PropTypes } from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import WhoToFollowPanel from '../components/panel'; import { WhoToFollowPanel } from '../components/panel';
import LinkFooter from '../components/link_footer'; import LinkFooter from '../components/link_footer';
import PromoPanel from '../components/panel'; import PromoPanel from '../components/promo_panel';
import HeaderContainer from '../features/groups/timeline/containers/header_container'; import HeaderContainer from '../features/groups/timeline/containers/header_container';
import GroupPanel from '../features/groups/timeline/components/panel'; import GroupPanel from '../features/groups/timeline/components/panel';
import { fetchGroup } from '../actions/groups'; import { fetchGroup } from '../actions/groups';
......
...@@ -130,11 +130,11 @@ ...@@ -130,11 +130,11 @@
line-height: $lineHeight; line-height: $lineHeight;
} }
@if ($textAlign != '') { @if ($textAlign !='') {
text-align: $textAlign; text-align: $textAlign;
} }
@if ($letterSpacing != '') { @if ($letterSpacing !='') {
letter-spacing: $letterSpacing; letter-spacing: $letterSpacing;
} }
} }
...@@ -184,11 +184,11 @@ ...@@ -184,11 +184,11 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@if ($whitespace != '') { @if ($whitespace !='') {
white-space: $whitespace; white-space: $whitespace;
} }
@if ($wordWrap != '') { @if ($wordWrap !='') {
word-wrap: $wordWrap; word-wrap: $wordWrap;
} }
} }
...@@ -247,6 +247,7 @@ ...@@ -247,6 +247,7 @@
@include text-sizing(16px, 400, 19px); @include text-sizing(16px, 400, 19px);
@include border-design($gab-placeholder-accent, 1px, 4px); @include border-design($gab-placeholder-accent, 1px, 4px);
@include input-placeholder { @include input-placeholder {
color: $gab-placeholder-accent; color: $gab-placeholder-accent;
} }
...@@ -260,4 +261,58 @@ ...@@ -260,4 +261,58 @@
&:active { &:active {
outline: 0 !important; outline: 0 !important;
} }
}
// TYPEOGRAPHY MIXINS
// declare the font family using these shortcuts
@mixin font-roboto() {
font-family: 'Roboto', Arial, sans-serif !important;
}
@mixin font-montserrat() {
font-family: 'Montserrat', Arial, sans-serif !important;
}
// Declare font weights as a numerical value in rendered output
// Prevents certain browsers which do not play nice with "light, medium" textual declarations
// Numeical values always work more consistently across browsers
// Each font-weight is linked with the @font-face declaration to the actual font file
@mixin font-weight($weight) {
@if $weight=='light' {
font-weight: 300;
}
@if $weight=='normal' {
font-weight: 400;
}
@if $weight=='medium' {
font-weight: 500;
}
@if $weight=='bold' {
font-weight: 700;
}
@if $weight=='extrabold' {
font-weight: 800;
}
}
// Use these mixins to define font-size and line-height
// html and body declaration allows developer to pass px value as argument
// Rendered css will default to "rem" and fall back to "px" for unsupported browsers
@mixin font-size($size) {
$rem: ($size / 10);
$px: $size;
font-size: #{$px + "px"};
font-size: #{$rem + "rem"};
}
@mixin line-height($size) {
$rem: ($size / 10);
$px: $size;
line-height: #{$px + "px"};
line-height: #{$rem + "rem"};
} }
\ No newline at end of file
@import './_variables';
@import './_colors';
@import './_themes';
@import './_font_families';
@import './_mixins';
@import './variables';
@import './colors';
@import './themes';
@import './font_families';
@import './mixins';
@import '_variables';
@import '_colors';
@import '_themes';
@import '_font_families';
@import '_mixins';
@import 'variables';
@import 'colors';
@import 'themes';
@import 'font_families';
@import 'mixins';
@import 'gabsocial/variables';
@import './gabsocial/variables'; @import './gabsocial/variables';
// @import 'gabsocial/fonts'; @import 'gabsocial/fonts';
// @import 'gabsocial/reset'; @import 'gabsocial/reset';
// @import 'gabsocial/scrollbars'; @import 'gabsocial/basics';
// @import 'gabsocial/basics'; @import 'gabsocial/containers';
// @import 'gabsocial/containers'; @import 'gabsocial/lists';
// @import 'gabsocial/lists'; @import 'gabsocial/footer';
// @import 'gabsocial/footer'; @import 'gabsocial/compact_header';
// @import 'gabsocial/compact_header'; @import 'gabsocial/widgets';
// @import 'gabsocial/widgets'; @import 'gabsocial/forms';
// @import 'gabsocial/forms'; @import 'gabsocial/accounts';
// @import 'gabsocial/accounts'; @import 'gabsocial/stream_entries';
// @import 'gabsocial/stream_entries';
// @import 'gabsocial/boost';
// NOTE - In the process of stripping this giant file into individual components (below) // NOTE - In the process of stripping this giant file into individual components (below)
// @import 'gabsocial/components'; @import 'gabsocial/components';
// COMPONENTS // COMPONENTS
// @import 'gabsocial/components/buttons'; @import 'gabsocial/components/inputs';
// @import 'gabsocial/components/inputs'; @import 'gabsocial/components/tabs-bar';
// @import 'gabsocial/components/tabs-bar'; @import 'gabsocial/components/dropdown-menu';
// @import 'gabsocial/components/dropdown-menu'; @import 'gabsocial/components/modal';
// @import 'gabsocial/components/modal'; @import 'gabsocial/components/account-header';
// @import 'gabsocial/components/account-header'; @import 'gabsocial/components/user-panel';
// @import 'gabsocial/components/user-panel'; @import 'gabsocial/components/compose-form';
// @import 'gabsocial/components/compose-form'; @import 'gabsocial/components/group-card';
// @import 'gabsocial/components/group-card'; @import 'gabsocial/components/group-detail';
// @import 'gabsocial/components/group-detail'; @import 'gabsocial/components/group-form';
// @import 'gabsocial/components/group-form'; @import 'gabsocial/components/group-sidebar-panel';
// @import 'gabsocial/components/group-sidebar-panel';
@import 'gabsocial/polls';
// @import 'gabsocial/polls'; @import 'gabsocial/emoji_picker';
// @import 'gabsocial/introduction'; @import 'gabsocial/about';
// @import 'gabsocial/emoji_picker'; @import 'gabsocial/tables';
// @import 'gabsocial/about'; @import 'gabsocial/admin';
// @import 'gabsocial/tables'; @import 'gabsocial/dashboard';
// @import 'gabsocial/admin'; @import 'gabsocial/rtl';
// @import 'gabsocial/dashboard'; @import 'gabsocial/accessibility';
// @import 'gabsocial/rtl'; \ No newline at end of file
// @import 'gabsocial/accessibility';
\ No newline at end of file
// @import 'contrast/variables';
// @import 'application';
// @import 'contrast/diff';
// @import 'gabsocial-light/variables';
// @import 'application';
// @import 'gabsocial-light/diff';
...@@ -321,10 +321,6 @@ ...@@ -321,10 +321,6 @@
} }
.box-widget, .box-widget,
.contact-widget,
.landing-page__information.contact-widget,
.moved-account-widget,
.memoriam-widget,
.activity-stream, .activity-stream,
.nothing-here, .nothing-here,
.directory__tag > a, .directory__tag > a,
......
...@@ -632,66 +632,6 @@ $small-breakpoint: 960px; ...@@ -632,66 +632,6 @@ $small-breakpoint: 960px;
border-radius: 0; border-radius: 0;
} }
.hero-widget {
@include vertical-margin(30px, 0);
h4 {
padding: 10px;
text-transform: uppercase;
color: $darker-text-color;
@include text-sizing(13px, 700);
}
&__text {
border-radius: 0;
padding-bottom: 0;
}
&__footer {
background: $ui-base-color;
padding: 10px;
border-radius: 0 0 4px 4px;
display: flex;
&__column {
flex: 1 1 50%;
}
}
.account {
padding: 10px 0;
border-bottom: 0;
.account__display-name {
display: flex;
align-items: center;
}
.account__avatar {
background-size: 44px 44px;
@include size(44px);
}
}
&__counter {
padding: 10px;
strong {
font-family: $font-display, sans-serif;
display: block;
@include text-sizing(15px, 700);
}
span {
font-size: 14px;
color: $darker-text-color;
}
}
}
.simple_form .user_agreement .label_input > label { .simple_form .user_agreement .label_input > label {
font-weight: 400; font-weight: 400;
color: $darker-text-color; color: $darker-text-color;
...@@ -724,13 +664,6 @@ $small-breakpoint: 960px; ...@@ -724,13 +664,6 @@ $small-breakpoint: 960px;
order: 2; order: 2;
flex: 0 0 auto; flex: 0 0 auto;
} }
.hero-widget {
order: 1;
flex: 0 0 auto;
@include vertical-margin(0, 10px);
}
} }
&__column-registration { &__column-registration {
...@@ -745,19 +678,6 @@ $small-breakpoint: 960px; ...@@ -745,19 +678,6 @@ $small-breakpoint: 960px;
@media screen and (max-width: $no-gap-breakpoint) { @media screen and (max-width: $no-gap-breakpoint) {
grid-gap: 0; grid-gap: 0;
.hero-widget {
display: block;
margin-bottom: 0;
box-shadow: none;
&__img,
&__img img,
&__footer {
border-radius: 0;
}
}
.hero-widget,
.box-widget, .box-widget,
.directory__tag { .directory__tag {
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid lighten($ui-base-color, 8%);
......
...@@ -139,7 +139,6 @@ button { ...@@ -139,7 +139,6 @@ button {
} }
.app-holder { .app-holder {
&, &,
&>div { &>div {
outline: 0 !important; outline: 0 !important;
......
This diff is collapsed.
...@@ -3,101 +3,6 @@ ...@@ -3,101 +3,6 @@
-ms-overflow-style: -ms-autohiding-scrollbar; -ms-overflow-style: -ms-autohiding-scrollbar;
} }
.button {
background-color: $ui-highlight-color;
border: 10px none;
border-radius: 4px;
box-sizing: border-box;
color: $primary-text-color;
cursor: pointer;
display: inline-block;
font-family: inherit;
padding: 0 16px;
position: relative;
text-decoration: none;
@include size(auto, 36px);
@include text-overflow(nowrap);
@include text-sizing(14px, 500, 36px, center, 0);
&:active,
&:focus,
&:hover {
background-color: lighten($ui-highlight-color, 10%);
}
&--destructive {
transition: none;
&:active,
&:focus,
&:hover {
background-color: $error-red;
transition: none;
}
}
&:disabled,
&.disabled {
background-color: $ui-primary-color;
cursor: default;
}
&::-moz-focus-inner {
border: 0;
}
&::-moz-focus-inner,
&:focus,
&:active {
outline: 0 !important;
}
&.button-alternative {
color: $inverted-text-color;
background: $ui-primary-color;
&:active,
&:focus,
&:hover {
background-color: lighten($ui-primary-color, 4%);
}
}
&.button-alternative-2 {
background: $ui-base-lighter-color;
&:active,
&:focus,
&:hover {
background-color: lighten($ui-base-lighter-color, 4%);
}
}
&.button-secondary {
color: $darker-text-color;
background: transparent;
padding: 3px 15px;
border: 1px solid $ui-primary-color;
&:active,
&:focus,
&:hover {
border-color: lighten($ui-primary-color, 4%);
color: lighten($darker-text-color, 4%);
}
&:disabled {
opacity: 0.5;
}