Skip to content

GitLab

Commit 1a37077b authored by tBKoT's avatar tBKoT
Browse files

Merge branch '1.1.x' of https://git.drupalcode.org/project/socialbase into... 

Merge branch '1.1.x' of https://git.drupalcode.org/project/socialbase into 3205263-update-profile-template
parents c4e504ad 1a0a37ce
Hide whitespace changes
Inline Side-by-side
assets/css/base.css
View file @ 1a37077b
......@@ -630,8 +630,46 @@ th {
.page-node-edit form .table thead th,
.path-group form .table thead th,
.page-node form .table thead th {
padding: 0.5rem 0;
font-weight: bold;
border-bottom: 2px solid #CCCCCC;
border: none;
}
.page-node-edit form .table tbody td,
.path-group form .table tbody td,
.page-node form .table tbody td {
vertical-align: middle;
}
.page-node-edit form .table tbody td.field-multiple-drag,
.path-group form .table tbody td.field-multiple-drag,
.page-node form .table tbody td.field-multiple-drag {
width: 22px;
max-width: 100%;
padding-left: 1.75rem;
padding-right: .25rem;
text-align: center;
}
.page-node-edit form .table tbody td.field-multiple-drag .tabledrag-handle,
.path-group form .table tbody td.field-multiple-drag .tabledrag-handle,
.page-node form .table tbody td.field-multiple-drag .tabledrag-handle {
position: static;
width: 22px;
padding: 0;
margin: 0 auto;
}
.page-node-edit form .table tbody td.field-multiple-drag .tabledrag-handle span:before,
.path-group form .table tbody td.field-multiple-drag .tabledrag-handle span:before,
.page-node form .table tbody td.field-multiple-drag .tabledrag-handle span:before {
top: auto;
}
.page-node-edit form .table tbody td.field-multiple-drag + td,
.path-group form .table tbody td.field-multiple-drag + td,
.page-node form .table tbody td.field-multiple-drag + td {
padding-left: .25rem;
}
.table-sm th,
......
assets/css/cards.css
View file @ 1a37077b
......@@ -25,6 +25,10 @@
font-size: 1rem;
}
summary.card__title {
padding-bottom: 15px;
}
.card__subtitle {
font-size: 0.75rem;
display: block;
......
assets/css/form-controls.css
View file @ 1a37077b
......@@ -101,6 +101,15 @@ form:not(.layout-builder-configure-block) textarea.form-control {
height: auto;
}
form:not(.layout-builder-configure-block) fieldset {
margin-top: -1.25rem;
}
form:not(.layout-builder-configure-block) details fieldset,
form:not(.layout-builder-configure-block) fieldset fieldset {
margin-top: 0;
}
form:not(.layout-builder-configure-block) input[type="search"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
......@@ -137,6 +146,11 @@ form:not(.layout-builder-configure-block) .data-policy-edit-form .form-textarea
max-width: 100%;
}
form:not(.layout-builder-configure-block) .field--widget-string-textarea .form-textarea {
max-width: 100%;
min-height: 106px;
}
form:not(.layout-builder-configure-block) .radio,
form:not(.layout-builder-configure-block) .checkbox {
position: relative;
......@@ -144,6 +158,10 @@ form:not(.layout-builder-configure-block) .checkbox {
margin-bottom: 8px;
}
form:not(.layout-builder-configure-block) .checkbox.form-item-event-all-day {
margin-bottom: 1.5rem;
}
form:not(.layout-builder-configure-block) .radio + .radio,
form:not(.layout-builder-configure-block) .checkbox + .checkbox {
margin-top: -5px;
......@@ -358,11 +376,11 @@ form:not(.layout-builder-configure-block).group-form .field--widget-options-butt
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 5px -13px 0;
margin: 5px -.75rem -8px;
}
form:not(.layout-builder-configure-block).group-form .field--widget-options-buttons .fieldgroup .fieldset-wrapper > .radio, form:not(.layout-builder-configure-block).node-form .field--widget-options-buttons .fieldgroup .fieldset-wrapper > .radio {
padding: 0 13px;
padding: 0 .75rem;
margin-top: -5px;
}
......@@ -372,12 +390,12 @@ form:not(.layout-builder-configure-block).group-form .field--widget-options-butt
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 5px -13px 0;
padding: 0 13px;
margin: 5px -.75rem -8px;
padding: 0 .75rem;
}
form:not(.layout-builder-configure-block).group-form .field--widget-options-buttons .fieldgroup#edit-field-group-allowed-visibility--wrapper #edit-field-group-allowed-visibility > .checkbox, form:not(.layout-builder-configure-block).node-form .field--widget-options-buttons .fieldgroup#edit-field-group-allowed-visibility--wrapper #edit-field-group-allowed-visibility > .checkbox {
padding: 0 13px;
padding: 0 .75rem;
margin-top: -5px;
}
......
assets/css/form-elements.css
View file @ 1a37077b
......@@ -33,7 +33,7 @@ label {
}
.form-group {
margin-bottom: 1rem;
margin-bottom: 1.5rem;
position: relative;
}
......@@ -221,31 +221,6 @@ span.form-required {
font-weight: 300;
}
.node-event-form .field--type-address .panel .panel-heading,
.node-event-edit-form .field--type-address .panel .panel-heading,
.profile-form .field--type-address .panel .panel-heading,
.group-form .field--type-address .panel .panel-heading {
margin-bottom: .5rem;
font-size: .875rem;
}
.node-event-form .field--type-address .panel [id*='address-ajax-wrapper'],
.node-event-edit-form .field--type-address .panel [id*='address-ajax-wrapper'],
.profile-form .field--type-address .panel [id*='address-ajax-wrapper'],
.group-form .field--type-address .panel [id*='address-ajax-wrapper'] {
max-width: 500px;
padding: 1.25rem 1.25rem .25rem;
background: #f3f3f3;
border-radius: 5px !important;
}
.node-event-form .field--type-address .panel [id*='address-ajax-wrapper'] label,
.node-event-edit-form .field--type-address .panel [id*='address-ajax-wrapper'] label,
.profile-form .field--type-address .panel [id*='address-ajax-wrapper'] label,
.group-form .field--type-address .panel [id*='address-ajax-wrapper'] label {
margin-bottom: .5rem;
}
.node-event-form #edit-timezone-indication .btn,
.node-event-edit-form #edit-timezone-indication .btn {
cursor: auto;
......@@ -255,12 +230,40 @@ fieldset.card legend.card__title {
width: 100%;
top: 1.5rem;
margin-bottom: 1.25rem;
padding-top: .75rem;
padding-bottom: .75rem;
}
legend.control-label {
margin-bottom: 5px;
}
.form-wrapper .card__block {
padding-bottom: 1rem;
}
details summary {
position: relative;
}
details summary svg.icon-summary-arrow {
position: absolute;
width: 24px;
height: 24px;
right: 1.25rem;
margin-right: 0;
top: .75rem;
}
details[open] summary {
border-bottom: 1px solid #e6e6e6;
}
details[open] summary svg.icon-summary-arrow {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
@media (min-width: 600px) {
.form-inline .form-group {
display: inline-block;
......
assets/css/input-groups.css
View file @ 1a37077b
.input-group {
position: relative;
display: table;
border-collapse: separate;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 23rem;
}
......@@ -27,12 +28,6 @@
outline: 0;
}
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
}
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child),
.input-group .form-control:not(:first-child):not(:last-child) {
......@@ -41,13 +36,15 @@
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
.input-group-addon {
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
padding: 6px 12px;
font-size: 16px;
font-weight: normal;
......@@ -55,6 +52,17 @@
text-align: center;
}
.input-group.input-group-expanded .input-group-addon {
padding: .75rem .5rem .75rem 1.25rem;
font-size: .875rem;
line-height: 21px;
}
.input-group.input-group-expanded .input-group-addon + .form-control {
max-width: 240px;
height: 48px;
}
.input-group-addon:first-child {
border-right: 0;
}
......@@ -79,6 +87,7 @@
max-width: none;
}
.form-disabled .input-group-addon {
background-color: #fff;
.form-disabled .input-group.input-group-expanded,
.form-disabled .input-group.input-group-expanded + .help-block {
opacity: .5;
}
components/01-base/tables/_tables.scss
View file @ 1a37077b
......@@ -95,8 +95,38 @@ th {
thead {
th {
padding: 0.5rem 0;
font-weight: bold;
border-bottom: ($table-border-width * 2) solid $table-border-color;
border: none;
}
}
tbody {
td {
vertical-align: middle;
&.field-multiple-drag {
width: 22px;
max-width: 100%;
padding-left: 1.75rem;
padding-right: .25rem;
text-align: center;
.tabledrag-handle {
position: static;
width: 22px;
padding: 0;
margin: 0 auto;
span:before {
top: auto;
}
}
+ td {
padding-left: .25rem;
}
}
}
}
}
......
components/02-atoms/cards/cards.scss
View file @ 1a37077b
......@@ -71,6 +71,11 @@
font-size: 1rem;
}
// The card title on the summary collapse block.
summary.card__title {
padding-bottom: 15px;
}
.card__subtitle {
font-size: 0.75rem;
display: block;
......
components/02-atoms/form-controls/_radio-checkbox.scss
View file @ 1a37077b
......@@ -43,6 +43,10 @@
margin-bottom: 8px;
}
.checkbox.form-item-event-all-day {
margin-bottom: 1.5rem;
}
.radio + .radio,
.checkbox + .checkbox {
margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
......@@ -281,10 +285,10 @@
.fieldset-wrapper {
display: flex;
flex-wrap: wrap;
margin: 5px -13px 0;
margin: 5px -.75rem -8px;
> .radio {
padding: 0 13px;
padding: 0 .75rem;
margin-top: -5px;
}
}
......@@ -293,11 +297,11 @@
#edit-field-group-allowed-visibility {
display: flex;
flex-wrap: wrap;
margin: 5px -13px 0;
padding: 0 13px;
margin: 5px -.75rem -8px;
padding: 0 .75rem;
> .checkbox {
padding: 0 13px;
padding: 0 .75rem;
margin-top: -5px;
}
}
......
components/02-atoms/form-controls/_textarea.scss
View file @ 1a37077b
......@@ -32,3 +32,10 @@
max-width: 100%;
}
}
.field--widget-string-textarea {
.form-textarea {
max-width: 100%;
min-height: 106px;
}
}
components/02-atoms/form-controls/form-controls.scss
View file @ 1a37077b
......@@ -125,6 +125,17 @@ form:not(.layout-builder-configure-block) {
height: auto;
}
fieldset {
margin-top: -1.25rem;
}
details,
fieldset {
fieldset {
margin-top: 0;
}
}
@import 'input';
@import 'textarea';
......
components/03-molecules/form-elements/form-elements.scss
View file @ 1a37077b
......@@ -89,7 +89,7 @@ label {
// horizontal forms, use the predefined grid classes.
.form-group {
margin-bottom: $form-group-margin-bottom;
margin-bottom: 1.5rem;
position: relative;
.radio,
......@@ -315,37 +315,8 @@ span.form-required {
}
}
// The location block styles on the event/group/profile edit pages
.field--type-address {
.node-event-form &,
.node-event-edit-form &,
.profile-form &,
.group-form & {
.panel {
.panel-heading {
margin-bottom: .5rem;
font-size: .875rem;
}
[id*='address-ajax-wrapper'] {
max-width: 500px;
padding: 1.25rem 1.25rem .25rem;
background: #f3f3f3;
border-radius: 5px !important;
label {
margin-bottom: .5rem;
}
}
}
}
}
// The time zone block on the event edit pages
#edit-timezone-indication {
.node-event-form &,
.node-event-edit-form & {
.btn {
......@@ -360,9 +331,42 @@ fieldset.card {
width: 100%;
top: 1.5rem;
margin-bottom: 1.25rem;
padding-top: .75rem;
padding-bottom: .75rem;
}
}
legend.control-label {
margin-bottom: 5px;
}
\ No newline at end of file
}
.form-wrapper {
.card__block {
padding-bottom: 1rem;
}
}
details {
summary {
position: relative;
svg.icon-summary-arrow {
position: absolute;
width: 24px;
height: 24px;
right: 1.25rem;
margin-right: 0;
top: .75rem;
}
}
&[open] {
summary {
border-bottom: 1px solid $gray-lighter;
svg.icon-summary-arrow {
transform: rotate(180deg);
}
}
}
}
components/03-molecules/form-elements/input-groups/input-groups.scss
View file @ 1a37077b
......@@ -4,8 +4,7 @@
// -------------------------
.input-group {
position: relative; // For dropdowns
display: table;
border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
display: flex;
max-width: 23rem;
// Undo padding and float of grid classes
......@@ -45,7 +44,6 @@
.input-group-addon,
.input-group-btn,
.input-group .form-control {
display: table-cell;
&:not(:first-child):not(:last-child) {
border-radius: 0;
......@@ -54,7 +52,6 @@
// Addon and addon wrapper for buttons
.input-group-addon,
.input-group-btn {
width: 1%;
white-space: nowrap;
vertical-align: middle; // Match the inputs
}
......@@ -70,6 +67,19 @@
text-align: center;
}
.input-group.input-group-expanded {
.input-group-addon {
padding: .75rem .5rem .75rem 1.25rem;
font-size: .875rem;
line-height: 21px;
+ .form-control {
max-width: 240px;
height: 48px;
}
}
}
.input-group-addon:first-child {
border-right: 0;
}
......@@ -93,6 +103,9 @@
max-width: none;
}
.form-disabled .input-group-addon {
background-color: #fff;
.form-disabled {
.input-group.input-group-expanded,
.input-group.input-group-expanded + .help-block {
opacity: .5;
}
}
\ No newline at end of file
templates/form/input--form-control.html.twig
View file @ 1a37077b
......@@ -26,9 +26,10 @@
]
%}
{{ attach_library('socialbase/form--input-groups') }}
{% spaceless %}
{% if input_group %}
{{ attach_library('socialbase/form--input-groups') }}
<div class="input-group">
{% endif %}
......
templates/system/details--collapsible.html.twig
View file @ 1a37077b
......@@ -18,8 +18,11 @@
#}
<details{{ attributes.removeAttribute('open').addClass('form-horizontal form-item js-form-item form-wrapper js-form-wrapper card panel panel-default') }}>
{%- if title -%}
<summary{{ summary_attributes.addClass('card__title card__title--underline') }}>
<summary{{ summary_attributes.addClass('card__title') }}>
{{ title }}
<svg class="icon-summary-arrow">
<use xlink:href="#icon-expand_more"></use>
</svg>
</summary>
{%- endif -%}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment