Skip to content
Snippets Groups Projects
Commit 414f2ce3 authored by Esha Kundu's avatar Esha Kundu
Browse files

Merge branch '3418802-button-design' into '2.x' 

Issue #3418802: Accessibility issue in action button and design breaks.

See merge request !12
parents 596a752a cb73b8f0
No related branches found
No related tags found
No related merge requests found
Pipeline #287228 skipped
Hide whitespace changes
Inline Side-by-side
assets/css/root-rtl.css
+ 73
− 3
View file @ 414f2ce3
......@@ -808,8 +808,8 @@ body .length-indicator .length-indicator__cursor {
}
body.seeds-root .views-exposed-form__item--actions.views-exposed-form__item--actions .button,
body .views-exposed-form__item--actions.views-exposed-form__item--actions .button {
height: 100%;
padding: 0.25rem 1.5rem;
height: auto;
padding: 1rem 1.5rem;
}
body.seeds-root .cke.cke_chrome:hover,
body .cke.cke_chrome:hover {
......@@ -914,6 +914,23 @@ body .views-exposed-form .views-exposed-form__item input:not(.form-submit):hover
body .views-exposed-form .views-exposed-form__item select:hover {
border-color: #333333;
}
body.seeds-root .views-exposed-form .views-exposed-form__item.views-exposed-form__item--actions,
body .views-exposed-form .views-exposed-form__item.views-exposed-form__item--actions {
align-items: center;
}
@media (max-width: 1200px) {
body.seeds-root .views-exposed-form .views-exposed-form__item.views-exposed-form__item--actions,
body .views-exposed-form .views-exposed-form__item.views-exposed-form__item--actions {
flex-basis: 10%;
margin-inline: 0;
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
body.seeds-root .views-exposed-form .views-exposed-form__item.views-exposed-form__item--actions,
body .views-exposed-form .views-exposed-form__item.views-exposed-form__item--actions {
flex-basis: 100%;
}
}
body.seeds-root div.autocomplete-deluxe-container div.autocomplete-deluxe-throbber,
body div.autocomplete-deluxe-container div.autocomplete-deluxe-throbber {
position: absolute;
......@@ -942,7 +959,37 @@ body.seeds-root .view .view-content form .views-bulk-actions .views-bulk-actions
body .view .view-content form .views-bulk-actions .views-bulk-actions__item label {
display: none;
}
body.seeds-root form .button.js-form-submit,
body form .button.js-form-submit {
color: #333333;
}
body.seeds-root form .button.button--primary,
body form .button.button--primary {
color: #ffffff;
}
body.seeds-root form.search-form .form-type--search,
body form.search-form .form-type--search {
margin-left: 0.75rem;
}
body.seeds-root form.search-admin-settings .form-item--search-type,
body form.search-admin-settings .form-item--search-type {
margin-left: 0.75rem;
}
body.seeds-root form.system-modules .modules-table-filter,
body form.system-modules .modules-table-filter {
margin-bottom: 1.5rem;
}
body.seeds-root form.system-clear-cache,
body form.system-clear-cache {
margin-bottom: 1rem;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
body.seeds-root .views-exposed-form#views-exposed-form-user-admin-people-page-1 .views-exposed-form__item:first-child,
body .views-exposed-form#views-exposed-form-user-admin-people-page-1 .views-exposed-form__item:first-child {
flex-basis: 10%;
}
}
@media (max-width: 767px) {
body.seeds-root .views-exposed-form .views-exposed-form__item,
body .views-exposed-form .views-exposed-form__item {
......@@ -953,7 +1000,7 @@ body .form-actions .button#edit-submit,
body .form-actions .button#edit-actions-submit,
body .form-actions .button#edit-preview,
body .form-actions .button.button--danger {
font-size: 0;
font-size: 0 !important;
width: 50px;
height: 30px;
background-size: 80% 80%;
......@@ -1228,6 +1275,9 @@ body:not(.responsive-preview-frame) .ui-autocomplete.ui-menu {
padding: 1rem 1.5rem 1.5rem;
border-radius: 0.5rem 0.5rem 0 0;
}
.is-horizontal .tabs--secondary .tabs__tab:first-child .tabs__link {
margin-right: 0.25rem;
}
.horizontal-tabs {
position: static !important;
......@@ -1601,6 +1651,26 @@ body td > .form-item > select {
width: unset;
min-height: 35px;
}
body.seeds-root td .dropbutton--extrasmall .dropbutton__item:first-of-type > *,
body td .dropbutton--extrasmall .dropbutton__item:first-of-type > * {
font-size: 13px;
line-height: 12px;
padding-top: calc(0.25rem + 1px);
padding-bottom: calc(0.25rem + 1px);
}
body.seeds-root td .dropbutton--extrasmall .dropbutton__toggle,
body td .dropbutton--extrasmall .dropbutton__toggle {
width: 24px;
height: 24px;
}
body.seeds-root td .button.use-ajax,
body td .button.use-ajax {
color: #333333;
}
body.seeds-root tr .image-style-new .js-form-item-new,
body tr .image-style-new .js-form-item-new {
margin-left: 0.75rem;
}
body.seeds-root .media-library-widget .media-library-selection .media-library-item__remove.button:first-child,
body.seeds-root .media-library-widget .media-library-selection .media-library-edit__link,
......
assets/css/root.css
+ 73
− 3
View file @ 414f2ce3
......@@ -808,8 +808,8 @@ body .length-indicator .length-indicator__cursor {
}
body.seeds-root .views-exposed-form__item--actions.views-exposed-form__item--actions .button,
body .views-exposed-form__item--actions.views-exposed-form__item--actions .button {
height: 100%;
padding: 0.25rem 1.5rem;
height: auto;
padding: 1rem 1.5rem;
}
body.seeds-root .cke.cke_chrome:hover,
body .cke.cke_chrome:hover {
......@@ -914,6 +914,23 @@ body .views-exposed-form .views-exposed-form__item input:not(.form-submit):hover
body .views-exposed-form .views-exposed-form__item select:hover {
border-color: #333333;
}
body.seeds-root .views-exposed-form .views-exposed-form__item.views-exposed-form__item--actions,
body .views-exposed-form .views-exposed-form__item.views-exposed-form__item--actions {
align-items: center;
}
@media (max-width: 1200px) {
body.seeds-root .views-exposed-form .views-exposed-form__item.views-exposed-form__item--actions,
body .views-exposed-form .views-exposed-form__item.views-exposed-form__item--actions {
flex-basis: 10%;
margin-inline: 0;
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
body.seeds-root .views-exposed-form .views-exposed-form__item.views-exposed-form__item--actions,
body .views-exposed-form .views-exposed-form__item.views-exposed-form__item--actions {
flex-basis: 100%;
}
}
body.seeds-root div.autocomplete-deluxe-container div.autocomplete-deluxe-throbber,
body div.autocomplete-deluxe-container div.autocomplete-deluxe-throbber {
position: absolute;
......@@ -942,7 +959,37 @@ body.seeds-root .view .view-content form .views-bulk-actions .views-bulk-actions
body .view .view-content form .views-bulk-actions .views-bulk-actions__item label {
display: none;
}
body.seeds-root form .button.js-form-submit,
body form .button.js-form-submit {
color: #333333;
}
body.seeds-root form .button.button--primary,
body form .button.button--primary {
color: #ffffff;
}
body.seeds-root form.search-form .form-type--search,
body form.search-form .form-type--search {
margin-right: 0.75rem;
}
body.seeds-root form.search-admin-settings .form-item--search-type,
body form.search-admin-settings .form-item--search-type {
margin-right: 0.75rem;
}
body.seeds-root form.system-modules .modules-table-filter,
body form.system-modules .modules-table-filter {
margin-bottom: 1.5rem;
}
body.seeds-root form.system-clear-cache,
body form.system-clear-cache {
margin-bottom: 1rem;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
body.seeds-root .views-exposed-form#views-exposed-form-user-admin-people-page-1 .views-exposed-form__item:first-child,
body .views-exposed-form#views-exposed-form-user-admin-people-page-1 .views-exposed-form__item:first-child {
flex-basis: 10%;
}
}
@media (max-width: 767px) {
body.seeds-root .views-exposed-form .views-exposed-form__item,
body .views-exposed-form .views-exposed-form__item {
......@@ -953,7 +1000,7 @@ body .form-actions .button#edit-submit,
body .form-actions .button#edit-actions-submit,
body .form-actions .button#edit-preview,
body .form-actions .button.button--danger {
font-size: 0;
font-size: 0 !important;
width: 50px;
height: 30px;
background-size: 80% 80%;
......@@ -1228,6 +1275,9 @@ body:not(.responsive-preview-frame) .ui-autocomplete.ui-menu {
padding: 1rem 1.5rem 1.5rem;
border-radius: 0.5rem 0.5rem 0 0;
}
.is-horizontal .tabs--secondary .tabs__tab:first-child .tabs__link {
margin-left: 0.25rem;
}
.horizontal-tabs {
position: static !important;
......@@ -1601,6 +1651,26 @@ body td > .form-item > select {
width: unset;
min-height: 35px;
}
body.seeds-root td .dropbutton--extrasmall .dropbutton__item:first-of-type > *,
body td .dropbutton--extrasmall .dropbutton__item:first-of-type > * {
font-size: 13px;
line-height: 12px;
padding-top: calc(0.25rem + 1px);
padding-bottom: calc(0.25rem + 1px);
}
body.seeds-root td .dropbutton--extrasmall .dropbutton__toggle,
body td .dropbutton--extrasmall .dropbutton__toggle {
width: 24px;
height: 24px;
}
body.seeds-root td .button.use-ajax,
body td .button.use-ajax {
color: #333333;
}
body.seeds-root tr .image-style-new .js-form-item-new,
body tr .image-style-new .js-form-item-new {
margin-right: 0.75rem;
}
body.seeds-root .media-library-widget .media-library-selection .media-library-item__remove.button:first-child,
body.seeds-root .media-library-widget .media-library-selection .media-library-edit__link,
......
assets/scss/components/_forms.scss
+ 57
− 3
View file @ 414f2ce3
......@@ -293,8 +293,8 @@ body {
}
.views-exposed-form__item--actions {
&.views-exposed-form__item--actions .button {
height: 100%;
padding: $root-spacing-xxs $root-spacing-l;
height: auto;
padding: $root-spacing-m $root-spacing-l;
}
}
.cke.cke_chrome:hover {
......@@ -387,6 +387,16 @@ body {
border-color: $black;
}
}
&.views-exposed-form__item--actions {
align-items: center;
@media (max-width: 1200px) {
flex-basis: 10%;
margin-inline: 0;
}
@media screen and (min-width: 768px) and (max-width: 991px) {
flex-basis: 100%;
}
}
}
}
div.autocomplete-deluxe-container {
......@@ -423,6 +433,50 @@ body {
}
}
}
form {
.button {
&.js-form-submit {
color: $black;
}
&.button--primary {
color: $white;
}
}
&.search-form {
.form-type--search {
margin-right: $root-spacing-s;
}
}
&.search-admin-settings {
.form-item--search-type {
margin-right: $root-spacing-s;
}
}
&.system-modules {
.modules-table-filter {
margin-bottom: $root-spacing-l;
}
}
&.system-clear-cache {
margin-bottom: $root-spacing-m;
}
}
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
body.seeds-root,
body {
.views-exposed-form {
&#views-exposed-form-user-admin-people-page-1 {
.views-exposed-form__item {
&:first-child {
flex-basis: 10%;
}
}
}
}
}
}
@media (max-width: 767px) {
......@@ -440,7 +494,7 @@ body {
&#edit-actions-submit,
&#edit-preview,
&.button--danger {
font-size: 0;
font-size: 0 !important;
width: 50px;
height: 30px;
background-size: 80% 80%;
......
assets/scss/components/_tables.scss
+ 26
− 0
View file @ 414f2ce3
......@@ -35,5 +35,31 @@ body {
min-height: 35px;
}
}
.dropbutton--extrasmall {
.dropbutton__item:first-of-type {
> * {
font-size: 13px;
line-height: 12px;
padding-top: calc($root-spacing-xxs + 1px);
padding-bottom: calc($root-spacing-xxs + 1px);
}
}
.dropbutton__toggle {
width: 24px;
height: 24px;
}
}
.button {
&.use-ajax {
color: $black;
}
}
}
tr {
.image-style-new {
.js-form-item-new {
margin-right: $root-spacing-s;
}
}
}
}
assets/scss/components/_tabs.scss
+ 8
− 0
View file @ 414f2ce3
......@@ -234,6 +234,14 @@
padding: $root-spacing-m $root-spacing-l $root-spacing-l;
border-radius: $root-border-m $root-border-m 0 0;
}
.tabs__tab {
&:first-child {
.tabs__link {
margin-left: $root-spacing-xxs;
}
}
}
}
// Horizontal Tabs in Claro style
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment