Commit a2b5d72e authored by mgabdev's avatar mgabdev

Progress

parent 3af35f48
import { defineMessages, injectIntl } from 'react-intl';
import Column from '../column';
import ColumnHeader from '../column_header';
import { ColumnHeader } from '../column_header';
import IconButton from '../icon_button';
import './bundle_column_error.scss';
......
......@@ -7,7 +7,7 @@ import Video from '../features/video';
import Card from '../features/status/components/card';
import Poll from 'gabsocial/components/poll';
import ModalRoot from '../components/modal_root';
import MediaModal from '../components/modal';
import { MediaModal } from '../components/modal';
import { List as ImmutableList, fromJS } from 'immutable';
const { localeData, messages } = getLocale();
......
......@@ -2,7 +2,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import StatusListContainer from '../../containers/status_list_container';
import Column from '../../components/column';
import ColumnSettings from './components/column_settings';
import HomeColumnHeader from '../../components/column_header';
import { HomeColumnHeader } from '../../components/column_header';
import {
expandCommunityTimeline,
expandPublicTimeline,
......
......@@ -5,7 +5,7 @@ import AccountContainer from '../../../../containers/account_container';
import StatusContainer from '../../../../containers/status_container';
import TrendingItem from '../../../../components/trending_item';
import Icon from '../../../../components/icon';
import WhoToFollowPanel from '../../../../components/panel';
import { WhoToFollowPanel } from '../../../../components/panel';
import './search_results.scss';
......
......@@ -101,7 +101,7 @@ class Create extends PureComponent {
disabled={disabled}
onChange={this.handleCoverImageChange}
/>
<button className='standard-small'>{intl.formatMessage(messages.create)}</button>
<button className='button'>{intl.formatMessage(messages.create)}</button>
</div>
</form>
);
......
......@@ -47,7 +47,7 @@ class Groups extends ImmutablePureComponent {
return (
<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="column-header__wrapper">
......
import StatusListContainer from '../../containers/status_list_container';
import Column from '../../components/column';
import ColumnHeader from '../../components/column_header';
import { ColumnHeader } from '../../components/column_header';
import { expandHashtagTimeline, clearTimeline } from '../../actions/timelines';
import { FormattedMessage } from 'react-intl';
import { connectHashtagStream } from '../../actions/streaming';
......
......@@ -10,7 +10,7 @@ import { fetchList, deleteList } from '../../actions/lists';
import { openModal } from '../../actions/modal';
import ColumnIndicator from '../../components/column_indicator';
import Icon from '../../components/icon';
import HomeColumnHeader from '../../components/column_header';
import { HomeColumnHeader } from '../../components/column_header';
import Button from '../../components/button';
import ColumnHeaderSettingButton from '../../components/column_header_setting_button';
......
......@@ -5,7 +5,7 @@ import { createSelector } from 'reselect';
import { List as ImmutableList } from 'immutable';
import { debounce } from 'lodash';
import Column from '../../components/column';
import ColumnHeader from '../../components/column_header';
import { ColumnHeader } from '../../components/column_header';
import {
expandNotifications,
scrollTopNotifications,
......
......@@ -32,12 +32,12 @@ import {
import { initMuteModal } from '../../actions/mutes';
import { initReport } from '../../actions/reports';
import { makeGetStatus } from '../../selectors';
import ColumnHeader from '../../components/column_header';
import { ColumnHeader } from '../../components/column_header';
import StatusContainer from '../../containers/status_container';
import { openModal } from '../../actions/modal';
import { boostModal, deleteModal, me } from '../../initial_state';
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 ColumnIndicator from '../../components/column_indicator';
......
......@@ -18,7 +18,7 @@ import { openModal } from '../../actions/modal';
import WrappedRoute from './util/wrapped_route';
import UploadArea from '../../components/upload_area';
import TabsBar from '../../components/tabs_bar';
import WhoToFollowPanel from '../../components/panel';
import { WhoToFollowPanel } from '../../components/panel';
import LinkFooter from '../../components/link_footer';
import ProfilePage from 'gabsocial/pages/profile_page';
import GroupPage from 'gabsocial/pages/group_page';
......@@ -65,6 +65,7 @@ import '../../components/status';
import { fetchGroups } from '../../actions/groups';
import { Fragment } from 'react';
import '../../../styles/application.scss';
import './ui.scss';
const messages = defineMessages({
......
......@@ -2,9 +2,9 @@ import { Fragment } from 'react';
import { PropTypes } from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import WhoToFollowPanel from '../components/panel';
import { WhoToFollowPanel } from '../components/panel';
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 GroupPanel from '../features/groups/timeline/components/panel';
import { fetchGroup } from '../actions/groups';
......
......@@ -130,11 +130,11 @@
line-height: $lineHeight;
}
@if ($textAlign != '') {
@if ($textAlign !='') {
text-align: $textAlign;
}
@if ($letterSpacing != '') {
@if ($letterSpacing !='') {
letter-spacing: $letterSpacing;
}
}
......@@ -184,11 +184,11 @@
overflow: hidden;
text-overflow: ellipsis;
@if ($whitespace != '') {
@if ($whitespace !='') {
white-space: $whitespace;
}
@if ($wordWrap != '') {
@if ($wordWrap !='') {
word-wrap: $wordWrap;
}
}
......@@ -247,6 +247,7 @@
@include text-sizing(16px, 400, 19px);
@include border-design($gab-placeholder-accent, 1px, 4px);
@include input-placeholder {
color: $gab-placeholder-accent;
}
......@@ -260,4 +261,58 @@
&:active {
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/fonts';
// @import 'gabsocial/reset';
// @import 'gabsocial/scrollbars';
// @import 'gabsocial/basics';
// @import 'gabsocial/containers';
// @import 'gabsocial/lists';
// @import 'gabsocial/footer';
// @import 'gabsocial/compact_header';
// @import 'gabsocial/widgets';
// @import 'gabsocial/forms';
// @import 'gabsocial/accounts';
// @import 'gabsocial/stream_entries';
// @import 'gabsocial/boost';
@import 'gabsocial/fonts';
@import 'gabsocial/reset';
@import 'gabsocial/basics';
@import 'gabsocial/containers';
@import 'gabsocial/lists';
@import 'gabsocial/footer';
@import 'gabsocial/compact_header';
@import 'gabsocial/widgets';
@import 'gabsocial/forms';
@import 'gabsocial/accounts';
@import 'gabsocial/stream_entries';
// NOTE - In the process of stripping this giant file into individual components (below)
// @import 'gabsocial/components';
@import 'gabsocial/components';
// COMPONENTS
// @import 'gabsocial/components/buttons';
// @import 'gabsocial/components/inputs';
// @import 'gabsocial/components/tabs-bar';
// @import 'gabsocial/components/dropdown-menu';
// @import 'gabsocial/components/modal';
// @import 'gabsocial/components/account-header';
// @import 'gabsocial/components/user-panel';
// @import 'gabsocial/components/compose-form';
// @import 'gabsocial/components/group-card';
// @import 'gabsocial/components/group-detail';
// @import 'gabsocial/components/group-form';
// @import 'gabsocial/components/group-sidebar-panel';
// @import 'gabsocial/polls';
// @import 'gabsocial/introduction';
// @import 'gabsocial/emoji_picker';
// @import 'gabsocial/about';
// @import 'gabsocial/tables';
// @import 'gabsocial/admin';
// @import 'gabsocial/dashboard';
// @import 'gabsocial/rtl';
// @import 'gabsocial/accessibility';
\ No newline at end of file
@import 'gabsocial/components/inputs';
@import 'gabsocial/components/tabs-bar';
@import 'gabsocial/components/dropdown-menu';
@import 'gabsocial/components/modal';
@import 'gabsocial/components/account-header';
@import 'gabsocial/components/user-panel';
@import 'gabsocial/components/compose-form';
@import 'gabsocial/components/group-card';
@import 'gabsocial/components/group-detail';
@import 'gabsocial/components/group-form';
@import 'gabsocial/components/group-sidebar-panel';
@import 'gabsocial/polls';
@import 'gabsocial/emoji_picker';
@import 'gabsocial/about';
@import 'gabsocial/tables';
@import 'gabsocial/admin';
@import 'gabsocial/dashboard';
@import 'gabsocial/rtl';
@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 @@
}
.box-widget,
.contact-widget,
.landing-page__information.contact-widget,
.moved-account-widget,
.memoriam-widget,
.activity-stream,
.nothing-here,
.directory__tag > a,
......
......@@ -632,66 +632,6 @@ $small-breakpoint: 960px;
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 {
font-weight: 400;
color: $darker-text-color;
......@@ -724,13 +664,6 @@ $small-breakpoint: 960px;
order: 2;
flex: 0 0 auto;
}
.hero-widget {
order: 1;
flex: 0 0 auto;
@include vertical-margin(0, 10px);
}
}
&__column-registration {
......@@ -745,19 +678,6 @@ $small-breakpoint: 960px;
@media screen and (max-width: $no-gap-breakpoint) {
grid-gap: 0;
.hero-widget {
display: block;
margin-bottom: 0;
box-shadow: none;
&__img,
&__img img,
&__footer {
border-radius: 0;
}
}
.hero-widget,
.box-widget,
.directory__tag {
border-bottom: 1px solid lighten($ui-base-color, 8%);
......
......@@ -139,7 +139,6 @@ button {
}
.app-holder {
&,
&>div {
outline: 0 !important;
......
This diff is collapsed.
......@@ -3,101 +3,6 @@
-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;
}
}
&.button--block {
display: block;
width: 100%;
}
}
.invisible {
font-size: 0 !important;
line-height: 0 !important;
......
button,
a.button {
&.standard {
// NOTE - will define the larger standard buttons here and apply class where used.
&-small {
height: 20px;
padding: 5px 15px;
border: none;
border-radius: 4px;
text-transform: uppercase;
color: white;
background: $gab-small-cta-primary;
@include text-sizing(11px, 700, 11px);
}
}
}
// Roboto Regular
@font-face {
font-family: 'Roboto';
font-weight: 400;
font-style: normal;
src: url('../fonts/roboto/roboto-regular-400.eot?#iefix');
src: url('../fonts/roboto/roboto-regular-400.eot?#iefix') format('embedded-opentype'),
url('../fonts/roboto/roboto-regular-400.woff2') format('woff2'),
url('../fonts/roboto/roboto-regular-400.woff') format('woff'),
url('../fonts/roboto/roboto-regular-400.ttf') format('truetype'),
url('../fonts/roboto/roboto-regular-400.svg') format('svg');
}
font-family: 'Roboto';
font-weight: 400;
font-style: normal;
src: url('../fonts/roboto/roboto-regular-400.eot?#iefix');
src: url('../fonts/roboto/roboto-regular-400.eot?#iefix') format('embedded-opentype'),
url('../fonts/roboto/roboto-regular-400.woff2') format('woff2'),
url('../fonts/roboto/roboto-regular-400.woff') format('woff'),
url('../fonts/roboto/roboto-regular-400.ttf') format('truetype'),
url('../fonts/roboto/roboto-regular-400.svg') format('svg');
}
// Roboto Light
@font-face {
font-family: 'Roboto';
font-weight: 300;
font-style: normal;
src: url('../fonts/roboto/roboto-light-300.eot?#iefix');
src: url('../fonts/roboto/roboto-light-300.eot?#iefix') format('embedded-opentype'),
url('../fonts/roboto/roboto-light-300.woff2') format('woff2'),
url('../fonts/roboto/roboto-light-300.woff') format('woff'),
url('../fonts/roboto/roboto-light-300.ttf') format('truetype'),
url('../fonts/roboto/roboto-light-300.svg') format('svg');
}
font-family: 'Roboto';
font-weight: 300;