From b54022692d6c84497923f99c033ac73028cde432 Mon Sep 17 00:00:00 2001 From: Jay Callicott Date: Wed, 16 Nov 2022 16:48:15 -0600 Subject: [PATCH 1/2] Added gin cleanup --- .../_src/stories/global/builder/_builder.scss | 114 +++++------------- .../starter-kit/templates/button/button.scss | 6 +- .../templates/button/button.stories.js | 2 +- .../starter-kit/templates/button/button.twig | 4 +- .../templates/block-content--views.html.twig | 4 +- 5 files changed, 38 insertions(+), 92 deletions(-) diff --git a/generators/app/templates/_src/stories/global/builder/_builder.scss b/generators/app/templates/_src/stories/global/builder/_builder.scss index c7e4d9d..32faae0 100644 --- a/generators/app/templates/_src/stories/global/builder/_builder.scss +++ b/generators/app/templates/_src/stories/global/builder/_builder.scss @@ -1,102 +1,48 @@ -.layout-builder-form { - - .layout-builder__message > .container { - max-width: 100%; - } - - .button { - padding: 5px 8px; - } -} +// Shrink help block text so it doesn't take up so much space. .block-help-block { font-size: 80%; font-style: italic; - padding: 10px 1.5rem 0; } -.layout-builder { - margin: 10px; - - & > .container { - max-width: 100%; - } +// Make LB browser icons look better. +.layout-builder-browser-block-item { + width: calc(45% - 2px); + padding: 10px; + text-decoration: none; - .message--warning { - margin: 0 0 10px; + img { + width: 100%; + margin-bottom: 10px; } } -.layout-builder__link { - margin-bottom: 10px; +// Reposition section links slightly. +.layout-builder__link--remove { + top: -23px; } -#drupal-off-canvas { - - .form-search { - margin: 20px 0; - width: 100%; - font-size: inherit; - } - - .layout-builder-browser-block-item { - text-align: center; - display: block; - padding-bottom: 5px; - - &:hover { - color: #fff; - text-decoration: none; - } - - img { - margin-bottom: 10px; - width: 100%; - cursor: pointer; - - &:hover { - transition-property: opacity; - transition-duration: 500ms; - opacity: 0.8; - } - } - } - - .layout-builder-remove-block { - padding-top: 20px; - } - - .layout-selection { - margin-top: 20px; - } - - svg { - margin-bottom: 8px; - margin-left: 2px; - } - - .moderation-sidebar-info p { - display: block; - } - - .js-layout-builder-filter { - margin-bottom: 20px; - } +.layout-builder__link--configure { + top: -23px; +} - .js-layout-builder-category { +// Hide handle from layout_builder_modal overrides.css +#layout-builder-modal a.tabledrag-handle .handle { + display: none; +} - & > summary { - margin-bottom: 15px; - display: block; - cursor: pointer; - } +// Override Media modal image/video links. +.glb-media-library-menu { + width: 10em !important; - .links li { - margin-bottom: 10px; - } + > li { + margin-bottom: 10px; + font-size: 20px; + padding: 13px; } +} - a { - cursor: pointer; - } +// Override Media modal thumb height. +#layout-builder-modal img { + height: 100%; } diff --git a/generators/starter-kit/templates/button/button.scss b/generators/starter-kit/templates/button/button.scss index b406afe..6e48af2 100644 --- a/generators/starter-kit/templates/button/button.scss +++ b/generators/starter-kit/templates/button/button.scss @@ -5,11 +5,11 @@ // Import site utilities. @import '../../global/utils/init'; -.button__container { +.btn__container { margin-top: 30px; } -.button, +.btn, input[type='submit'] { background-color: $color-blue; border: 2px solid $color-blue; @@ -32,7 +32,7 @@ input[type='submit'] { padding: 1rem 2rem; } - &.button--small { + &.btn--small { font-size: 0.875rem; padding: 0.5rem 1rem; } diff --git a/generators/starter-kit/templates/button/button.stories.js b/generators/starter-kit/templates/button/button.stories.js index 2cbe202..de5ae62 100644 --- a/generators/starter-kit/templates/button/button.stories.js +++ b/generators/starter-kit/templates/button/button.stories.js @@ -27,7 +27,7 @@ export const ButtonSmall = ButtonTemplate.bind({}); ButtonSmall.args = { "button": { "url": "https://www.mediacurrent.com", - "modifier": "button--small", + "modifier": "btn--small", "text": "Small Button" } }; diff --git a/generators/starter-kit/templates/button/button.twig b/generators/starter-kit/templates/button/button.twig index db731a5..179c1c8 100644 --- a/generators/starter-kit/templates/button/button.twig +++ b/generators/starter-kit/templates/button/button.twig @@ -1,7 +1,7 @@ {{ attach_library('<%= themeNameMachine %>/button') }} {% if button.url %} - {{ button.text }} + {{ button.text }} {% else %} - + {% endif %} diff --git a/generators/starter-kit/templates/views/templates/block-content--views.html.twig b/generators/starter-kit/templates/views/templates/block-content--views.html.twig index be78b21..052c468 100644 --- a/generators/starter-kit/templates/views/templates/block-content--views.html.twig +++ b/generators/starter-kit/templates/views/templates/block-content--views.html.twig @@ -38,8 +38,8 @@ {% endif %} {{ content|without('field_title', 'field_link') }} {% if content.field_link[0]['#url'] %} -
-
+
+
{% if content.field_link[0]['#url'] %} {% include '@<%= themeNameMachine %>/button/button.twig' with { "button": { From 6b58636371d1b7dfde2a8ed11e3be97fa02341b2 Mon Sep 17 00:00:00 2001 From: Jay Callicott Date: Thu, 17 Nov 2022 13:43:29 -0600 Subject: [PATCH 2/2] Removed LB CSS --- .../_src/stories/global/builder/_builder.scss | 48 ------------------- .../templates/_src/stories/global/global.scss | 3 -- 2 files changed, 51 deletions(-) delete mode 100644 generators/app/templates/_src/stories/global/builder/_builder.scss diff --git a/generators/app/templates/_src/stories/global/builder/_builder.scss b/generators/app/templates/_src/stories/global/builder/_builder.scss deleted file mode 100644 index 32faae0..0000000 --- a/generators/app/templates/_src/stories/global/builder/_builder.scss +++ /dev/null @@ -1,48 +0,0 @@ - -// Shrink help block text so it doesn't take up so much space. -.block-help-block { - font-size: 80%; - font-style: italic; -} - -// Make LB browser icons look better. -.layout-builder-browser-block-item { - width: calc(45% - 2px); - padding: 10px; - text-decoration: none; - - img { - width: 100%; - margin-bottom: 10px; - } -} - -// Reposition section links slightly. -.layout-builder__link--remove { - top: -23px; -} - -.layout-builder__link--configure { - top: -23px; -} - -// Hide handle from layout_builder_modal overrides.css -#layout-builder-modal a.tabledrag-handle .handle { - display: none; -} - -// Override Media modal image/video links. -.glb-media-library-menu { - width: 10em !important; - - > li { - margin-bottom: 10px; - font-size: 20px; - padding: 13px; - } -} - -// Override Media modal thumb height. -#layout-builder-modal img { - height: 100%; -} diff --git a/generators/app/templates/_src/stories/global/global.scss b/generators/app/templates/_src/stories/global/global.scss index 1379b93..3f2e8b2 100644 --- a/generators/app/templates/_src/stories/global/global.scss +++ b/generators/app/templates/_src/stories/global/global.scss @@ -19,9 +19,6 @@ // Import Rain blocks default styles. @import 'blocks/blocks'; -// Layout builder styles. -@import 'builder/builder'; - // Base // // Plain html element styling. Shouldn't require