mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

PLT-2395 - Improvements to backstage css

Просмотр исходного кода
Этот коммит содержится в:
Asaad Mahmood
2016-04-04 17:19:27 +05:00
коммит произвёл Christopher Speller
родитель 94ab36500f
Коммит d7f394a49b
15 изменённых файлов: 484 добавлений и 349 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

34
webapp/components/backstage/add_incoming_webhook.jsx
Просмотреть файл

@@ -96,10 +96,10 @@ export default class AddIncomingWebhook extends React.Component {
render() { render() {
return ( return (
<div className='backstage row'> <div className='backstage-content row'>
<div className='add-incoming-webhook'> <div className='add-incoming-webhook'>
<div className='backstage__header'> <div className='backstage-header'>
<h1 className='text'> <h1>
<FormattedMessage <FormattedMessage
id='add_incoming_webhook.header' id='add_incoming_webhook.header'
defaultMessage='Add Incoming Webhook' defaultMessage='Add Incoming Webhook'
@@ -107,10 +107,11 @@ export default class AddIncomingWebhook extends React.Component {
</h1> </h1>
</div> </div>
</div> </div>
<form className='add-incoming-webhook__body'> <div className='backstage-form'>
<div className='add-integration__row'> <form className='form-horizontal'>
<div className='form-group'>
<label <label
className='add-integration__label' className='control-label col-sm-3'
htmlFor='name' htmlFor='name'
> >
<FormattedMessage <FormattedMessage
@@ -118,16 +119,19 @@ export default class AddIncomingWebhook extends React.Component {
defaultMessage='Name' defaultMessage='Name'
/> />
</label> </label>
<div className='col-md-5 col-sm-9'>
<input <input
id='name' id='name'
type='text' type='text'
className='form-control'
value={this.state.name} value={this.state.name}
onChange={this.updateName} onChange={this.updateName}
/> />
</div> </div>
<div className='add-integration__row'> </div>
<div className='form-group'>
<label <label
className='add-integration__label' className='control-label col-sm-3'
htmlFor='description' htmlFor='description'
> >
<FormattedMessage <FormattedMessage
@@ -135,16 +139,19 @@ export default class AddIncomingWebhook extends React.Component {
defaultMessage='Description' defaultMessage='Description'
/> />
</label> </label>
<div className='col-md-5 col-sm-9'>
<input <input
id='description' id='description'
type='text' type='text'
className='form-control'
value={this.state.description} value={this.state.description}
onChange={this.updateDescription} onChange={this.updateDescription}
/> />
</div> </div>
<div className='add-integration__row'> </div>
<div className='form-group'>
<label <label
className='add-integration__label' className='control-label col-sm-3'
htmlFor='channelId' htmlFor='channelId'
> >
<FormattedMessage <FormattedMessage
@@ -152,13 +159,16 @@ export default class AddIncomingWebhook extends React.Component {
defaultMessage='Channel' defaultMessage='Channel'
/> />
</label> </label>
<div className='col-md-5 col-sm-9'>
<ChannelSelect <ChannelSelect
id='channelId' id='channelId'
value={this.state.channelId} value={this.state.channelId}
onChange={this.updateChannelId} onChange={this.updateChannelId}
/> />
</div> </div>
<div className='add-integration__submit-row'> </div>
<div className='backstage-form__footer'>
<FormError errors={[this.state.serverError, this.state.clientError]}/>
<Link <Link
className='btn btn-sm' className='btn btn-sm'
to={'/settings/integrations/add'} to={'/settings/integrations/add'}
@@ -180,9 +190,9 @@ export default class AddIncomingWebhook extends React.Component {
/> />
</SpinnerButton> </SpinnerButton>
</div> </div>
<FormError errors={[this.state.serverError, this.state.clientError]}/>
</form> </form>
</div> </div>
</div>
); );
} }
} }

10
webapp/components/backstage/add_integration.jsx
Просмотреть файл

@@ -57,18 +57,16 @@ export default class AddIntegration extends React.Component {
} }
return ( return (
<div className='backstage row'> <div className='backstage-content row'>
<div className='add-integration'> <div className='backstage-header'>
<div className='backstage__header'> <h1>
<h1 className='text'>
<FormattedMessage <FormattedMessage
id='add_integration.header' id='add_integration.header'
defaultMessage='Add Integration' defaultMessage='Add Integration'
/> />
</h1> </h1>
</div> </div>
</div> <div>
<div className='add-integration__options'>
{options} {options}
</div> </div>
</div> </div>

8
webapp/components/backstage/add_integration_option.jsx
Просмотреть файл

@@ -21,16 +21,16 @@ export default class AddIntegrationOption extends React.Component {
return ( return (
<Link <Link
to={link} to={link}
className='add-integration-option' className='add-integration'
> >
<img <img
className='add-integration-option__image' className='add-integration__image'
src={image} src={image}
/> />
<div className='add-integration-option__title'> <div className='add-integration__title'>
{title} {title}
</div> </div>
<div className='add-integration-option__description'> <div className='add-integration__description'>
{description} {description}
</div> </div>
</Link> </Link>

48
webapp/components/backstage/add_outgoing_webhook.jsx
Просмотреть файл

@@ -128,10 +128,10 @@ export default class AddOutgoingWebhook extends React.Component {
render() { render() {
return ( return (
<div className='backstage row'> <div className='backstage-content row'>
<div className='add-outgoing-webhook'> <div className='add-outgoing-webhook'>
<div className='backstage__header'> <div className='backstage-header'>
<h1 className='text'> <h1>
<FormattedMessage <FormattedMessage
id='add_outgoing_webhook.header' id='add_outgoing_webhook.header'
defaultMessage='Add Outgoing Webhook' defaultMessage='Add Outgoing Webhook'
@@ -139,10 +139,11 @@ export default class AddOutgoingWebhook extends React.Component {
</h1> </h1>
</div> </div>
</div> </div>
<form className='add-outgoing-webhook__body'> <div className='backstage-form'>
<div className='add-integration__row'> <form className='form-horizontal'>
<div className='form-group'>
<label <label
className='add-integration__label' className='control-label col-sm-3'
htmlFor='name' htmlFor='name'
> >
<FormattedMessage <FormattedMessage
@@ -150,16 +151,19 @@ export default class AddOutgoingWebhook extends React.Component {
defaultMessage='Name' defaultMessage='Name'
/> />
</label> </label>
<div className='col-md-5 col-sm-9'>
<input <input
id='name' id='name'
type='text' type='text'
className='form-control'
value={this.state.name} value={this.state.name}
onChange={this.updateName} onChange={this.updateName}
/> />
</div> </div>
<div className='add-integration__row'> </div>
<div className='form-group'>
<label <label
className='add-integration__label' className='control-label col-sm-3'
htmlFor='description' htmlFor='description'
> >
<FormattedMessage <FormattedMessage
@@ -167,16 +171,19 @@ export default class AddOutgoingWebhook extends React.Component {
defaultMessage='Description' defaultMessage='Description'
/> />
</label> </label>
<div className='col-md-5 col-sm-9'>
<input <input
id='description' id='description'
type='text' type='text'
className='form-control'
value={this.state.description} value={this.state.description}
onChange={this.updateDescription} onChange={this.updateDescription}
/> />
</div> </div>
<div className='add-integration__row'> </div>
<div className='form-group'>
<label <label
className='add-integration__label' className='control-label col-sm-3'
htmlFor='channelId' htmlFor='channelId'
> >
<FormattedMessage <FormattedMessage
@@ -184,15 +191,17 @@ export default class AddOutgoingWebhook extends React.Component {
defaultMessage='Channel' defaultMessage='Channel'
/> />
</label> </label>
<div className='col-md-5 col-sm-9'>
<ChannelSelect <ChannelSelect
id='channelId' id='channelId'
value={this.state.channelId} value={this.state.channelId}
onChange={this.updateChannelId} onChange={this.updateChannelId}
/> />
</div> </div>
<div className='add-integration__row'> </div>
<div className='form-group'>
<label <label
className='add-integration__label' className='control-label col-sm-3'
htmlFor='triggerWords' htmlFor='triggerWords'
> >
<FormattedMessage <FormattedMessage
@@ -200,16 +209,19 @@ export default class AddOutgoingWebhook extends React.Component {
defaultMessage='Trigger Words (One Per Line)' defaultMessage='Trigger Words (One Per Line)'
/> />
</label> </label>
<div className='col-md-5 col-sm-9'>
<textarea <textarea
id='triggerWords' id='triggerWords'
rows='3' rows='3'
className='form-control'
value={this.state.triggerWords} value={this.state.triggerWords}
onChange={this.updateTriggerWords} onChange={this.updateTriggerWords}
/> />
</div> </div>
<div className='add-integration__row'> </div>
<div className='form-group'>
<label <label
className='add-integration__label' className='control-label col-sm-3'
htmlFor='callbackUrls' htmlFor='callbackUrls'
> >
<FormattedMessage <FormattedMessage
@@ -217,14 +229,18 @@ export default class AddOutgoingWebhook extends React.Component {
defaultMessage='Callback URLs (One Per Line)' defaultMessage='Callback URLs (One Per Line)'
/> />
</label> </label>
<div className='col-md-5 col-sm-9'>
<textarea <textarea
id='callbackUrls' id='callbackUrls'
rows='3' rows='3'
className='form-control'
value={this.state.callbackUrls} value={this.state.callbackUrls}
onChange={this.updateCallbackUrls} onChange={this.updateCallbackUrls}
/> />
</div> </div>
<div className='add-integration__submit-row'> </div>
<div className='backstage-form__footer'>
<FormError errors={[this.state.serverError, this.state.clientError]}/>
<Link <Link
className='btn btn-sm' className='btn btn-sm'
to={'/settings/integrations/add'} to={'/settings/integrations/add'}
@@ -246,9 +262,9 @@ export default class AddOutgoingWebhook extends React.Component {
/> />
</SpinnerButton> </SpinnerButton>
</div> </div>
<FormError errors={[this.state.serverError, this.state.clientError]}/>
</form> </form>
</div> </div>
</div>
); );
} }
} }

2
webapp/components/backstage/backstage_category.jsx
Просмотреть файл

@@ -50,7 +50,7 @@ export default class BackstageCategory extends React.Component {
} }
return ( return (
<li className='backstage__sidebar__category'> <li className='backstage-sidebar__category'>
<Link <Link
to={link} to={link}
className='category-title' className='category-title'

4
webapp/components/backstage/backstage_navbar.jsx
Просмотреть файл

@@ -39,9 +39,9 @@ export default class BackstageNavbar extends React.Component {
} }
return ( return (
<div className='backstage__navbar row'> <div className='backstage-navbar row'>
<Link <Link
className='backstage__navbar__back' className='backstage-navbar__back'
to={`/${this.state.team.display_name}/channels/town-square`} to={`/${this.state.team.display_name}/channels/town-square`}
> >
<i className='fa fa-angle-left'/> <i className='fa fa-angle-left'/>

2
webapp/components/backstage/backstage_sidebar.jsx
Просмотреть файл

@@ -10,7 +10,7 @@ import {FormattedMessage} from 'react-intl';
export default class BackstageSidebar extends React.Component { export default class BackstageSidebar extends React.Component {
render() { render() {
return ( return (
<div className='backstage__sidebar'> <div className='backstage-sidebar'>
<ul> <ul>
<BackstageCategory <BackstageCategory
name='integrations' name='integrations'

16
webapp/components/backstage/installed_incoming_webhook.jsx
Просмотреть файл

@@ -35,26 +35,26 @@ export default class InstalledIncomingWebhook extends React.Component {
const channelName = channel ? channel.display_name : 'cannot find channel'; const channelName = channel ? channel.display_name : 'cannot find channel';
return ( return (
<div className='installed-integrations__item installed-integrations__incoming-webhook'> <div className='backstage-list__item'>
<div className='details'> <div className='item-details'>
<div className='details-row'> <div className='item-details__row'>
<span className='name'> <span className='item-details__name'>
{channelName} {channelName}
</span> </span>
<span className='type'> <span className='item-details__type'>
<FormattedMessage <FormattedMessage
id='installed_integrations.incomingWebhookType' id='installed_integrations.incomingWebhookType'
defaultMessage='(Incoming Webhook)' defaultMessage='(Incoming Webhook)'
/> />
</span> </span>
</div> </div>
<div className='details-row'> <div className='item-details__row'>
<span className='description'> <span className='item-details__description'>
{Utils.getWindowLocationOrigin() + '/hooks/' + incomingWebhook.id} {Utils.getWindowLocationOrigin() + '/hooks/' + incomingWebhook.id}
</span> </span>
</div> </div>
</div> </div>
<div className='actions'> <div className='item-actions'>
<a <a
href='#' href='#'
onClick={this.handleDeleteClick} onClick={this.handleDeleteClick}

28
webapp/components/backstage/installed_integrations.jsx
Просмотреть файл

@@ -98,9 +98,9 @@ export default class InstalledIntegrations extends React.Component {
const fields = []; const fields = [];
if (incomingWebhooks.length > 0 || outgoingWebhooks.length > 0) { if (incomingWebhooks.length > 0 || outgoingWebhooks.length > 0) {
let filterClassName = 'type-filter'; let filterClassName = 'filter-sort';
if (this.state.typeFilter === '') { if (this.state.typeFilter === '') {
filterClassName += ' type-filter--selected'; filterClassName += ' filter-sort--active';
} }
fields.push( fields.push(
@@ -131,9 +131,9 @@ export default class InstalledIntegrations extends React.Component {
</span> </span>
); );
let filterClassName = 'type-filter'; let filterClassName = 'filter-sort';
if (this.state.typeFilter === 'incomingWebhooks') { if (this.state.typeFilter === 'incomingWebhooks') {
filterClassName += ' type-filter--selected'; filterClassName += ' filter-sort--active';
} }
fields.push( fields.push(
@@ -164,9 +164,9 @@ export default class InstalledIntegrations extends React.Component {
</span> </span>
); );
let filterClassName = 'type-filter'; let filterClassName = 'filter-sort';
if (this.state.typeFilter === 'outgoingWebhooks') { if (this.state.typeFilter === 'outgoingWebhooks') {
filterClassName += ' type-filter--selected'; filterClassName += ' filter-sort--active';
} }
fields.push( fields.push(
@@ -188,7 +188,7 @@ export default class InstalledIntegrations extends React.Component {
} }
return ( return (
<div className='type-filters'> <div className='backstage-filters__sort'>
{fields} {fields}
</div> </div>
); );
@@ -243,10 +243,10 @@ export default class InstalledIntegrations extends React.Component {
} }
return ( return (
<div className='backstage row'> <div className='backstage-content row'>
<div className='installed-integrations'> <div className='installed-integrations'>
<div className='backstage__header'> <div className='backstage-header'>
<h1 className='text'> <h1>
<FormattedMessage <FormattedMessage
id='installed_integrations.header' id='installed_integrations.header'
defaultMessage='Installed Integrations' defaultMessage='Installed Integrations'
@@ -269,17 +269,21 @@ export default class InstalledIntegrations extends React.Component {
</button> </button>
</Link> </Link>
</div> </div>
<div className='installed-integrations__filters'> <div className='backstage-filters'>
{this.renderTypeFilters(this.state.incomingWebhooks, this.state.outgoingWebhooks)} {this.renderTypeFilters(this.state.incomingWebhooks, this.state.outgoingWebhooks)}
<div className='backstage-filter__search'>
<i className='fa fa-search'></i>
<input <input
type='search' type='search'
className='form-control'
placeholder={Utils.localizeMessage('installed_integrations.search', 'Search Integrations')} placeholder={Utils.localizeMessage('installed_integrations.search', 'Search Integrations')}
value={this.state.filter} value={this.state.filter}
onChange={this.updateFilter} onChange={this.updateFilter}
style={{flexGrow: 0, flexShrink: 0}} style={{flexGrow: 0, flexShrink: 0}}
/> />
</div> </div>
<div className='installed-integrations__list'> </div>
<div className='backstage-list'>
{integrations} {integrations}
</div> </div>
</div> </div>

14
webapp/components/backstage/installed_outgoing_webhook.jsx
Просмотреть файл

@@ -43,21 +43,21 @@ export default class InstalledOutgoingWebhook extends React.Component {
const channelName = channel ? channel.display_name : 'cannot find channel'; const channelName = channel ? channel.display_name : 'cannot find channel';
return ( return (
<div className='installed-integrations__item installed-integrations__outgoing-webhook'> <div className='backstage-list__item'>
<div className='details'> <div className='item-details'>
<div className='details-row'> <div className='item-details__row'>
<span className='name'> <span className='item-details__name'>
{channelName} {channelName}
</span> </span>
<span className='type'> <span className='item-details__type'>
<FormattedMessage <FormattedMessage
id='installed_integrations.outgoingWebhookType' id='installed_integrations.outgoingWebhookType'
defaultMessage='(Outgoing Webhook)' defaultMessage='(Outgoing Webhook)'
/> />
</span> </span>
</div> </div>
<div className='details-row'> <div className='item-details__row'>
<span className='description'> <span className='item-details__description'>
{Utils.getWindowLocationOrigin() + '/hooks/' + outgoingWebhook.id} {Utils.getWindowLocationOrigin() + '/hooks/' + outgoingWebhook.id}
{' - '} {' - '}
{outgoingWebhook.token} {outgoingWebhook.token}

5
webapp/sass/responsive/_desktop.scss
Просмотреть файл

@@ -48,6 +48,11 @@
} }
} }
.backstage-content {
margin: 46px 46px 46px 150px;
}
.inner-wrap { .inner-wrap {
&.move--left { &.move--left {
.file-overlay { .file-overlay {

38
webapp/sass/responsive/_mobile.scss
Просмотреть файл

@@ -1,6 +1,16 @@
@charset 'UTF-8'; @charset 'UTF-8';
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.backstage-filters {
display: block;
.backstage-filter__search {
border-bottom: 1px solid $light-gray;
margin: 10px 0;
width: 100%;
}
}
.signup-team__container { .signup-team__container {
font-size: 1em; font-size: 1em;
} }
@@ -675,9 +685,9 @@
} }
.sidebar--right { .sidebar--right {
width: 100%;
right: 0;
@include translate3d(100%, 0, 0); @include translate3d(100%, 0, 0);
right: 0;
width: 100%;
z-index: 5; z-index: 5;
&.move--left { &.move--left {
@@ -853,6 +863,30 @@
} }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
.backstage-header {
h1 {
float: none;
margin-bottom: 15px;
}
.add-integrations-link {
float: none;
}
}
.add-integration {
width: 100%;
}
.backstage-list__item {
display: block;
.actions {
margin-top: 10px;
padding: 0;
}
}
.modal { .modal {
.settings-modal { .settings-modal {
.settings-table { .settings-table {

13
webapp/sass/responsive/_tablet.scss
Просмотреть файл

@@ -15,6 +15,19 @@
} }
} }
.backstage-content {
margin: 30px;
max-width: 100%;
padding: 0;
}
.backstage-sidebar {
height: auto;
padding: 30px 15px 0;
position: relative;
width: 100%;
}
.help__format-text { .help__format-text {
display: none; display: none;
} }

235
webapp/sass/routes/_backstage.scss
Просмотреть файл

@@ -1,103 +1,106 @@
.backstage { .backstage-content {
background-color: #f2f2f2; background-color: $bg--gray;
height: 100%; height: 100%;
padding-left: 260px; margin: 46px auto;
padding-top: 45px; max-width: 960px;
padding-left: 135px;
} }
.backstage__navbar { .backstage-navbar {
background: white; background: $white;
border-bottom: lightgray 1px solid; border-bottom: 1px solid $light-gray;
margin: 0 -15px; padding: 10px 20px;
padding: 10px;
z-index: 10; z-index: 10;
} }
.backstage__navbar__back { .backstage-navbar__back {
color: black; color: inherit;
text-decoration: none;
.fa { .fa {
font-size: 1.1em;
font-weight: bold; font-weight: bold;
margin-right: 5px; margin-right: 7px;
}
&:hover,
&:active {
color: inherit;
} }
} }
.backstage__sidebar { .backstage-sidebar {
position: absolute;
left: 0;
width: 260px;
height: 100%; height: 100%;
background-color: #f2f2f2; left: 0;
padding-bottom: 20px; padding: 50px 20px;
padding-left: 20px; position: absolute;
padding-right: 20px; width: 260px;
padding-top: 45px;
z-index: 5; z-index: 5;
ul { ul {
padding: 0px;
list-style: none; list-style: none;
padding: 0;
} }
} }
.backstage__sidebar__category { .backstage-sidebar__category {
border: lightgray 1px solid; border: 1px solid $light-gray;
.category-title { .category-title {
color: gray;
display: block; display: block;
padding: 5px 10px; line-height: 36px;
padding: 0 10px;
position: relative; position: relative;
} }
.category-title--active { .category-title--active {
color: black; color: $black;
} }
.category-title__text { .category-title__text {
position: absolute;
left: 2em; left: 2em;
position: absolute;
} }
.sections { .sections {
background: white; background: $white;
border-top: lightgray 1px solid; border-top: 1px solid $light-gray;
} }
.section-title { .section-title,
.subsection-title {
display: block; display: block;
font-size: .95em;
line-height: 29px;
padding-left: 2em; padding-left: 2em;
} text-decoration: none;
.subsection {
} }
.subsection-title { .subsection-title {
display: block;
padding-left: 3em; padding-left: 3em;
} }
.section-title--active, .subsection-title--active { .section-title--active,
background-color:#2388d6; .subsection-title--active {
color: white; background-color: $primary-color;
color: $white;
font-weight: 600;
} }
} }
.backstage__sidebar__category + .backstage__sidebar__category { .backstage__sidebar__category + .backstage__sidebar__category {
border-top-width: 0px; border-top-width: 0;
} }
.installed-integrations { .backstage-header {
height: 100%; @include clearfix;
max-width: 958px;
}
.backstage__header {
margin-bottom: 20px; margin-bottom: 20px;
width: 100%; width: 100%;
.text { h1 {
display: inline; float: left;
font-size: 20px;
margin: 5px 0;
} }
.add-integrations-link { .add-integrations-link {
@@ -105,21 +108,22 @@
} }
} }
.installed-integrations__filters { .backstage-filters {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin-bottom: 8px;
width: 100%; width: 100%;
.type-filters { .backstage-filters__sort {
flex-grow: 1; flex-grow: 1;
flex-shrink: 0; flex-shrink: 0;
line-height: 30px;
.type-filter { .filter-sort {
&--selected { text-decoration: none;
color: black;
&.filter-sort--active {
color: inherit;
cursor: default; cursor: default;
font-weight: bold;
} }
} }
@@ -129,84 +133,135 @@
} }
} }
.filter-box { .backstage-filter__search {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
} position: relative;
width: 270px;
.fa {
@include opacity(.4);
left: 11px;
position: absolute;
top: 11px;
} }
.installed-integrations__list { input {
background-color: white; background: $white;
border: lightgray 1px solid; border-bottom: none;
padding-bottom: 30px;
padding-left: 30px; padding-left: 30px;
padding-right: 30px; }
padding-top: 10px; }
} }
.installed-integrations__item { .backstage-list {
border-bottom: lightgray 1px solid; background-color: $white;
display: flex; border: 1px solid $light-gray;
padding: 20px; padding: 5px 15px;
}
.details { .backstage-list__item {
border-bottom: 1px solid $light-gray;
display: flex;
padding: 20px 15px;
&:last-child {
border: none;
}
.item-details {
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
.details-row + .details-row {
margin-top: 15px;
} }
.name { .item-details__row + .item-details__row {
font-weight: bold; @include clearfix;
margin-top: 10px;
text-overflow: ellipsis;
}
.item-details__name {
font-weight: 600;
margin-bottom: 1em; margin-bottom: 1em;
} }
.type { .item-details__type {
margin-left: 6px; margin-left: 6px;
} }
.description { .item-details__description {
color: gray; color: $dark-gray;
margin-bottom: 1em; margin-bottom: 1em;
} }
}
.actions { .list-item__actions {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
padding-left: 20px; padding-left: 20px;
} }
} }
.add-integration-option { // Backstage Form
background-color: white;
border: lightgray 1px solid; .backstage-form {
background-color: $white;
border: 1px solid $light-gray;
padding: 40px 30px 30px;
label {
font-weight: normal;
}
.form-control {
background: $white;
&:focus {
border-color: $primary-color;
}
}
}
.backstage-form__footer {
border-top: 1px solid $light-gray;
margin-top: 2.5em;
padding-top: 1.8em;
text-align: right;
.has-error {
float: left;
margin: 0;
}
}
.add-integration {
background-color: $white;
border: 1px solid $light-gray;
display: inline-block; display: inline-block;
height: 210px; height: 210px;
margin-right: 30px; margin: 0 30px 20px 0;
padding: 20px; padding: 20px;
text-align: center; text-align: center;
vertical-align: top;
width: 250px; width: 250px;
&:hover { &:hover {
color: default; color: default;
text-decoration: none; text-decoration: none;
} }
&__image {
width: 80px;
height: 80px;
} }
&__title { .add-integration__image {
color: black; height: 80px;
width: 80px;
}
.add-integration__title {
color: $black;
margin-bottom: 10px; margin-bottom: 10px;
} }
&__description { .add-integration__description {
color: gray; color: $dark-gray;
}
} }

2
webapp/sass/utils/_variables.scss
Просмотреть файл

@@ -8,7 +8,7 @@ $white: rgb(255, 255, 255);
$black: rgb(0, 0, 0); $black: rgb(0, 0, 0);
$red: rgb(229, 101, 101); $red: rgb(229, 101, 101);
$yellow: rgb(255, 255, 0); $yellow: rgb(255, 255, 0);
$light-gray: rgba(0, 0, 0, .06); $light-gray: rgba(0, 0, 0, .15);
$gray: rgba(0, 0, 0, .3); $gray: rgba(0, 0, 0, .3);
$dark-gray: rgba(0, 0, 0, .5); $dark-gray: rgba(0, 0, 0, .5);