From ea293c5017daafb9e921d0e4af5c980ab7302633 Mon Sep 17 00:00:00 2001 From: Ganaa Ravdan Date: Fri, 28 Dec 2018 16:43:23 +0000 Subject: [PATCH 01/12] 1518: Added Conference videos view display for conference landing page --- ...y_view_display.node.conference.default.yml | 32 +++++-- .../sync/views.view.recently_added_videos.yml | 89 +++++++++++++++++++ 2 files changed, 116 insertions(+), 5 deletions(-) diff --git a/config/sync/core.entity_view_display.node.conference.default.yml b/config/sync/core.entity_view_display.node.conference.default.yml index c3e557ea..8de9b735 100644 --- a/config/sync/core.entity_view_display.node.conference.default.yml +++ b/config/sync/core.entity_view_display.node.conference.default.yml @@ -17,6 +17,7 @@ dependencies: - field.field.node.conference.field_website - node.type.conference - views.view.featured_articles + - views.view.recently_added_videos module: - address - datetime @@ -284,16 +285,37 @@ third_party_settings: additional: { } weight: 1 - - layout_id: two_column_dt + layout_id: one_column_dt + layout_settings: + bgcolor: lb-bg-secondary + highlight: 0 + spacing: { } + components: + 2374ebbc-6cf6-4a60-9bee-be5cff29888c: + uuid: 2374ebbc-6cf6-4a60-9bee-be5cff29888c + region: content + configuration: + id: 'views_block:recently_added_videos-block_5' + label: '' + provider: views + label_display: visible + views_label: '' + items_per_page: none + context_mapping: { } + additional: { } + weight: 0 + - + layout_id: one_column_dt layout_settings: bgcolor: lb-bg-primary highlight: 0 spacing: - space-beside: space-beside + space-top: space-top + space-bottom: space-bottom components: - a09b21da-1230-4cef-b6da-b6e3e876c181: - uuid: a09b21da-1230-4cef-b6da-b6e3e876c181 - region: second + 9f635c19-9aae-4410-8531-a7391e362d09: + uuid: 9f635c19-9aae-4410-8531-a7391e362d09 + region: content configuration: id: 'views_block:featured_articles-block_2' label: '' diff --git a/config/sync/views.view.recently_added_videos.yml b/config/sync/views.view.recently_added_videos.yml index 51c7428c..874a16bc 100644 --- a/config/sync/views.view.recently_added_videos.yml +++ b/config/sync/views.view.recently_added_videos.yml @@ -537,6 +537,7 @@ display: fields: false style: false row: false + pager: true display_description: '' style: type: default @@ -1258,6 +1259,94 @@ display: - user.permissions tags: - 'config:field.storage.media.field_speaker' + block_5: + display_plugin: block + id: block_5 + display_title: 'Conference Videos' + position: 6 + display_options: + display_extenders: { } + display_description: '' + title: 'Conference Videos' + defaults: + title: false + relationships: false + arguments: false + pager: false + sorts: false + relationships: + field_conference: + id: field_conference + table: media__field_conference + field: field_conference + relationship: none + group_type: group + admin_label: 'field_conference: Content' + required: false + plugin_id: standard + arguments: + field_conference_target_id: + id: field_conference_target_id + table: media__field_conference + field: field_conference_target_id + relationship: none + group_type: group + admin_label: '' + default_action: default + exception: + value: all + title_enable: false + title: All + title_enable: false + title: '' + default_argument_type: node + default_argument_options: { } + default_argument_skip_url: false + summary_options: + base_path: '' + count: true + items_per_page: 25 + override: false + summary: + sort_order: asc + number_of_records: 0 + format: default_summary + specify_validation: false + validate: + type: none + fail: 'not found' + validate_options: { } + break_phrase: false + not: false + plugin_id: numeric + pager: + type: some + options: + items_per_page: 8 + offset: 0 + sorts: + field_recording_date_value: + id: field_recording_date_value + table: media__field_recording_date + field: field_recording_date_value + relationship: none + group_type: group + admin_label: '' + order: DESC + exposed: false + expose: + label: '' + granularity: second + plugin_id: datetime + cache_metadata: + max-age: -1 + contexts: + - 'languages:language_content' + - 'languages:language_interface' + - url + - user.permissions + tags: + - 'config:field.storage.media.field_speaker' page_1: display_plugin: page id: page_1 From a1c13cba0cd1dc673bd0a752a5b6d7f1524e20b9 Mon Sep 17 00:00:00 2001 From: Ganaa Ravdan Date: Fri, 28 Dec 2018 18:40:14 +0000 Subject: [PATCH 02/12] 1518 Styled conference video views to display 8 videos in 2 rows using flexbox --- web/themes/custom/tube_theme/css/style.css | 1276 +++++++------------ web/themes/custom/tube_theme/scss/misc.scss | 32 + 2 files changed, 499 insertions(+), 809 deletions(-) diff --git a/web/themes/custom/tube_theme/css/style.css b/web/themes/custom/tube_theme/css/style.css index cedccf9f..3c50b8ab 100644 --- a/web/themes/custom/tube_theme/css/style.css +++ b/web/themes/custom/tube_theme/css/style.css @@ -59,6 +59,7 @@ html { @-ms-viewport { width: device-width; } + article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } @@ -522,48 +523,48 @@ pre { max-width: none; } .col-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; } + flex: 0 0 8.33333%; + max-width: 8.33333%; } .col-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; } + flex: 0 0 16.66667%; + max-width: 16.66667%; } .col-3 { flex: 0 0 25%; max-width: 25%; } .col-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; } + flex: 0 0 33.33333%; + max-width: 33.33333%; } .col-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; } + flex: 0 0 41.66667%; + max-width: 41.66667%; } .col-6 { flex: 0 0 50%; max-width: 50%; } .col-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; } + flex: 0 0 58.33333%; + max-width: 58.33333%; } .col-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; } + flex: 0 0 66.66667%; + max-width: 66.66667%; } .col-9 { flex: 0 0 75%; max-width: 75%; } .col-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; } + flex: 0 0 83.33333%; + max-width: 83.33333%; } .col-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; } + flex: 0 0 91.66667%; + max-width: 91.66667%; } .col-12 { flex: 0 0 100%; @@ -615,594 +616,438 @@ pre { order: 12; } .offset-1 { - margin-left: 8.3333333333%; } + margin-left: 8.33333%; } .offset-2 { - margin-left: 16.6666666667%; } + margin-left: 16.66667%; } .offset-3 { margin-left: 25%; } .offset-4 { - margin-left: 33.3333333333%; } + margin-left: 33.33333%; } .offset-5 { - margin-left: 41.6666666667%; } + margin-left: 41.66667%; } .offset-6 { margin-left: 50%; } .offset-7 { - margin-left: 58.3333333333%; } + margin-left: 58.33333%; } .offset-8 { - margin-left: 66.6666666667%; } + margin-left: 66.66667%; } .offset-9 { margin-left: 75%; } .offset-10 { - margin-left: 83.3333333333%; } + margin-left: 83.33333%; } .offset-11 { - margin-left: 91.6666666667%; } + margin-left: 91.66667%; } @media (min-width: 576px) { .col-sm { flex-basis: 0; flex-grow: 1; max-width: 100%; } - .col-sm-auto { flex: 0 0 auto; width: auto; max-width: none; } - .col-sm-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; } - + flex: 0 0 8.33333%; + max-width: 8.33333%; } .col-sm-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; } - + flex: 0 0 16.66667%; + max-width: 16.66667%; } .col-sm-3 { flex: 0 0 25%; max-width: 25%; } - .col-sm-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; } - + flex: 0 0 33.33333%; + max-width: 33.33333%; } .col-sm-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; } - + flex: 0 0 41.66667%; + max-width: 41.66667%; } .col-sm-6 { flex: 0 0 50%; max-width: 50%; } - .col-sm-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; } - + flex: 0 0 58.33333%; + max-width: 58.33333%; } .col-sm-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; } - + flex: 0 0 66.66667%; + max-width: 66.66667%; } .col-sm-9 { flex: 0 0 75%; max-width: 75%; } - .col-sm-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; } - + flex: 0 0 83.33333%; + max-width: 83.33333%; } .col-sm-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; } - + flex: 0 0 91.66667%; + max-width: 91.66667%; } .col-sm-12 { flex: 0 0 100%; max-width: 100%; } - .order-sm-first { order: -1; } - .order-sm-last { order: 13; } - .order-sm-0 { order: 0; } - .order-sm-1 { order: 1; } - .order-sm-2 { order: 2; } - .order-sm-3 { order: 3; } - .order-sm-4 { order: 4; } - .order-sm-5 { order: 5; } - .order-sm-6 { order: 6; } - .order-sm-7 { order: 7; } - .order-sm-8 { order: 8; } - .order-sm-9 { order: 9; } - .order-sm-10 { order: 10; } - .order-sm-11 { order: 11; } - .order-sm-12 { order: 12; } - .offset-sm-0 { margin-left: 0; } - .offset-sm-1 { - margin-left: 8.3333333333%; } - + margin-left: 8.33333%; } .offset-sm-2 { - margin-left: 16.6666666667%; } - + margin-left: 16.66667%; } .offset-sm-3 { margin-left: 25%; } - .offset-sm-4 { - margin-left: 33.3333333333%; } - + margin-left: 33.33333%; } .offset-sm-5 { - margin-left: 41.6666666667%; } - + margin-left: 41.66667%; } .offset-sm-6 { margin-left: 50%; } - .offset-sm-7 { - margin-left: 58.3333333333%; } - + margin-left: 58.33333%; } .offset-sm-8 { - margin-left: 66.6666666667%; } - + margin-left: 66.66667%; } .offset-sm-9 { margin-left: 75%; } - .offset-sm-10 { - margin-left: 83.3333333333%; } - + margin-left: 83.33333%; } .offset-sm-11 { - margin-left: 91.6666666667%; } } + margin-left: 91.66667%; } } + @media (min-width: 768px) { .col-md { flex-basis: 0; flex-grow: 1; max-width: 100%; } - .col-md-auto { flex: 0 0 auto; width: auto; max-width: none; } - .col-md-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; } - + flex: 0 0 8.33333%; + max-width: 8.33333%; } .col-md-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; } - + flex: 0 0 16.66667%; + max-width: 16.66667%; } .col-md-3 { flex: 0 0 25%; max-width: 25%; } - .col-md-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; } - + flex: 0 0 33.33333%; + max-width: 33.33333%; } .col-md-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; } - + flex: 0 0 41.66667%; + max-width: 41.66667%; } .col-md-6 { flex: 0 0 50%; max-width: 50%; } - .col-md-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; } - + flex: 0 0 58.33333%; + max-width: 58.33333%; } .col-md-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; } - + flex: 0 0 66.66667%; + max-width: 66.66667%; } .col-md-9 { flex: 0 0 75%; max-width: 75%; } - .col-md-10, .contact-form { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; } - + flex: 0 0 83.33333%; + max-width: 83.33333%; } .col-md-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; } - + flex: 0 0 91.66667%; + max-width: 91.66667%; } .col-md-12 { flex: 0 0 100%; max-width: 100%; } - .order-md-first { order: -1; } - .order-md-last { order: 13; } - .order-md-0 { order: 0; } - .order-md-1 { order: 1; } - .order-md-2 { order: 2; } - .order-md-3 { order: 3; } - .order-md-4 { order: 4; } - .order-md-5 { order: 5; } - .order-md-6 { order: 6; } - .order-md-7 { order: 7; } - .order-md-8 { order: 8; } - .order-md-9 { order: 9; } - .order-md-10 { order: 10; } - .order-md-11 { order: 11; } - .order-md-12 { order: 12; } - .offset-md-0 { margin-left: 0; } - .offset-md-1, .contact-form { - margin-left: 8.3333333333%; } - + margin-left: 8.33333%; } .offset-md-2 { - margin-left: 16.6666666667%; } - + margin-left: 16.66667%; } .offset-md-3 { margin-left: 25%; } - .offset-md-4 { - margin-left: 33.3333333333%; } - + margin-left: 33.33333%; } .offset-md-5 { - margin-left: 41.6666666667%; } - + margin-left: 41.66667%; } .offset-md-6 { margin-left: 50%; } - .offset-md-7 { - margin-left: 58.3333333333%; } - + margin-left: 58.33333%; } .offset-md-8 { - margin-left: 66.6666666667%; } - + margin-left: 66.66667%; } .offset-md-9 { margin-left: 75%; } - .offset-md-10 { - margin-left: 83.3333333333%; } - + margin-left: 83.33333%; } .offset-md-11 { - margin-left: 91.6666666667%; } } + margin-left: 91.66667%; } } + @media (min-width: 992px) { .col-lg { flex-basis: 0; flex-grow: 1; max-width: 100%; } - .col-lg-auto { flex: 0 0 auto; width: auto; max-width: none; } - .col-lg-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; } - + flex: 0 0 8.33333%; + max-width: 8.33333%; } .col-lg-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; } - + flex: 0 0 16.66667%; + max-width: 16.66667%; } .col-lg-3 { flex: 0 0 25%; max-width: 25%; } - .col-lg-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; } - + flex: 0 0 33.33333%; + max-width: 33.33333%; } .col-lg-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; } - + flex: 0 0 41.66667%; + max-width: 41.66667%; } .col-lg-6 { flex: 0 0 50%; max-width: 50%; } - .col-lg-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; } - + flex: 0 0 58.33333%; + max-width: 58.33333%; } .col-lg-8, .contact-form { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; } - + flex: 0 0 66.66667%; + max-width: 66.66667%; } .col-lg-9 { flex: 0 0 75%; max-width: 75%; } - .col-lg-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; } - + flex: 0 0 83.33333%; + max-width: 83.33333%; } .col-lg-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; } - + flex: 0 0 91.66667%; + max-width: 91.66667%; } .col-lg-12 { flex: 0 0 100%; max-width: 100%; } - .order-lg-first { order: -1; } - .order-lg-last { order: 13; } - .order-lg-0 { order: 0; } - .order-lg-1 { order: 1; } - .order-lg-2 { order: 2; } - .order-lg-3 { order: 3; } - .order-lg-4 { order: 4; } - .order-lg-5 { order: 5; } - .order-lg-6 { order: 6; } - .order-lg-7 { order: 7; } - .order-lg-8 { order: 8; } - .order-lg-9 { order: 9; } - .order-lg-10 { order: 10; } - .order-lg-11 { order: 11; } - .order-lg-12 { order: 12; } - .offset-lg-0 { margin-left: 0; } - .offset-lg-1 { - margin-left: 8.3333333333%; } - + margin-left: 8.33333%; } .offset-lg-2, .contact-form { - margin-left: 16.6666666667%; } - + margin-left: 16.66667%; } .offset-lg-3 { margin-left: 25%; } - .offset-lg-4 { - margin-left: 33.3333333333%; } - + margin-left: 33.33333%; } .offset-lg-5 { - margin-left: 41.6666666667%; } - + margin-left: 41.66667%; } .offset-lg-6 { margin-left: 50%; } - .offset-lg-7 { - margin-left: 58.3333333333%; } - + margin-left: 58.33333%; } .offset-lg-8 { - margin-left: 66.6666666667%; } - + margin-left: 66.66667%; } .offset-lg-9 { margin-left: 75%; } - .offset-lg-10 { - margin-left: 83.3333333333%; } - + margin-left: 83.33333%; } .offset-lg-11 { - margin-left: 91.6666666667%; } } + margin-left: 91.66667%; } } + @media (min-width: 1200px) { .col-xl { flex-basis: 0; flex-grow: 1; max-width: 100%; } - .col-xl-auto { flex: 0 0 auto; width: auto; max-width: none; } - .col-xl-1 { - flex: 0 0 8.3333333333%; - max-width: 8.3333333333%; } - + flex: 0 0 8.33333%; + max-width: 8.33333%; } .col-xl-2 { - flex: 0 0 16.6666666667%; - max-width: 16.6666666667%; } - + flex: 0 0 16.66667%; + max-width: 16.66667%; } .col-xl-3 { flex: 0 0 25%; max-width: 25%; } - .col-xl-4 { - flex: 0 0 33.3333333333%; - max-width: 33.3333333333%; } - + flex: 0 0 33.33333%; + max-width: 33.33333%; } .col-xl-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; } - + flex: 0 0 41.66667%; + max-width: 41.66667%; } .col-xl-6 { flex: 0 0 50%; max-width: 50%; } - .col-xl-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; } - + flex: 0 0 58.33333%; + max-width: 58.33333%; } .col-xl-8 { - flex: 0 0 66.6666666667%; - max-width: 66.6666666667%; } - + flex: 0 0 66.66667%; + max-width: 66.66667%; } .col-xl-9 { flex: 0 0 75%; max-width: 75%; } - .col-xl-10 { - flex: 0 0 83.3333333333%; - max-width: 83.3333333333%; } - + flex: 0 0 83.33333%; + max-width: 83.33333%; } .col-xl-11 { - flex: 0 0 91.6666666667%; - max-width: 91.6666666667%; } - + flex: 0 0 91.66667%; + max-width: 91.66667%; } .col-xl-12 { flex: 0 0 100%; max-width: 100%; } - .order-xl-first { order: -1; } - .order-xl-last { order: 13; } - .order-xl-0 { order: 0; } - .order-xl-1 { order: 1; } - .order-xl-2 { order: 2; } - .order-xl-3 { order: 3; } - .order-xl-4 { order: 4; } - .order-xl-5 { order: 5; } - .order-xl-6 { order: 6; } - .order-xl-7 { order: 7; } - .order-xl-8 { order: 8; } - .order-xl-9 { order: 9; } - .order-xl-10 { order: 10; } - .order-xl-11 { order: 11; } - .order-xl-12 { order: 12; } - .offset-xl-0 { margin-left: 0; } - .offset-xl-1 { - margin-left: 8.3333333333%; } - + margin-left: 8.33333%; } .offset-xl-2 { - margin-left: 16.6666666667%; } - + margin-left: 16.66667%; } .offset-xl-3 { margin-left: 25%; } - .offset-xl-4 { - margin-left: 33.3333333333%; } - + margin-left: 33.33333%; } .offset-xl-5 { - margin-left: 41.6666666667%; } - + margin-left: 41.66667%; } .offset-xl-6 { margin-left: 50%; } - .offset-xl-7 { - margin-left: 58.3333333333%; } - + margin-left: 58.33333%; } .offset-xl-8 { - margin-left: 66.6666666667%; } - + margin-left: 66.66667%; } .offset-xl-9 { margin-left: 75%; } - .offset-xl-10 { - margin-left: 83.3333333333%; } - + margin-left: 83.33333%; } .offset-xl-11 { - margin-left: 91.6666666667%; } } + margin-left: 91.66667%; } } + .table { width: 100%; max-width: 100%; @@ -1343,6 +1188,7 @@ pre { color: #fff; background-color: #212529; border-color: #32383e; } + .table .thead-light th { color: #495057; background-color: #e9ecef; @@ -1371,6 +1217,7 @@ pre { -ms-overflow-style: -ms-autohiding-scrollbar; } .table-responsive-sm > .table-bordered { border: 0; } } + @media (max-width: 767.98px) { .table-responsive-md { display: block; @@ -1380,6 +1227,7 @@ pre { -ms-overflow-style: -ms-autohiding-scrollbar; } .table-responsive-md > .table-bordered { border: 0; } } + @media (max-width: 991.98px) { .table-responsive-lg { display: block; @@ -1389,6 +1237,7 @@ pre { -ms-overflow-style: -ms-autohiding-scrollbar; } .table-responsive-lg > .table-bordered { border: 0; } } + @media (max-width: 1199.98px) { .table-responsive-xl { display: block; @@ -1398,6 +1247,7 @@ pre { -ms-overflow-style: -ms-autohiding-scrollbar; } .table-responsive-xl > .table-bordered { border: 0; } } + .table-responsive { display: block; width: 100%; @@ -1437,6 +1287,7 @@ pre { select.form-control:not([size]):not([multiple]) { height: calc(2.25rem + 2px); } + select.form-control:focus::-ms-value { color: #495057; background-color: #fff; } @@ -1585,26 +1436,28 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for background-color: rgba(40, 167, 69, 0.8); border-radius: .2rem; } -.was-validated .form-control:valid, .form-control.is-valid, -.was-validated .custom-select:valid, +.was-validated .form-control:valid, .form-control.is-valid, .was-validated +.custom-select:valid, .custom-select.is-valid { border-color: #28a745; } - .was-validated .form-control:valid:focus, .form-control.is-valid:focus, - .was-validated .custom-select:valid:focus, + .was-validated .form-control:valid:focus, .form-control.is-valid:focus, .was-validated + .custom-select:valid:focus, .custom-select.is-valid:focus { border-color: #28a745; box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); } .was-validated .form-control:valid ~ .valid-feedback, .was-validated .form-control:valid ~ .valid-tooltip, .form-control.is-valid ~ .valid-feedback, - .form-control.is-valid ~ .valid-tooltip, - .was-validated .custom-select:valid ~ .valid-feedback, - .was-validated .custom-select:valid ~ .valid-tooltip, + .form-control.is-valid ~ .valid-tooltip, .was-validated + .custom-select:valid ~ .valid-feedback, + .was-validated + .custom-select:valid ~ .valid-tooltip, .custom-select.is-valid ~ .valid-feedback, .custom-select.is-valid ~ .valid-tooltip { display: block; } .was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label { color: #28a745; } + .was-validated .form-check-input:valid ~ .valid-feedback, .was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback, .form-check-input.is-valid ~ .valid-tooltip { @@ -1614,12 +1467,15 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for color: #28a745; } .was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before { background-color: #71dd8a; } + .was-validated .custom-control-input:valid ~ .valid-feedback, .was-validated .custom-control-input:valid ~ .valid-tooltip, .custom-control-input.is-valid ~ .valid-feedback, .custom-control-input.is-valid ~ .valid-tooltip { display: block; } + .was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before { background-color: #34ce57; } + .was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before { box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(40, 167, 69, 0.25); } @@ -1627,10 +1483,12 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for border-color: #28a745; } .was-validated .custom-file-input:valid ~ .custom-file-label::before, .custom-file-input.is-valid ~ .custom-file-label::before { border-color: inherit; } + .was-validated .custom-file-input:valid ~ .valid-feedback, .was-validated .custom-file-input:valid ~ .valid-tooltip, .custom-file-input.is-valid ~ .valid-feedback, .custom-file-input.is-valid ~ .valid-tooltip { display: block; } + .was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label { box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); } @@ -1655,26 +1513,28 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for background-color: rgba(220, 53, 69, 0.8); border-radius: .2rem; } -.was-validated .form-control:invalid, .form-control.is-invalid, -.was-validated .custom-select:invalid, +.was-validated .form-control:invalid, .form-control.is-invalid, .was-validated +.custom-select:invalid, .custom-select.is-invalid { border-color: #dc3545; } - .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus, - .was-validated .custom-select:invalid:focus, + .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus, .was-validated + .custom-select:invalid:focus, .custom-select.is-invalid:focus { border-color: #dc3545; box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); } .was-validated .form-control:invalid ~ .invalid-feedback, .was-validated .form-control:invalid ~ .invalid-tooltip, .form-control.is-invalid ~ .invalid-feedback, - .form-control.is-invalid ~ .invalid-tooltip, - .was-validated .custom-select:invalid ~ .invalid-feedback, - .was-validated .custom-select:invalid ~ .invalid-tooltip, + .form-control.is-invalid ~ .invalid-tooltip, .was-validated + .custom-select:invalid ~ .invalid-feedback, + .was-validated + .custom-select:invalid ~ .invalid-tooltip, .custom-select.is-invalid ~ .invalid-feedback, .custom-select.is-invalid ~ .invalid-tooltip { display: block; } .was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label { color: #dc3545; } + .was-validated .form-check-input:invalid ~ .invalid-feedback, .was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback, .form-check-input.is-invalid ~ .invalid-tooltip { @@ -1684,12 +1544,15 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for color: #dc3545; } .was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before { background-color: #efa2a9; } + .was-validated .custom-control-input:invalid ~ .invalid-feedback, .was-validated .custom-control-input:invalid ~ .invalid-tooltip, .custom-control-input.is-invalid ~ .invalid-feedback, .custom-control-input.is-invalid ~ .invalid-tooltip { display: block; } + .was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before { background-color: #e4606d; } + .was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before { box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(220, 53, 69, 0.25); } @@ -1697,10 +1560,12 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for border-color: #dc3545; } .was-validated .custom-file-input:invalid ~ .custom-file-label::before, .custom-file-input.is-invalid ~ .custom-file-label::before { border-color: inherit; } + .was-validated .custom-file-input:invalid ~ .invalid-feedback, .was-validated .custom-file-input:invalid ~ .invalid-tooltip, .custom-file-input.is-invalid ~ .invalid-feedback, .custom-file-input.is-invalid ~ .invalid-tooltip { display: block; } + .was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label { box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); } @@ -1790,11 +1655,13 @@ fieldset:disabled a.btn { color: #fff; background-color: #1684c4; border-color: #1684c4; } - .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle { + .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, + .show > .btn-primary.dropdown-toggle { color: #fff; background-color: #116596; border-color: #105d8b; } - .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus { + .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, + .show > .btn-primary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(22, 132, 196, 0.5); } .btn-secondary { @@ -1811,11 +1678,13 @@ fieldset:disabled a.btn { color: #fff; background-color: #09527b; border-color: #09527b; } - .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle { + .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, + .show > .btn-secondary.dropdown-toggle { color: #fff; background-color: #06324b; border-color: #052a40; } - .btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-secondary.dropdown-toggle:focus { + .btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus, + .show > .btn-secondary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(9, 82, 123, 0.5); } .btn-success { @@ -1832,11 +1701,13 @@ fieldset:disabled a.btn { color: #fff; background-color: #28a745; border-color: #28a745; } - .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, .show > .btn-success.dropdown-toggle { + .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, + .show > .btn-success.dropdown-toggle { color: #fff; background-color: #1e7e34; border-color: #1c7430; } - .btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus, .show > .btn-success.dropdown-toggle:focus { + .btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus, + .show > .btn-success.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); } .btn-info { @@ -1853,11 +1724,13 @@ fieldset:disabled a.btn { color: #fff; background-color: #17a2b8; border-color: #17a2b8; } - .btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, .show > .btn-info.dropdown-toggle { + .btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, + .show > .btn-info.dropdown-toggle { color: #fff; background-color: #117a8b; border-color: #10707f; } - .btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus, .show > .btn-info.dropdown-toggle:focus { + .btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus, + .show > .btn-info.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5); } .btn-warning { @@ -1874,11 +1747,13 @@ fieldset:disabled a.btn { color: #212529; background-color: #ffc107; border-color: #ffc107; } - .btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, .show > .btn-warning.dropdown-toggle { + .btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, + .show > .btn-warning.dropdown-toggle { color: #212529; background-color: #d39e00; border-color: #c69500; } - .btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus, .show > .btn-warning.dropdown-toggle:focus { + .btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus, + .show > .btn-warning.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); } .btn-danger { @@ -1895,11 +1770,13 @@ fieldset:disabled a.btn { color: #fff; background-color: #dc3545; border-color: #dc3545; } - .btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, .show > .btn-danger.dropdown-toggle { + .btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, + .show > .btn-danger.dropdown-toggle { color: #fff; background-color: #bd2130; border-color: #b21f2d; } - .btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-danger.dropdown-toggle:focus { + .btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus, + .show > .btn-danger.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5); } .btn-light { @@ -1916,11 +1793,13 @@ fieldset:disabled a.btn { color: #212529; background-color: #F6F6F2; border-color: #F6F6F2; } - .btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active, .show > .btn-light.dropdown-toggle { + .btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active, + .show > .btn-light.dropdown-toggle { color: #212529; background-color: #e1e1d4; border-color: #dcdccc; } - .btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus, .show > .btn-light.dropdown-toggle:focus { + .btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus, + .show > .btn-light.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(246, 246, 242, 0.5); } .btn-dark { @@ -1937,11 +1816,13 @@ fieldset:disabled a.btn { color: #fff; background-color: #343a40; border-color: #343a40; } - .btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, .show > .btn-dark.dropdown-toggle { + .btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, + .show > .btn-dark.dropdown-toggle { color: #fff; background-color: #1d2124; border-color: #171a1d; } - .btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus, .show > .btn-dark.dropdown-toggle:focus { + .btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus, + .show > .btn-dark.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); } .btn-outline-primary { @@ -1958,11 +1839,13 @@ fieldset:disabled a.btn { .btn-outline-primary.disabled, .btn-outline-primary:disabled { color: #1684c4; background-color: transparent; } - .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle { + .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, + .show > .btn-outline-primary.dropdown-toggle { color: #fff; background-color: #1684c4; border-color: #1684c4; } - .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus { + .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, + .show > .btn-outline-primary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(22, 132, 196, 0.5); } .btn-outline-secondary { @@ -1979,11 +1862,13 @@ fieldset:disabled a.btn { .btn-outline-secondary.disabled, .btn-outline-secondary:disabled { color: #09527b; background-color: transparent; } - .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle { + .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, + .show > .btn-outline-secondary.dropdown-toggle { color: #fff; background-color: #09527b; border-color: #09527b; } - .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-secondary.dropdown-toggle:focus { + .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus, + .show > .btn-outline-secondary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(9, 82, 123, 0.5); } .btn-outline-success { @@ -2000,11 +1885,13 @@ fieldset:disabled a.btn { .btn-outline-success.disabled, .btn-outline-success:disabled { color: #28a745; background-color: transparent; } - .btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active, .show > .btn-outline-success.dropdown-toggle { + .btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active, + .show > .btn-outline-success.dropdown-toggle { color: #fff; background-color: #28a745; border-color: #28a745; } - .btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-success.dropdown-toggle:focus { + .btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus, + .show > .btn-outline-success.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); } .btn-outline-info { @@ -2021,11 +1908,13 @@ fieldset:disabled a.btn { .btn-outline-info.disabled, .btn-outline-info:disabled { color: #17a2b8; background-color: transparent; } - .btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active, .show > .btn-outline-info.dropdown-toggle { + .btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active, + .show > .btn-outline-info.dropdown-toggle { color: #fff; background-color: #17a2b8; border-color: #17a2b8; } - .btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-info.dropdown-toggle:focus { + .btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus, + .show > .btn-outline-info.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5); } .btn-outline-warning { @@ -2042,11 +1931,13 @@ fieldset:disabled a.btn { .btn-outline-warning.disabled, .btn-outline-warning:disabled { color: #ffc107; background-color: transparent; } - .btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active, .show > .btn-outline-warning.dropdown-toggle { + .btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active, + .show > .btn-outline-warning.dropdown-toggle { color: #212529; background-color: #ffc107; border-color: #ffc107; } - .btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-warning.dropdown-toggle:focus { + .btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus, + .show > .btn-outline-warning.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); } .btn-outline-danger { @@ -2063,11 +1954,13 @@ fieldset:disabled a.btn { .btn-outline-danger.disabled, .btn-outline-danger:disabled { color: #dc3545; background-color: transparent; } - .btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active, .show > .btn-outline-danger.dropdown-toggle { + .btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active, + .show > .btn-outline-danger.dropdown-toggle { color: #fff; background-color: #dc3545; border-color: #dc3545; } - .btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-danger.dropdown-toggle:focus { + .btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus, + .show > .btn-outline-danger.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5); } .btn-outline-light { @@ -2084,11 +1977,13 @@ fieldset:disabled a.btn { .btn-outline-light.disabled, .btn-outline-light:disabled { color: #F6F6F2; background-color: transparent; } - .btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active, .show > .btn-outline-light.dropdown-toggle { + .btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active, + .show > .btn-outline-light.dropdown-toggle { color: #212529; background-color: #F6F6F2; border-color: #F6F6F2; } - .btn-outline-light:not(:disabled):not(.disabled):active:focus, .btn-outline-light:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-light.dropdown-toggle:focus { + .btn-outline-light:not(:disabled):not(.disabled):active:focus, .btn-outline-light:not(:disabled):not(.disabled).active:focus, + .show > .btn-outline-light.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(246, 246, 242, 0.5); } .btn-outline-dark { @@ -2105,11 +2000,13 @@ fieldset:disabled a.btn { .btn-outline-dark.disabled, .btn-outline-dark:disabled { color: #343a40; background-color: transparent; } - .btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active, .show > .btn-outline-dark.dropdown-toggle { + .btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active, + .show > .btn-outline-dark.dropdown-toggle { color: #fff; background-color: #343a40; border-color: #343a40; } - .btn-outline-dark:not(:disabled):not(.disabled):active:focus, .btn-outline-dark:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-dark.dropdown-toggle:focus { + .btn-outline-dark:not(:disabled):not(.disabled):active:focus, .btn-outline-dark:not(:disabled):not(.disabled).active:focus, + .show > .btn-outline-dark.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); } .btn-link { @@ -2189,6 +2086,7 @@ tbody.collapse.show { border-right: 0.3em solid transparent; border-bottom: 0; border-left: 0.3em solid transparent; } + .dropdown-toggle:empty::after { margin-left: 0; } @@ -2214,6 +2112,7 @@ tbody.collapse.show { .dropup .dropdown-menu { margin-top: 0; margin-bottom: 0.125rem; } + .dropup .dropdown-toggle::after { display: inline-block; width: 0; @@ -2225,12 +2124,14 @@ tbody.collapse.show { border-right: 0.3em solid transparent; border-bottom: 0.3em solid; border-left: 0.3em solid transparent; } + .dropup .dropdown-toggle:empty::after { margin-left: 0; } .dropright .dropdown-menu { margin-top: 0; margin-left: 0.125rem; } + .dropright .dropdown-toggle::after { display: inline-block; width: 0; @@ -2241,14 +2142,17 @@ tbody.collapse.show { border-top: 0.3em solid transparent; border-bottom: 0.3em solid transparent; border-left: 0.3em solid; } + .dropright .dropdown-toggle:empty::after { margin-left: 0; } + .dropright .dropdown-toggle::after { vertical-align: 0; } .dropleft .dropdown-menu { margin-top: 0; margin-right: 0.125rem; } + .dropleft .dropdown-toggle::after { display: inline-block; width: 0; @@ -2256,8 +2160,10 @@ tbody.collapse.show { margin-left: 0.255em; vertical-align: 0.255em; content: ""; } + .dropleft .dropdown-toggle::after { display: none; } + .dropleft .dropdown-toggle::before { display: inline-block; width: 0; @@ -2268,8 +2174,10 @@ tbody.collapse.show { border-top: 0.3em solid transparent; border-right: 0.3em solid; border-bottom: 0.3em solid transparent; } + .dropleft .dropdown-toggle:empty::after { margin-left: 0; } + .dropleft .dropdown-toggle::before { vertical-align: 0; } @@ -2349,10 +2257,12 @@ tbody.collapse.show { .btn-group > .btn:first-child { margin-left: 0; } + .btn-group > .btn:not(:last-child):not(.dropdown-toggle), .btn-group > .btn-group:not(:last-child) > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; } + .btn-group > .btn:not(:first-child), .btn-group > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; @@ -2443,10 +2353,12 @@ tbody.collapse.show { .input-group > .custom-file { display: flex; align-items: center; } - .input-group > .custom-file:not(:last-child) .custom-file-label, .input-group > .custom-file:not(:last-child) .custom-file-label::before { + .input-group > .custom-file:not(:last-child) .custom-file-label, + .input-group > .custom-file:not(:last-child) .custom-file-label::before { border-top-right-radius: 0; border-bottom-right-radius: 0; } - .input-group > .custom-file:not(:first-child) .custom-file-label, .input-group > .custom-file:not(:first-child) .custom-file-label::before { + .input-group > .custom-file:not(:first-child) .custom-file-label, + .input-group > .custom-file:not(:first-child) .custom-file-label::before { border-top-left-radius: 0; border-bottom-left-radius: 0; } @@ -2563,25 +2475,34 @@ tbody.collapse.show { .custom-checkbox .custom-control-label::before { border-radius: 0.25rem; } + .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { background-color: #1684c4; } + .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"); } + .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { background-color: #1684c4; } + .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E"); } + .custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before { background-color: rgba(22, 132, 196, 0.5); } + .custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before { background-color: rgba(22, 132, 196, 0.5); } .custom-radio .custom-control-label::before { border-radius: 50%; } + .custom-radio .custom-control-input:checked ~ .custom-control-label::before { background-color: #1684c4; } + .custom-radio .custom-control-input:checked ~ .custom-control-label::after { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E"); } + .custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before { background-color: rgba(22, 132, 196, 0.5); } @@ -2719,6 +2640,7 @@ tbody.collapse.show { .nav-pills .nav-link { border-radius: 0.25rem; } + .nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: #fff; @@ -2735,6 +2657,7 @@ tbody.collapse.show { .tab-content > .tab-pane { display: none; } + .tab-content > .active { display: block; } @@ -2812,6 +2735,7 @@ tbody.collapse.show { .navbar-expand-sm > .container-fluid { padding-right: 0; padding-left: 0; } } + @media (min-width: 576px) { .navbar-expand-sm { flex-flow: row nowrap; @@ -2837,11 +2761,13 @@ tbody.collapse.show { .navbar-expand-sm .dropup .dropdown-menu { top: auto; bottom: 100%; } } + @media (max-width: 767.98px) { .navbar-expand-md > .container, .navbar-expand-md > .container-fluid { padding-right: 0; padding-left: 0; } } + @media (min-width: 768px) { .navbar-expand-md { flex-flow: row nowrap; @@ -2867,11 +2793,13 @@ tbody.collapse.show { .navbar-expand-md .dropup .dropdown-menu { top: auto; bottom: 100%; } } + @media (max-width: 991.98px) { .navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid { padding-right: 0; padding-left: 0; } } + @media (min-width: 992px) { .navbar-expand-lg { flex-flow: row nowrap; @@ -2897,11 +2825,13 @@ tbody.collapse.show { .navbar-expand-lg .dropup .dropdown-menu { top: auto; bottom: 100%; } } + @media (max-width: 1199.98px) { .navbar-expand-xl > .container, .navbar-expand-xl > .container-fluid { padding-right: 0; padding-left: 0; } } + @media (min-width: 1200px) { .navbar-expand-xl { flex-flow: row nowrap; @@ -2927,6 +2857,7 @@ tbody.collapse.show { .navbar-expand-xl .dropup .dropdown-menu { top: auto; bottom: 100%; } } + .navbar-expand { flex-flow: row nowrap; justify-content: flex-start; } @@ -2960,22 +2891,27 @@ tbody.collapse.show { color: rgba(34, 34, 34, 0.9); } .navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus { color: rgba(34, 34, 34, 0.9); } + .navbar-light .navbar-nav .nav-link { color: rgba(34, 34, 34, 0.5); } .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus { color: rgba(34, 34, 34, 0.7); } .navbar-light .navbar-nav .nav-link.disabled { color: rgba(34, 34, 34, 0.3); } + .navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link.active { color: rgba(34, 34, 34, 0.9); } + .navbar-light .navbar-toggler { color: rgba(34, 34, 34, 0.5); border-color: rgba(34, 34, 34, 0.1); } + .navbar-light .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(34, 34, 34, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } + .navbar-light .navbar-text { color: rgba(34, 34, 34, 0.5); } .navbar-light .navbar-text a { @@ -2987,22 +2923,27 @@ tbody.collapse.show { color: #fff; } .navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus { color: #fff; } + .navbar-dark .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.5); } .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus { color: rgba(255, 255, 255, 0.75); } .navbar-dark .navbar-nav .nav-link.disabled { color: rgba(255, 255, 255, 0.25); } + .navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .nav-link.active { color: #fff; } + .navbar-dark .navbar-toggler { color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.1); } + .navbar-dark .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } + .navbar-dark .navbar-text { color: rgba(255, 255, 255, 0.5); } .navbar-dark .navbar-text a { @@ -3046,6 +2987,7 @@ tbody.collapse.show { .card-link:hover { text-decoration: none; } + .card-link + .card-link { margin-left: 1.25rem; } @@ -3168,6 +3110,7 @@ tbody.collapse.show { .card-columns .card { margin-bottom: 0.75rem; } + @media (min-width: 576px) { .card-columns { column-count: 3; @@ -3191,10 +3134,13 @@ tbody.collapse.show { padding-left: 0.5rem; color: #6c757d; content: "/"; } + .breadcrumb-item + .breadcrumb-item:hover::before { text-decoration: underline; } + .breadcrumb-item + .breadcrumb-item:hover::before { text-decoration: none; } + .breadcrumb-item.active { color: #6c757d; } @@ -3229,14 +3175,17 @@ tbody.collapse.show { margin-left: 0; border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } + .page-item:last-child .page-link { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } + .page-item.active .page-link { z-index: 1; color: #fff; background-color: #1684c4; border-color: #1684c4; } + .page-item.disabled .page-link { color: #6c757d; pointer-events: none; @@ -3248,9 +3197,11 @@ tbody.collapse.show { padding: 0.75rem 1.5rem; font-size: 1.25rem; line-height: 1.5; } + .pagination-lg .page-item:first-child .page-link { border-top-left-radius: 0.3rem; border-bottom-left-radius: 0.3rem; } + .pagination-lg .page-item:last-child .page-link { border-top-right-radius: 0.3rem; border-bottom-right-radius: 0.3rem; } @@ -3259,9 +3210,11 @@ tbody.collapse.show { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; } + .pagination-sm .page-item:first-child .page-link { border-top-left-radius: 0.2rem; border-bottom-left-radius: 0.2rem; } + .pagination-sm .page-item:last-child .page-link { border-top-right-radius: 0.2rem; border-bottom-right-radius: 0.2rem; } @@ -3465,6 +3418,7 @@ tbody.collapse.show { background-position: 1rem 0; } to { background-position: 0 0; } } + .progress { display: flex; height: 1rem; @@ -3544,8 +3498,10 @@ tbody.collapse.show { border-right: 0; border-left: 0; border-radius: 0; } + .list-group-flush:first-child .list-group-item:first-child { border-top: 0; } + .list-group-flush:last-child .list-group-item:last-child { border-bottom: 0; } @@ -3759,15 +3715,15 @@ button.close { .modal-dialog { max-width: 500px; margin: 1.75rem auto; } - .modal-dialog-centered { min-height: calc(100% - (1.75rem * 2)); } - .modal-sm { max-width: 300px; } } + @media (min-width: 992px) { .modal-lg { max-width: 800px; } } + .tooltip { position: absolute; z-index: 1070; @@ -3902,7 +3858,9 @@ button.close { .bs-popover-top .arrow::before, .bs-popover-auto[x-placement^="top"] .arrow::before { bottom: 0; border-top-color: rgba(34, 34, 34, 0.25); } - .bs-popover-top .arrow::after, .bs-popover-auto[x-placement^="top"] .arrow::after { + + .bs-popover-top .arrow::after, + .bs-popover-auto[x-placement^="top"] .arrow::after { bottom: 1px; border-top-color: #fff; } @@ -3920,7 +3878,9 @@ button.close { .bs-popover-right .arrow::before, .bs-popover-auto[x-placement^="right"] .arrow::before { left: 0; border-right-color: rgba(34, 34, 34, 0.25); } - .bs-popover-right .arrow::after, .bs-popover-auto[x-placement^="right"] .arrow::after { + + .bs-popover-right .arrow::after, + .bs-popover-auto[x-placement^="right"] .arrow::after { left: 1px; border-right-color: #fff; } @@ -3935,7 +3895,9 @@ button.close { .bs-popover-bottom .arrow::before, .bs-popover-auto[x-placement^="bottom"] .arrow::before { top: 0; border-bottom-color: rgba(34, 34, 34, 0.25); } - .bs-popover-bottom .arrow::after, .bs-popover-auto[x-placement^="bottom"] .arrow::after { + + .bs-popover-bottom .arrow::after, + .bs-popover-auto[x-placement^="bottom"] .arrow::after { top: 1px; border-bottom-color: #fff; } .bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^="bottom"] .popover-header::before { @@ -3962,7 +3924,9 @@ button.close { .bs-popover-left .arrow::before, .bs-popover-auto[x-placement^="left"] .arrow::before { right: 0; border-left-color: rgba(34, 34, 34, 0.25); } - .bs-popover-left .arrow::after, .bs-popover-auto[x-placement^="left"] .arrow::after { + + .bs-popover-left .arrow::after, + .bs-popover-auto[x-placement^="left"] .arrow::after { right: 1px; border-left-color: #fff; } @@ -4329,138 +4293,103 @@ button.bg-dark:focus { @media (min-width: 576px) { .d-sm-none { display: none !important; } - .d-sm-inline { display: inline !important; } - .d-sm-inline-block { display: inline-block !important; } - .d-sm-block { display: block !important; } - .d-sm-table { display: table !important; } - .d-sm-table-row { display: table-row !important; } - .d-sm-table-cell { display: table-cell !important; } - .d-sm-flex { display: flex !important; } - .d-sm-inline-flex { display: inline-flex !important; } } + @media (min-width: 768px) { .d-md-none { display: none !important; } - .d-md-inline { display: inline !important; } - .d-md-inline-block { display: inline-block !important; } - .d-md-block { display: block !important; } - .d-md-table { display: table !important; } - .d-md-table-row { display: table-row !important; } - .d-md-table-cell { display: table-cell !important; } - .d-md-flex { display: flex !important; } - .d-md-inline-flex { display: inline-flex !important; } } + @media (min-width: 992px) { .d-lg-none { display: none !important; } - .d-lg-inline { display: inline !important; } - .d-lg-inline-block { display: inline-block !important; } - .d-lg-block { display: block !important; } - .d-lg-table { display: table !important; } - .d-lg-table-row { display: table-row !important; } - .d-lg-table-cell { display: table-cell !important; } - .d-lg-flex { display: flex !important; } - .d-lg-inline-flex { display: inline-flex !important; } } + @media (min-width: 1200px) { .d-xl-none { display: none !important; } - .d-xl-inline { display: inline !important; } - .d-xl-inline-block { display: inline-block !important; } - .d-xl-block { display: block !important; } - .d-xl-table { display: table !important; } - .d-xl-table-row { display: table-row !important; } - .d-xl-table-cell { display: table-cell !important; } - .d-xl-flex { display: flex !important; } - .d-xl-inline-flex { display: inline-flex !important; } } + @media print { .d-print-none { display: none !important; } - .d-print-inline { display: inline !important; } - .d-print-inline-block { display: inline-block !important; } - .d-print-block { display: block !important; } - .d-print-table { display: table !important; } - .d-print-table-row { display: table-row !important; } - .d-print-table-cell { display: table-cell !important; } - .d-print-flex { display: flex !important; } - .d-print-inline-flex { display: inline-flex !important; } } + .embed-responsive { position: relative; display: block; @@ -4484,7 +4413,7 @@ button.bg-dark:focus { border: 0; } .embed-responsive-21by9::before { - padding-top: 42.8571428571%; } + padding-top: 42.85714%; } .embed-responsive-16by9::before { padding-top: 56.25%; } @@ -4585,351 +4514,243 @@ button.bg-dark:focus { @media (min-width: 576px) { .flex-sm-row { flex-direction: row !important; } - .flex-sm-column { flex-direction: column !important; } - .flex-sm-row-reverse { flex-direction: row-reverse !important; } - .flex-sm-column-reverse { flex-direction: column-reverse !important; } - .flex-sm-wrap { flex-wrap: wrap !important; } - .flex-sm-nowrap { flex-wrap: nowrap !important; } - .flex-sm-wrap-reverse { flex-wrap: wrap-reverse !important; } - .justify-content-sm-start { justify-content: flex-start !important; } - .justify-content-sm-end { justify-content: flex-end !important; } - .justify-content-sm-center { justify-content: center !important; } - .justify-content-sm-between { justify-content: space-between !important; } - .justify-content-sm-around { justify-content: space-around !important; } - .align-items-sm-start { align-items: flex-start !important; } - .align-items-sm-end { align-items: flex-end !important; } - .align-items-sm-center { align-items: center !important; } - .align-items-sm-baseline { align-items: baseline !important; } - .align-items-sm-stretch { align-items: stretch !important; } - .align-content-sm-start { align-content: flex-start !important; } - .align-content-sm-end { align-content: flex-end !important; } - .align-content-sm-center { align-content: center !important; } - .align-content-sm-between { align-content: space-between !important; } - .align-content-sm-around { align-content: space-around !important; } - .align-content-sm-stretch { align-content: stretch !important; } - .align-self-sm-auto { align-self: auto !important; } - .align-self-sm-start { align-self: flex-start !important; } - .align-self-sm-end { align-self: flex-end !important; } - .align-self-sm-center { align-self: center !important; } - .align-self-sm-baseline { align-self: baseline !important; } - .align-self-sm-stretch { align-self: stretch !important; } } + @media (min-width: 768px) { .flex-md-row { flex-direction: row !important; } - .flex-md-column { flex-direction: column !important; } - .flex-md-row-reverse { flex-direction: row-reverse !important; } - .flex-md-column-reverse { flex-direction: column-reverse !important; } - .flex-md-wrap { flex-wrap: wrap !important; } - .flex-md-nowrap { flex-wrap: nowrap !important; } - .flex-md-wrap-reverse { flex-wrap: wrap-reverse !important; } - .justify-content-md-start { justify-content: flex-start !important; } - .justify-content-md-end { justify-content: flex-end !important; } - .justify-content-md-center { justify-content: center !important; } - .justify-content-md-between { justify-content: space-between !important; } - .justify-content-md-around { justify-content: space-around !important; } - .align-items-md-start { align-items: flex-start !important; } - .align-items-md-end { align-items: flex-end !important; } - .align-items-md-center { align-items: center !important; } - .align-items-md-baseline { align-items: baseline !important; } - .align-items-md-stretch { align-items: stretch !important; } - .align-content-md-start { align-content: flex-start !important; } - .align-content-md-end { align-content: flex-end !important; } - .align-content-md-center { align-content: center !important; } - .align-content-md-between { align-content: space-between !important; } - .align-content-md-around { align-content: space-around !important; } - .align-content-md-stretch { align-content: stretch !important; } - .align-self-md-auto { align-self: auto !important; } - .align-self-md-start { align-self: flex-start !important; } - .align-self-md-end { align-self: flex-end !important; } - .align-self-md-center { align-self: center !important; } - .align-self-md-baseline { align-self: baseline !important; } - .align-self-md-stretch { align-self: stretch !important; } } + @media (min-width: 992px) { .flex-lg-row { flex-direction: row !important; } - .flex-lg-column { flex-direction: column !important; } - .flex-lg-row-reverse { flex-direction: row-reverse !important; } - .flex-lg-column-reverse { flex-direction: column-reverse !important; } - .flex-lg-wrap { flex-wrap: wrap !important; } - .flex-lg-nowrap { flex-wrap: nowrap !important; } - .flex-lg-wrap-reverse { flex-wrap: wrap-reverse !important; } - .justify-content-lg-start { justify-content: flex-start !important; } - .justify-content-lg-end { justify-content: flex-end !important; } - .justify-content-lg-center { justify-content: center !important; } - .justify-content-lg-between { justify-content: space-between !important; } - .justify-content-lg-around { justify-content: space-around !important; } - .align-items-lg-start { align-items: flex-start !important; } - .align-items-lg-end { align-items: flex-end !important; } - .align-items-lg-center { align-items: center !important; } - .align-items-lg-baseline { align-items: baseline !important; } - .align-items-lg-stretch { align-items: stretch !important; } - .align-content-lg-start { align-content: flex-start !important; } - .align-content-lg-end { align-content: flex-end !important; } - .align-content-lg-center { align-content: center !important; } - .align-content-lg-between { align-content: space-between !important; } - .align-content-lg-around { align-content: space-around !important; } - .align-content-lg-stretch { align-content: stretch !important; } - .align-self-lg-auto { align-self: auto !important; } - .align-self-lg-start { align-self: flex-start !important; } - .align-self-lg-end { align-self: flex-end !important; } - .align-self-lg-center { align-self: center !important; } - .align-self-lg-baseline { align-self: baseline !important; } - .align-self-lg-stretch { align-self: stretch !important; } } + @media (min-width: 1200px) { .flex-xl-row { flex-direction: row !important; } - .flex-xl-column { flex-direction: column !important; } - .flex-xl-row-reverse { flex-direction: row-reverse !important; } - .flex-xl-column-reverse { flex-direction: column-reverse !important; } - .flex-xl-wrap { flex-wrap: wrap !important; } - .flex-xl-nowrap { flex-wrap: nowrap !important; } - .flex-xl-wrap-reverse { flex-wrap: wrap-reverse !important; } - .justify-content-xl-start { justify-content: flex-start !important; } - .justify-content-xl-end { justify-content: flex-end !important; } - .justify-content-xl-center { justify-content: center !important; } - .justify-content-xl-between { justify-content: space-between !important; } - .justify-content-xl-around { justify-content: space-around !important; } - .align-items-xl-start { align-items: flex-start !important; } - .align-items-xl-end { align-items: flex-end !important; } - .align-items-xl-center { align-items: center !important; } - .align-items-xl-baseline { align-items: baseline !important; } - .align-items-xl-stretch { align-items: stretch !important; } - .align-content-xl-start { align-content: flex-start !important; } - .align-content-xl-end { align-content: flex-end !important; } - .align-content-xl-center { align-content: center !important; } - .align-content-xl-between { align-content: space-between !important; } - .align-content-xl-around { align-content: space-around !important; } - .align-content-xl-stretch { align-content: stretch !important; } - .align-self-xl-auto { align-self: auto !important; } - .align-self-xl-start { align-self: flex-start !important; } - .align-self-xl-end { align-self: flex-end !important; } - .align-self-xl-center { align-self: center !important; } - .align-self-xl-baseline { align-self: baseline !important; } - .align-self-xl-stretch { align-self: stretch !important; } } + .float-left { float: left !important; } @@ -4942,39 +4763,35 @@ button.bg-dark:focus { @media (min-width: 576px) { .float-sm-left { float: left !important; } - .float-sm-right { float: right !important; } - .float-sm-none { float: none !important; } } + @media (min-width: 768px) { .float-md-left { float: left !important; } - .float-md-right { float: right !important; } - .float-md-none { float: none !important; } } + @media (min-width: 992px) { .float-lg-left { float: left !important; } - .float-lg-right { float: right !important; } - .float-lg-none { float: none !important; } } + @media (min-width: 1200px) { .float-xl-left { float: left !important; } - .float-xl-right { float: right !important; } - .float-xl-none { float: none !important; } } + .position-static { position: static !important; } @@ -5310,991 +5127,739 @@ button.bg-dark:focus { @media (min-width: 576px) { .m-sm-0 { margin: 0 !important; } - .mt-sm-0, .my-sm-0 { margin-top: 0 !important; } - .mr-sm-0, .mx-sm-0 { margin-right: 0 !important; } - .mb-sm-0, .my-sm-0 { margin-bottom: 0 !important; } - .ml-sm-0, .mx-sm-0 { margin-left: 0 !important; } - .m-sm-1 { margin: 0.25rem !important; } - .mt-sm-1, .my-sm-1 { margin-top: 0.25rem !important; } - .mr-sm-1, .mx-sm-1 { margin-right: 0.25rem !important; } - .mb-sm-1, .my-sm-1 { margin-bottom: 0.25rem !important; } - .ml-sm-1, .mx-sm-1 { margin-left: 0.25rem !important; } - .m-sm-2 { margin: 0.5rem !important; } - .mt-sm-2, .my-sm-2 { margin-top: 0.5rem !important; } - .mr-sm-2, .mx-sm-2 { margin-right: 0.5rem !important; } - .mb-sm-2, .my-sm-2 { margin-bottom: 0.5rem !important; } - .ml-sm-2, .mx-sm-2 { margin-left: 0.5rem !important; } - .m-sm-3 { margin: 1rem !important; } - .mt-sm-3, .my-sm-3 { margin-top: 1rem !important; } - .mr-sm-3, .mx-sm-3 { margin-right: 1rem !important; } - .mb-sm-3, .my-sm-3 { margin-bottom: 1rem !important; } - .ml-sm-3, .mx-sm-3 { margin-left: 1rem !important; } - .m-sm-4 { margin: 1.5rem !important; } - .mt-sm-4, .my-sm-4 { margin-top: 1.5rem !important; } - .mr-sm-4, .mx-sm-4 { margin-right: 1.5rem !important; } - .mb-sm-4, .my-sm-4 { margin-bottom: 1.5rem !important; } - .ml-sm-4, .mx-sm-4 { margin-left: 1.5rem !important; } - .m-sm-5 { margin: 3rem !important; } - .mt-sm-5, .my-sm-5 { margin-top: 3rem !important; } - .mr-sm-5, .mx-sm-5 { margin-right: 3rem !important; } - .mb-sm-5, .my-sm-5 { margin-bottom: 3rem !important; } - .ml-sm-5, .mx-sm-5 { margin-left: 3rem !important; } - .p-sm-0 { padding: 0 !important; } - .pt-sm-0, .py-sm-0 { padding-top: 0 !important; } - .pr-sm-0, .px-sm-0 { padding-right: 0 !important; } - .pb-sm-0, .py-sm-0 { padding-bottom: 0 !important; } - .pl-sm-0, .px-sm-0 { padding-left: 0 !important; } - .p-sm-1 { padding: 0.25rem !important; } - .pt-sm-1, .py-sm-1 { padding-top: 0.25rem !important; } - .pr-sm-1, .px-sm-1 { padding-right: 0.25rem !important; } - .pb-sm-1, .py-sm-1 { padding-bottom: 0.25rem !important; } - .pl-sm-1, .px-sm-1 { padding-left: 0.25rem !important; } - .p-sm-2 { padding: 0.5rem !important; } - .pt-sm-2, .py-sm-2 { padding-top: 0.5rem !important; } - .pr-sm-2, .px-sm-2 { padding-right: 0.5rem !important; } - .pb-sm-2, .py-sm-2 { padding-bottom: 0.5rem !important; } - .pl-sm-2, .px-sm-2 { padding-left: 0.5rem !important; } - .p-sm-3 { padding: 1rem !important; } - .pt-sm-3, .py-sm-3 { padding-top: 1rem !important; } - .pr-sm-3, .px-sm-3 { padding-right: 1rem !important; } - .pb-sm-3, .py-sm-3 { padding-bottom: 1rem !important; } - .pl-sm-3, .px-sm-3 { padding-left: 1rem !important; } - .p-sm-4 { padding: 1.5rem !important; } - .pt-sm-4, .py-sm-4 { padding-top: 1.5rem !important; } - .pr-sm-4, .px-sm-4 { padding-right: 1.5rem !important; } - .pb-sm-4, .py-sm-4 { padding-bottom: 1.5rem !important; } - .pl-sm-4, .px-sm-4 { padding-left: 1.5rem !important; } - .p-sm-5 { padding: 3rem !important; } - .pt-sm-5, .py-sm-5 { padding-top: 3rem !important; } - .pr-sm-5, .px-sm-5 { padding-right: 3rem !important; } - .pb-sm-5, .py-sm-5 { padding-bottom: 3rem !important; } - .pl-sm-5, .px-sm-5 { padding-left: 3rem !important; } - .m-sm-auto { margin: auto !important; } - .mt-sm-auto, .my-sm-auto { margin-top: auto !important; } - .mr-sm-auto, .mx-sm-auto { margin-right: auto !important; } - .mb-sm-auto, .my-sm-auto { margin-bottom: auto !important; } - .ml-sm-auto, .mx-sm-auto { margin-left: auto !important; } } + @media (min-width: 768px) { .m-md-0 { margin: 0 !important; } - .mt-md-0, .my-md-0 { margin-top: 0 !important; } - .mr-md-0, .mx-md-0 { margin-right: 0 !important; } - .mb-md-0, .my-md-0 { margin-bottom: 0 !important; } - .ml-md-0, .mx-md-0 { margin-left: 0 !important; } - .m-md-1 { margin: 0.25rem !important; } - .mt-md-1, .my-md-1 { margin-top: 0.25rem !important; } - .mr-md-1, .mx-md-1 { margin-right: 0.25rem !important; } - .mb-md-1, .my-md-1 { margin-bottom: 0.25rem !important; } - .ml-md-1, .mx-md-1 { margin-left: 0.25rem !important; } - .m-md-2 { margin: 0.5rem !important; } - .mt-md-2, .my-md-2 { margin-top: 0.5rem !important; } - .mr-md-2, .mx-md-2 { margin-right: 0.5rem !important; } - .mb-md-2, .my-md-2 { margin-bottom: 0.5rem !important; } - .ml-md-2, .mx-md-2 { margin-left: 0.5rem !important; } - .m-md-3 { margin: 1rem !important; } - .mt-md-3, .my-md-3 { margin-top: 1rem !important; } - .mr-md-3, .mx-md-3 { margin-right: 1rem !important; } - .mb-md-3, .my-md-3 { margin-bottom: 1rem !important; } - .ml-md-3, .mx-md-3 { margin-left: 1rem !important; } - .m-md-4 { margin: 1.5rem !important; } - .mt-md-4, .my-md-4 { margin-top: 1.5rem !important; } - .mr-md-4, .mx-md-4 { margin-right: 1.5rem !important; } - .mb-md-4, .my-md-4 { margin-bottom: 1.5rem !important; } - .ml-md-4, .mx-md-4 { margin-left: 1.5rem !important; } - .m-md-5 { margin: 3rem !important; } - .mt-md-5, .my-md-5 { margin-top: 3rem !important; } - .mr-md-5, .mx-md-5 { margin-right: 3rem !important; } - .mb-md-5, .my-md-5 { margin-bottom: 3rem !important; } - .ml-md-5, .mx-md-5 { margin-left: 3rem !important; } - .p-md-0 { padding: 0 !important; } - .pt-md-0, .py-md-0 { padding-top: 0 !important; } - .pr-md-0, .px-md-0 { padding-right: 0 !important; } - .pb-md-0, .py-md-0 { padding-bottom: 0 !important; } - .pl-md-0, .px-md-0 { padding-left: 0 !important; } - .p-md-1 { padding: 0.25rem !important; } - .pt-md-1, .py-md-1 { padding-top: 0.25rem !important; } - .pr-md-1, .px-md-1 { padding-right: 0.25rem !important; } - .pb-md-1, .py-md-1 { padding-bottom: 0.25rem !important; } - .pl-md-1, .px-md-1 { padding-left: 0.25rem !important; } - .p-md-2 { padding: 0.5rem !important; } - .pt-md-2, .py-md-2 { padding-top: 0.5rem !important; } - .pr-md-2, .px-md-2 { padding-right: 0.5rem !important; } - .pb-md-2, .py-md-2 { padding-bottom: 0.5rem !important; } - .pl-md-2, .px-md-2 { padding-left: 0.5rem !important; } - .p-md-3 { padding: 1rem !important; } - .pt-md-3, .py-md-3 { padding-top: 1rem !important; } - .pr-md-3, .px-md-3 { padding-right: 1rem !important; } - .pb-md-3, .py-md-3 { padding-bottom: 1rem !important; } - .pl-md-3, .px-md-3 { padding-left: 1rem !important; } - .p-md-4 { padding: 1.5rem !important; } - .pt-md-4, .py-md-4 { padding-top: 1.5rem !important; } - .pr-md-4, .px-md-4 { padding-right: 1.5rem !important; } - .pb-md-4, .py-md-4 { padding-bottom: 1.5rem !important; } - .pl-md-4, .px-md-4 { padding-left: 1.5rem !important; } - .p-md-5 { padding: 3rem !important; } - .pt-md-5, .py-md-5 { padding-top: 3rem !important; } - .pr-md-5, .px-md-5 { padding-right: 3rem !important; } - .pb-md-5, .py-md-5 { padding-bottom: 3rem !important; } - .pl-md-5, .px-md-5 { padding-left: 3rem !important; } - .m-md-auto { margin: auto !important; } - .mt-md-auto, .my-md-auto { margin-top: auto !important; } - .mr-md-auto, .mx-md-auto { margin-right: auto !important; } - .mb-md-auto, .my-md-auto { margin-bottom: auto !important; } - .ml-md-auto, .mx-md-auto { margin-left: auto !important; } } + @media (min-width: 992px) { .m-lg-0 { margin: 0 !important; } - .mt-lg-0, .my-lg-0 { margin-top: 0 !important; } - .mr-lg-0, .mx-lg-0 { margin-right: 0 !important; } - .mb-lg-0, .my-lg-0 { margin-bottom: 0 !important; } - .ml-lg-0, .mx-lg-0 { margin-left: 0 !important; } - .m-lg-1 { margin: 0.25rem !important; } - .mt-lg-1, .my-lg-1 { margin-top: 0.25rem !important; } - .mr-lg-1, .mx-lg-1 { margin-right: 0.25rem !important; } - .mb-lg-1, .my-lg-1 { margin-bottom: 0.25rem !important; } - .ml-lg-1, .mx-lg-1 { margin-left: 0.25rem !important; } - .m-lg-2 { margin: 0.5rem !important; } - .mt-lg-2, .my-lg-2 { margin-top: 0.5rem !important; } - .mr-lg-2, .mx-lg-2 { margin-right: 0.5rem !important; } - .mb-lg-2, .my-lg-2 { margin-bottom: 0.5rem !important; } - .ml-lg-2, .mx-lg-2 { margin-left: 0.5rem !important; } - .m-lg-3 { margin: 1rem !important; } - .mt-lg-3, .my-lg-3 { margin-top: 1rem !important; } - .mr-lg-3, .mx-lg-3 { margin-right: 1rem !important; } - .mb-lg-3, .my-lg-3 { margin-bottom: 1rem !important; } - .ml-lg-3, .mx-lg-3 { margin-left: 1rem !important; } - .m-lg-4 { margin: 1.5rem !important; } - .mt-lg-4, .my-lg-4 { margin-top: 1.5rem !important; } - .mr-lg-4, .mx-lg-4 { margin-right: 1.5rem !important; } - .mb-lg-4, .my-lg-4 { margin-bottom: 1.5rem !important; } - .ml-lg-4, .mx-lg-4 { margin-left: 1.5rem !important; } - .m-lg-5 { margin: 3rem !important; } - .mt-lg-5, .my-lg-5 { margin-top: 3rem !important; } - .mr-lg-5, .mx-lg-5 { margin-right: 3rem !important; } - .mb-lg-5, .my-lg-5 { margin-bottom: 3rem !important; } - .ml-lg-5, .mx-lg-5 { margin-left: 3rem !important; } - .p-lg-0 { padding: 0 !important; } - .pt-lg-0, .py-lg-0 { padding-top: 0 !important; } - .pr-lg-0, .px-lg-0 { padding-right: 0 !important; } - .pb-lg-0, .py-lg-0 { padding-bottom: 0 !important; } - .pl-lg-0, .px-lg-0 { padding-left: 0 !important; } - .p-lg-1 { padding: 0.25rem !important; } - .pt-lg-1, .py-lg-1 { padding-top: 0.25rem !important; } - .pr-lg-1, .px-lg-1 { padding-right: 0.25rem !important; } - .pb-lg-1, .py-lg-1 { padding-bottom: 0.25rem !important; } - .pl-lg-1, .px-lg-1 { padding-left: 0.25rem !important; } - .p-lg-2 { padding: 0.5rem !important; } - .pt-lg-2, .py-lg-2 { padding-top: 0.5rem !important; } - .pr-lg-2, .px-lg-2 { padding-right: 0.5rem !important; } - .pb-lg-2, .py-lg-2 { padding-bottom: 0.5rem !important; } - .pl-lg-2, .px-lg-2 { padding-left: 0.5rem !important; } - .p-lg-3 { padding: 1rem !important; } - .pt-lg-3, .py-lg-3 { padding-top: 1rem !important; } - .pr-lg-3, .px-lg-3 { padding-right: 1rem !important; } - .pb-lg-3, .py-lg-3 { padding-bottom: 1rem !important; } - .pl-lg-3, .px-lg-3 { padding-left: 1rem !important; } - .p-lg-4 { padding: 1.5rem !important; } - .pt-lg-4, .py-lg-4 { padding-top: 1.5rem !important; } - .pr-lg-4, .px-lg-4 { padding-right: 1.5rem !important; } - .pb-lg-4, .py-lg-4 { padding-bottom: 1.5rem !important; } - .pl-lg-4, .px-lg-4 { padding-left: 1.5rem !important; } - .p-lg-5 { padding: 3rem !important; } - .pt-lg-5, .py-lg-5 { padding-top: 3rem !important; } - .pr-lg-5, .px-lg-5 { padding-right: 3rem !important; } - .pb-lg-5, .py-lg-5 { padding-bottom: 3rem !important; } - .pl-lg-5, .px-lg-5 { padding-left: 3rem !important; } - .m-lg-auto { margin: auto !important; } - .mt-lg-auto, .my-lg-auto { margin-top: auto !important; } - .mr-lg-auto, .mx-lg-auto { margin-right: auto !important; } - .mb-lg-auto, .my-lg-auto { margin-bottom: auto !important; } - .ml-lg-auto, .mx-lg-auto { margin-left: auto !important; } } + @media (min-width: 1200px) { .m-xl-0 { margin: 0 !important; } - .mt-xl-0, .my-xl-0 { margin-top: 0 !important; } - .mr-xl-0, .mx-xl-0 { margin-right: 0 !important; } - .mb-xl-0, .my-xl-0 { margin-bottom: 0 !important; } - .ml-xl-0, .mx-xl-0 { margin-left: 0 !important; } - .m-xl-1 { margin: 0.25rem !important; } - .mt-xl-1, .my-xl-1 { margin-top: 0.25rem !important; } - .mr-xl-1, .mx-xl-1 { margin-right: 0.25rem !important; } - .mb-xl-1, .my-xl-1 { margin-bottom: 0.25rem !important; } - .ml-xl-1, .mx-xl-1 { margin-left: 0.25rem !important; } - .m-xl-2 { margin: 0.5rem !important; } - .mt-xl-2, .my-xl-2 { margin-top: 0.5rem !important; } - .mr-xl-2, .mx-xl-2 { margin-right: 0.5rem !important; } - .mb-xl-2, .my-xl-2 { margin-bottom: 0.5rem !important; } - .ml-xl-2, .mx-xl-2 { margin-left: 0.5rem !important; } - .m-xl-3 { margin: 1rem !important; } - .mt-xl-3, .my-xl-3 { margin-top: 1rem !important; } - .mr-xl-3, .mx-xl-3 { margin-right: 1rem !important; } - .mb-xl-3, .my-xl-3 { margin-bottom: 1rem !important; } - .ml-xl-3, .mx-xl-3 { margin-left: 1rem !important; } - .m-xl-4 { margin: 1.5rem !important; } - .mt-xl-4, .my-xl-4 { margin-top: 1.5rem !important; } - .mr-xl-4, .mx-xl-4 { margin-right: 1.5rem !important; } - .mb-xl-4, .my-xl-4 { margin-bottom: 1.5rem !important; } - .ml-xl-4, .mx-xl-4 { margin-left: 1.5rem !important; } - .m-xl-5 { margin: 3rem !important; } - .mt-xl-5, .my-xl-5 { margin-top: 3rem !important; } - .mr-xl-5, .mx-xl-5 { margin-right: 3rem !important; } - .mb-xl-5, .my-xl-5 { margin-bottom: 3rem !important; } - .ml-xl-5, .mx-xl-5 { margin-left: 3rem !important; } - .p-xl-0 { padding: 0 !important; } - .pt-xl-0, .py-xl-0 { padding-top: 0 !important; } - .pr-xl-0, .px-xl-0 { padding-right: 0 !important; } - .pb-xl-0, .py-xl-0 { padding-bottom: 0 !important; } - .pl-xl-0, .px-xl-0 { padding-left: 0 !important; } - .p-xl-1 { padding: 0.25rem !important; } - .pt-xl-1, .py-xl-1 { padding-top: 0.25rem !important; } - .pr-xl-1, .px-xl-1 { padding-right: 0.25rem !important; } - .pb-xl-1, .py-xl-1 { padding-bottom: 0.25rem !important; } - .pl-xl-1, .px-xl-1 { padding-left: 0.25rem !important; } - .p-xl-2 { padding: 0.5rem !important; } - .pt-xl-2, .py-xl-2 { padding-top: 0.5rem !important; } - .pr-xl-2, .px-xl-2 { padding-right: 0.5rem !important; } - .pb-xl-2, .py-xl-2 { padding-bottom: 0.5rem !important; } - .pl-xl-2, .px-xl-2 { padding-left: 0.5rem !important; } - .p-xl-3 { padding: 1rem !important; } - .pt-xl-3, .py-xl-3 { padding-top: 1rem !important; } - .pr-xl-3, .px-xl-3 { padding-right: 1rem !important; } - .pb-xl-3, .py-xl-3 { padding-bottom: 1rem !important; } - .pl-xl-3, .px-xl-3 { padding-left: 1rem !important; } - .p-xl-4 { padding: 1.5rem !important; } - .pt-xl-4, .py-xl-4 { padding-top: 1.5rem !important; } - .pr-xl-4, .px-xl-4 { padding-right: 1.5rem !important; } - .pb-xl-4, .py-xl-4 { padding-bottom: 1.5rem !important; } - .pl-xl-4, .px-xl-4 { padding-left: 1.5rem !important; } - .p-xl-5 { padding: 3rem !important; } - .pt-xl-5, .py-xl-5 { padding-top: 3rem !important; } - .pr-xl-5, .px-xl-5 { padding-right: 3rem !important; } - .pb-xl-5, .py-xl-5 { padding-bottom: 3rem !important; } - .pl-xl-5, .px-xl-5 { padding-left: 3rem !important; } - .m-xl-auto { margin: auto !important; } - .mt-xl-auto, .my-xl-auto { margin-top: auto !important; } - .mr-xl-auto, .mx-xl-auto { margin-right: auto !important; } - .mb-xl-auto, .my-xl-auto { margin-bottom: auto !important; } - .ml-xl-auto, .mx-xl-auto { margin-left: auto !important; } } + .text-justify { text-align: justify !important; } @@ -6318,39 +5883,35 @@ button.bg-dark:focus { @media (min-width: 576px) { .text-sm-left { text-align: left !important; } - .text-sm-right { text-align: right !important; } - .text-sm-center { text-align: center !important; } } + @media (min-width: 768px) { .text-md-left { text-align: left !important; } - .text-md-right { text-align: right !important; } - .text-md-center { text-align: center !important; } } + @media (min-width: 992px) { .text-lg-left { text-align: left !important; } - .text-lg-right { text-align: right !important; } - .text-lg-center { text-align: center !important; } } + @media (min-width: 1200px) { .text-xl-left { text-align: left !important; } - .text-xl-right { text-align: right !important; } - .text-xl-center { text-align: center !important; } } + .text-lowercase { text-transform: lowercase !important; } @@ -6445,61 +6006,48 @@ a.text-dark:hover, a.text-dark:focus { *::after { text-shadow: none !important; box-shadow: none !important; } - a:not(.btn) { text-decoration: underline; } - abbr[title]::after { content: " (" attr(title) ")"; } - pre { white-space: pre-wrap !important; } - pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } - thead { display: table-header-group; } - tr, img { page-break-inside: avoid; } - p, h2, h3 { orphans: 3; widows: 3; } - h2, h3 { page-break-after: avoid; } - @page { size: a3; } body { min-width: 992px !important; } - .container { min-width: 992px !important; } - .navbar { display: none; } - .badge { border: 1px solid #000; } - .table { border-collapse: collapse !important; } .table td, .table th { background-color: #fff !important; } - .table-bordered th, .table-bordered td { border: 1px solid #ddd !important; } } + /** * @file * Styles for Bootstrap Barrio affix effect. @@ -6933,13 +6481,12 @@ summary { /* LTR */ margin: 0 1rem 0 0; /* LTR */ } - [dir="rtl"] .node .field--type-image { float: right; margin: 0 0 0 1rem; } - .node .field--type-image + .field--type-image { clear: both; } } + .field--type-image img, .field--name-field-user-picture img { margin: 0 0 1rem; } @@ -7099,11 +6646,13 @@ form .form-type-textarea { .navbar-toggleable-xs.collapse.in .navbar-nav .nav-item { margin-left: 0; float: none; } } + @media (max-width: 47.9em) { .navbar-toggleable-sm .navbar-nav .nav-item + .nav-item, .navbar-toggleable-xs.collapse.in .navbar-nav .nav-item { margin-left: 0; float: none; } } + /** * @file * Styles for the help block. @@ -7389,6 +6938,7 @@ header #search-block-form { .sidebar .block .content { font-size: 1rem; line-height: 1.5; } + .sidebar h2 { margin: 0 0 0.5rem; border-bottom: 1px solid #dee2e6; @@ -7396,12 +6946,15 @@ header #search-block-form { text-shadow: 0 1px 0 #fff; font-size: 1.25rem; line-height: 1.2; } + .sidebar tbody { border: none; } + .sidebar tr.even, .sidebar tr.odd { background: none; border-bottom: 1px solid #dee2e6; } + .sidebar nav ul.nav { margin: -1rem; } @@ -7782,11 +7335,13 @@ nav.tabs { color: #fff; background-color: #1684c4; border-color: #1684c4; } - .btn-primary a:not(:disabled):not(.disabled):active, .btn-primary a:not(:disabled):not(.disabled).active, .show > .btn-primary a.dropdown-toggle { + .btn-primary a:not(:disabled):not(.disabled):active, .btn-primary a:not(:disabled):not(.disabled).active, + .show > .btn-primary a.dropdown-toggle { color: #fff; background-color: #116596; border-color: #105d8b; } - .btn-primary a:not(:disabled):not(.disabled):active:focus, .btn-primary a:not(:disabled):not(.disabled).active:focus, .show > .btn-primary a.dropdown-toggle:focus { + .btn-primary a:not(:disabled):not(.disabled):active:focus, .btn-primary a:not(:disabled):not(.disabled).active:focus, + .show > .btn-primary a.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(22, 132, 196, 0.5); } .btn-secondary a { @@ -7803,11 +7358,13 @@ nav.tabs { color: #fff; background-color: #09527b; border-color: #09527b; } - .btn-secondary a:not(:disabled):not(.disabled):active, .btn-secondary a:not(:disabled):not(.disabled).active, .show > .btn-secondary a.dropdown-toggle { + .btn-secondary a:not(:disabled):not(.disabled):active, .btn-secondary a:not(:disabled):not(.disabled).active, + .show > .btn-secondary a.dropdown-toggle { color: #fff; background-color: #06324b; border-color: #052a40; } - .btn-secondary a:not(:disabled):not(.disabled):active:focus, .btn-secondary a:not(:disabled):not(.disabled).active:focus, .show > .btn-secondary a.dropdown-toggle:focus { + .btn-secondary a:not(:disabled):not(.disabled):active:focus, .btn-secondary a:not(:disabled):not(.disabled).active:focus, + .show > .btn-secondary a.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(9, 82, 123, 0.5); } .btn-success a { @@ -7824,11 +7381,13 @@ nav.tabs { color: #fff; background-color: #28a745; border-color: #28a745; } - .btn-success a:not(:disabled):not(.disabled):active, .btn-success a:not(:disabled):not(.disabled).active, .show > .btn-success a.dropdown-toggle { + .btn-success a:not(:disabled):not(.disabled):active, .btn-success a:not(:disabled):not(.disabled).active, + .show > .btn-success a.dropdown-toggle { color: #fff; background-color: #1e7e34; border-color: #1c7430; } - .btn-success a:not(:disabled):not(.disabled):active:focus, .btn-success a:not(:disabled):not(.disabled).active:focus, .show > .btn-success a.dropdown-toggle:focus { + .btn-success a:not(:disabled):not(.disabled):active:focus, .btn-success a:not(:disabled):not(.disabled).active:focus, + .show > .btn-success a.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); } .btn-info a { @@ -7845,11 +7404,13 @@ nav.tabs { color: #fff; background-color: #17a2b8; border-color: #17a2b8; } - .btn-info a:not(:disabled):not(.disabled):active, .btn-info a:not(:disabled):not(.disabled).active, .show > .btn-info a.dropdown-toggle { + .btn-info a:not(:disabled):not(.disabled):active, .btn-info a:not(:disabled):not(.disabled).active, + .show > .btn-info a.dropdown-toggle { color: #fff; background-color: #117a8b; border-color: #10707f; } - .btn-info a:not(:disabled):not(.disabled):active:focus, .btn-info a:not(:disabled):not(.disabled).active:focus, .show > .btn-info a.dropdown-toggle:focus { + .btn-info a:not(:disabled):not(.disabled):active:focus, .btn-info a:not(:disabled):not(.disabled).active:focus, + .show > .btn-info a.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5); } .btn-warning a { @@ -7866,11 +7427,13 @@ nav.tabs { color: #212529; background-color: #ffc107; border-color: #ffc107; } - .btn-warning a:not(:disabled):not(.disabled):active, .btn-warning a:not(:disabled):not(.disabled).active, .show > .btn-warning a.dropdown-toggle { + .btn-warning a:not(:disabled):not(.disabled):active, .btn-warning a:not(:disabled):not(.disabled).active, + .show > .btn-warning a.dropdown-toggle { color: #212529; background-color: #d39e00; border-color: #c69500; } - .btn-warning a:not(:disabled):not(.disabled):active:focus, .btn-warning a:not(:disabled):not(.disabled).active:focus, .show > .btn-warning a.dropdown-toggle:focus { + .btn-warning a:not(:disabled):not(.disabled):active:focus, .btn-warning a:not(:disabled):not(.disabled).active:focus, + .show > .btn-warning a.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); } .btn-danger a { @@ -7887,11 +7450,13 @@ nav.tabs { color: #fff; background-color: #dc3545; border-color: #dc3545; } - .btn-danger a:not(:disabled):not(.disabled):active, .btn-danger a:not(:disabled):not(.disabled).active, .show > .btn-danger a.dropdown-toggle { + .btn-danger a:not(:disabled):not(.disabled):active, .btn-danger a:not(:disabled):not(.disabled).active, + .show > .btn-danger a.dropdown-toggle { color: #fff; background-color: #bd2130; border-color: #b21f2d; } - .btn-danger a:not(:disabled):not(.disabled):active:focus, .btn-danger a:not(:disabled):not(.disabled).active:focus, .show > .btn-danger a.dropdown-toggle:focus { + .btn-danger a:not(:disabled):not(.disabled):active:focus, .btn-danger a:not(:disabled):not(.disabled).active:focus, + .show > .btn-danger a.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5); } .btn-light a { @@ -7908,11 +7473,13 @@ nav.tabs { color: #212529; background-color: #F6F6F2; border-color: #F6F6F2; } - .btn-light a:not(:disabled):not(.disabled):active, .btn-light a:not(:disabled):not(.disabled).active, .show > .btn-light a.dropdown-toggle { + .btn-light a:not(:disabled):not(.disabled):active, .btn-light a:not(:disabled):not(.disabled).active, + .show > .btn-light a.dropdown-toggle { color: #212529; background-color: #e1e1d4; border-color: #dcdccc; } - .btn-light a:not(:disabled):not(.disabled):active:focus, .btn-light a:not(:disabled):not(.disabled).active:focus, .show > .btn-light a.dropdown-toggle:focus { + .btn-light a:not(:disabled):not(.disabled):active:focus, .btn-light a:not(:disabled):not(.disabled).active:focus, + .show > .btn-light a.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(246, 246, 242, 0.5); } .btn-dark a { @@ -7929,11 +7496,13 @@ nav.tabs { color: #fff; background-color: #343a40; border-color: #343a40; } - .btn-dark a:not(:disabled):not(.disabled):active, .btn-dark a:not(:disabled):not(.disabled).active, .show > .btn-dark a.dropdown-toggle { + .btn-dark a:not(:disabled):not(.disabled):active, .btn-dark a:not(:disabled):not(.disabled).active, + .show > .btn-dark a.dropdown-toggle { color: #fff; background-color: #1d2124; border-color: #171a1d; } - .btn-dark a:not(:disabled):not(.disabled):active:focus, .btn-dark a:not(:disabled):not(.disabled).active:focus, .show > .btn-dark a.dropdown-toggle:focus { + .btn-dark a:not(:disabled):not(.disabled):active:focus, .btn-dark a:not(:disabled):not(.disabled).active:focus, + .show > .btn-dark a.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); } .btn-outline-primary a { @@ -7950,11 +7519,13 @@ nav.tabs { .btn-outline-primary a.disabled, .btn-outline-primary a:disabled { color: #1684c4; background-color: transparent; } - .btn-outline-primary a:not(:disabled):not(.disabled):active, .btn-outline-primary a:not(:disabled):not(.disabled).active, .show > .btn-outline-primary a.dropdown-toggle { + .btn-outline-primary a:not(:disabled):not(.disabled):active, .btn-outline-primary a:not(:disabled):not(.disabled).active, + .show > .btn-outline-primary a.dropdown-toggle { color: #fff; background-color: #1684c4; border-color: #1684c4; } - .btn-outline-primary a:not(:disabled):not(.disabled):active:focus, .btn-outline-primary a:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary a.dropdown-toggle:focus { + .btn-outline-primary a:not(:disabled):not(.disabled):active:focus, .btn-outline-primary a:not(:disabled):not(.disabled).active:focus, + .show > .btn-outline-primary a.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(22, 132, 196, 0.5); } .btn-outline-secondary a { @@ -7971,11 +7542,13 @@ nav.tabs { .btn-outline-secondary a.disabled, .btn-outline-secondary a:disabled { color: #09527b; background-color: transparent; } - .btn-outline-secondary a:not(:disabled):not(.disabled):active, .btn-outline-secondary a:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary a.dropdown-toggle { + .btn-outline-secondary a:not(:disabled):not(.disabled):active, .btn-outline-secondary a:not(:disabled):not(.disabled).active, + .show > .btn-outline-secondary a.dropdown-toggle { color: #fff; background-color: #09527b; border-color: #09527b; } - .btn-outline-secondary a:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary a:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-secondary a.dropdown-toggle:focus { + .btn-outline-secondary a:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary a:not(:disabled):not(.disabled).active:focus, + .show > .btn-outline-secondary a.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(9, 82, 123, 0.5); } .btn-outline-success a { @@ -7992,11 +7565,13 @@ nav.tabs { .btn-outline-success a.disabled, .btn-outline-success a:disabled { color: #28a745; background-color: transparent; } - .btn-outline-success a:not(:disabled):not(.disabled):active, .btn-outline-success a:not(:disabled):not(.disabled).active, .show > .btn-outline-success a.dropdown-toggle { + .btn-outline-success a:not(:disabled):not(.disabled):active, .btn-outline-success a:not(:disabled):not(.disabled).active, + .show > .btn-outline-success a.dropdown-toggle { color: #fff; background-color: #28a745; border-color: #28a745; } - .btn-outline-success a:not(:disabled):not(.disabled):active:focus, .btn-outline-success a:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-success a.dropdown-toggle:focus { + .btn-outline-success a:not(:disabled):not(.disabled):active:focus, .btn-outline-success a:not(:disabled):not(.disabled).active:focus, + .show > .btn-outline-success a.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); } .btn-outline-info a { @@ -8013,11 +7588,13 @@ nav.tabs { .btn-outline-info a.disabled, .btn-outline-info a:disabled { color: #17a2b8; background-color: transparent; } - .btn-outline-info a:not(:disabled):not(.disabled):active, .btn-outline-info a:not(:disabled):not(.disabled).active, .show > .btn-outline-info a.dropdown-toggle { + .btn-outline-info a:not(:disabled):not(.disabled):active, .btn-outline-info a:not(:disabled):not(.disabled).active, + .show > .btn-outline-info a.dropdown-toggle { color: #fff; background-color: #17a2b8; border-color: #17a2b8; } - .btn-outline-info a:not(:disabled):not(.disabled):active:focus, .btn-outline-info a:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-info a.dropdown-toggle:focus { + .btn-outline-info a:not(:disabled):not(.disabled):active:focus, .btn-outline-info a:not(:disabled):not(.disabled).active:focus, + .show > .btn-outline-info a.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5); } .btn-outline-warning a { @@ -8034,11 +7611,13 @@ nav.tabs { .btn-outline-warning a.disabled, .btn-outline-warning a:disabled { color: #ffc107; background-color: transparent; } - .btn-outline-warning a:not(:disabled):not(.disabled):active, .btn-outline-warning a:not(:disabled):not(.disabled).active, .show > .btn-outline-warning a.dropdown-toggle { + .btn-outline-warning a:not(:disabled):not(.disabled):active, .btn-outline-warning a:not(:disabled):not(.disabled).active, + .show > .btn-outline-warning a.dropdown-toggle { color: #212529; background-color: #ffc107; border-color: #ffc107; } - .btn-outline-warning a:not(:disabled):not(.disabled):active:focus, .btn-outline-warning a:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-warning a.dropdown-toggle:focus { + .btn-outline-warning a:not(:disabled):not(.disabled):active:focus, .btn-outline-warning a:not(:disabled):not(.disabled).active:focus, + .show > .btn-outline-warning a.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); } .btn-outline-danger a { @@ -8055,11 +7634,13 @@ nav.tabs { .btn-outline-danger a.disabled, .btn-outline-danger a:disabled { color: #dc3545; background-color: transparent; } - .btn-outline-danger a:not(:disabled):not(.disabled):active, .btn-outline-danger a:not(:disabled):not(.disabled).active, .show > .btn-outline-danger a.dropdown-toggle { + .btn-outline-danger a:not(:disabled):not(.disabled):active, .btn-outline-danger a:not(:disabled):not(.disabled).active, + .show > .btn-outline-danger a.dropdown-toggle { color: #fff; background-color: #dc3545; border-color: #dc3545; } - .btn-outline-danger a:not(:disabled):not(.disabled):active:focus, .btn-outline-danger a:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-danger a.dropdown-toggle:focus { + .btn-outline-danger a:not(:disabled):not(.disabled):active:focus, .btn-outline-danger a:not(:disabled):not(.disabled).active:focus, + .show > .btn-outline-danger a.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5); } .btn-outline-light a { @@ -8076,11 +7657,13 @@ nav.tabs { .btn-outline-light a.disabled, .btn-outline-light a:disabled { color: #F6F6F2; background-color: transparent; } - .btn-outline-light a:not(:disabled):not(.disabled):active, .btn-outline-light a:not(:disabled):not(.disabled).active, .show > .btn-outline-light a.dropdown-toggle { + .btn-outline-light a:not(:disabled):not(.disabled):active, .btn-outline-light a:not(:disabled):not(.disabled).active, + .show > .btn-outline-light a.dropdown-toggle { color: #212529; background-color: #F6F6F2; border-color: #F6F6F2; } - .btn-outline-light a:not(:disabled):not(.disabled):active:focus, .btn-outline-light a:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-light a.dropdown-toggle:focus { + .btn-outline-light a:not(:disabled):not(.disabled):active:focus, .btn-outline-light a:not(:disabled):not(.disabled).active:focus, + .show > .btn-outline-light a.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(246, 246, 242, 0.5); } .btn-outline-dark a { @@ -8097,11 +7680,13 @@ nav.tabs { .btn-outline-dark a.disabled, .btn-outline-dark a:disabled { color: #343a40; background-color: transparent; } - .btn-outline-dark a:not(:disabled):not(.disabled):active, .btn-outline-dark a:not(:disabled):not(.disabled).active, .show > .btn-outline-dark a.dropdown-toggle { + .btn-outline-dark a:not(:disabled):not(.disabled):active, .btn-outline-dark a:not(:disabled):not(.disabled).active, + .show > .btn-outline-dark a.dropdown-toggle { color: #fff; background-color: #343a40; border-color: #343a40; } - .btn-outline-dark a:not(:disabled):not(.disabled):active:focus, .btn-outline-dark a:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-dark a.dropdown-toggle:focus { + .btn-outline-dark a:not(:disabled):not(.disabled):active:focus, .btn-outline-dark a:not(:disabled):not(.disabled).active:focus, + .show > .btn-outline-dark a.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); } .hidden { @@ -8249,6 +7834,7 @@ h3, h4, h5, h6 { .contact-form .section { background-color: white; position: relative; } + .contact-form span.field--name-title { font-family: "Ubuntu", sans-serif; font-weight: 400; @@ -8259,16 +7845,19 @@ h3, h4, h5, h6 { @media (min-width: 633px) { .contact-form span.field--name-title .title { margin-left: 30%; } } + .contact-form hr.webform-horizontal-rule--solid { width: 16%; height: 1px; margin: 10px auto; } + .contact-form p { margin-bottom: 0; text-align: center; font-family: "Open Sans", sans-serif; font-size: 15px; color: #696a6b; } + .contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], @@ -8277,10 +7866,13 @@ h3, h4, h5, h6 { .node--type-conference ol.breadcrumb { margin: 0; } + .node--type-conference .node__content { margin-top: 0; } + .node--type-conference div#block-tube-theme-page-title h1.title, .node--type-conference div#block-tube-theme-page-title .field--type-string.field--name-title { display: none; } + .node--type-conference .wrapper-highlight.layout--onecol.layout-dt { background-size: cover; background-position: center; } @@ -8288,8 +7880,10 @@ h3, h4, h5, h6 { .contact-form span.select2-selection.select2-selection--multiple { border: 1px solid #CED4DA; border-bottom: 2px solid #CED4DA; } + .contact-form #edit-message { border-bottom: 2px solid #CED4DA; } + .contact-form #edit-actions-preview-next { margin-left: 3%; margin-right: 5%; @@ -8309,6 +7903,7 @@ h3, h4, h5, h6 { border: 1px solid #0D7DC1; line-height: 1.7; border-radius: 0.45rem; } + .contact-form #edit-actions-submit { margin-top: 30px; } .contact-form #edit-actions-submit.btn-primary { @@ -8326,18 +7921,22 @@ h3, h4, h5, h6 { border: 1px solid #0D7DC1; line-height: 1.7; border-radius: 0.45rem; } + .contact-form .g-recaptcha { margin-top: 6%; display: flex; justify-content: center; } + .contact-form input::-webkit-input-placeholder { font-family: "Open Sans", sans-serif; color: #696a6b !important; font-size: 14px; } + .contact-form textarea::-webkit-input-placeholder { font-family: "Open Sans", sans-serif; color: #696a6b !important; font-size: 14px; } + .contact-form .layout-content-second-contact { margin-top: 200px; text-align: center; } @@ -8400,14 +7999,17 @@ h3, h4, h5, h6 { #header .region-top-header-left a img { margin-right: 10px; margin-top: 8px; } + #header #block-searchform { margin-top: 20px; } #header #block-searchform.btn-primary { border-radius: 0.15rem; } + #header .search-header input::-webkit-input-placeholder { font-family: "Open Sans", sans-serif; color: #696a6b !important; font-size: 14px; } + #header .search-header.form-control { padding: 0.375rem 2.75rem; border-radius: 0.15rem; } @@ -8420,9 +8022,11 @@ h3, h4, h5, h6 { @media (max-width: 475px) { #header .search-header.form-control { padding: 0.375rem 0.01rem; } } + #header #block-tube-theme-main-menu li { font-family: "Open Sans", sans-serif; font-size: 1.5em; } + #header #block-tube-theme-main-menu a { color: #F6F6F2; } #header #block-tube-theme-main-menu a:hover { @@ -8432,10 +8036,13 @@ h3, h4, h5, h6 { text-align: left; font-size: 1.5em; font-weight: 400; } + .block-views-blockfeatured-articles-block-2 .views-row p { line-height: 25px; } + .block-views-blockfeatured-articles-block-2 .views-row img { width: 100%; } + .block-views-blockfeatured-articles-block-2 .views-row div.subtext { color: black; font-weight: 500; } @@ -8445,6 +8052,32 @@ h3, h4, h5, h6 { color: black; font-size: 1em; } +.recent-video-view .field--name-name a { + font-weight: 700; + font-family: 'Open sans', sans-serif; + font-size: 16px; + color: #222222; + text-align: left; + text-transform: none; } + .recent-video-view .field--name-name a:hover { + text-decoration: none; } + +.block-views h2 { + font-size: 36px; + line-height: 41px; + font-weight: 500; + font-family: 'Ubuntu', sans-serif; + color: #222222; + text-align: left; + margin-left: 48px; } + +.conf-view-row { + display: flex; + flex-wrap: wrap; } + .conf-view-row.confer-view-video { + flex: 1 0 21%; + margin: 5px; } + .callout-outer { min-width: 320px; max-width: 480px; @@ -8522,9 +8155,11 @@ h3, h4, h5, h6 { .layout__region--first .node-featured-teaser p, .layout__region--second .node-featured-teaser p, .layout__region--third .node-featured-teaser p { color: #000000; font-size: 1.25em; } + .layout__region--first .node-featured-teaser .featured-author, .layout__region--second .node-featured-teaser .featured-author, .layout__region--third .node-featured-teaser .featured-author { color: #222222; font-size: 1.125em; } + .layout__region--first .node-featured-teaser .field__item, .layout__region--second .node-featured-teaser .field__item, .layout__region--third .node-featured-teaser .field__item { float: none; } .layout__region--first .node-featured-teaser .field__item img, .layout__region--second .node-featured-teaser .field__item img, .layout__region--third .node-featured-teaser .field__item img { @@ -8533,15 +8168,20 @@ h3, h4, h5, h6 { margin-right: auto; max-width: 100%; height: auto; } + .layout__region--first .node-featured-teaser .field--type-datetime, .layout__region--second .node-featured-teaser .field--type-datetime, .layout__region--third .node-featured-teaser .field--type-datetime { font-weight: bold; } + .layout__region--first .node-featured-teaser .featured-title, .layout__region--second .node-featured-teaser .featured-title, .layout__region--third .node-featured-teaser .featured-title { position: unset; text-align: center; } + .layout__region--first .node-featured-teaser .views-row, .layout__region--second .node-featured-teaser .views-row, .layout__region--third .node-featured-teaser .views-row { margin-right: 0; } + .layout__region--first .node-featured-teaser .node .field--type-image, .layout__region--second .node-featured-teaser .node .field--type-image, .layout__region--third .node-featured-teaser .node .field--type-image { margin: 0; } + .layout__region--first h2.featured-title, .layout__region--second h2.featured-title, .layout__region--third h2.featured-title { font-size: 2.25em; color: #222222; } @@ -8621,20 +8261,28 @@ h3, h4, h5, h6 { position: absolute; top: -25px; left: -25px; } + .layout-dt.lb-bg-primary { background-color: #fff; } + .layout-dt.lb-bg-secondary { background-color: #F6F6F2; } + .layout-dt.lb-bg-featured { background-color: #E0E0E0; } + .layout-dt.space-top { padding-top: 53px; } + .layout-dt.space-bottom { padding-bottom: 53px; } + .layout-dt.space-between .layout__region--first { padding-right: 26px; } + .layout-dt.space-between .layout__region--second { padding-left: 26px; } + .layout-dt.space-beside { padding-left: 6px; padding-right: 6px; } @@ -8650,8 +8298,10 @@ h3, h4, h5, h6 { .layout-dt.space-beside { padding-left: 53px; padding-right: 53px; } } + .layout-dt.wrapper-highlight { text-align: center; } + .layout-dt.layout-childreset .layout__region > .highlighted { display: inline-block; text-align: center; @@ -8660,6 +8310,7 @@ h3, h4, h5, h6 { font-size: 1.3em; padding: 20px; border-radius: 20px; } + .layout-dt.layout-childreset .layout__region > * { padding: 0; margin: 0 auto; } @@ -8676,27 +8327,35 @@ h3, h4, h5, h6 { @media screen and (max-width: 1040px) { .node--type-curated-playlist .block-field-blocknodecurated-playlistfield-curated-videos .field--name-field-curated-videos > .field__items > .field__item .layout--twocol .layout__region { flex: 100%; } } + .node--type-curated-playlist .field--name-field-curated-by { font-size: 2em; border-bottom: 2px solid rgba(0, 0, 0, 0.5); margin-bottom: 15px; } + .node--type-curated-playlist .block-field-blocknodecurated-playlistbody .field__label { font-size: 1.2em; font-weight: bold; } + .node--type-curated-playlist .block-field-blocknodecurated-playlistfield-curated-videos .field__label { display: none; } + @media screen and (max-width: 520px) { .node--type-curated-playlist .block-field-blockmediaexternal-videothumbnail img { width: 100%; height: auto; } } + .node--type-curated-playlist .block-field-blockmediaexternal-videoname h2 { margin-bottom: 0; } + .node--type-curated-playlist .block-field-blockmediaexternal-videofield-speaker .field__items { font-size: 1.4em; font-style: italic; margin-bottom: 10px; } + .node--type-curated-playlist .block-field-blockmediaexternal-videofield-description .field__item { margin-bottom: 15px; } + .node--type-curated-playlist .block-field-blockmediaexternal-videofield-conference .field__item a { color: #ffffff; text-decoration: none; @@ -8705,6 +8364,7 @@ h3, h4, h5, h6 { padding: 5px 15px; border-radius: 2px; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); } + .node--type-curated-playlist .block-field-blockmediaexternal-videofield-video-category .field--name-field-video-category { display: flex; } .node--type-curated-playlist .block-field-blockmediaexternal-videofield-video-category .field--name-field-video-category .field__item a { @@ -8754,5 +8414,3 @@ a { .slick > div { margin: 0 15px; } - -/*# sourceMappingURL=style.css.map */ diff --git a/web/themes/custom/tube_theme/scss/misc.scss b/web/themes/custom/tube_theme/scss/misc.scss index 32ff2859..f8c7299c 100644 --- a/web/themes/custom/tube_theme/scss/misc.scss +++ b/web/themes/custom/tube_theme/scss/misc.scss @@ -474,4 +474,36 @@ h3, h4, h5, h6 { } +// Conference Videos from Conference Landing Page +.recent-video-view { + .field--name-name { + a { + @include open-sans-font(700); + font-size: 16px; + color: $black; + text-align: left; + text-transform: none; + &:hover { + text-decoration: none; + } + } + } +} +.block-views { + h2 { + @include font-size(36px, 41px); + @include heading-font(500); + color: $black; + text-align: left; + margin-left: 48px; + } +} +.conf-view-row { + display: flex; + flex-wrap: wrap; + &.confer-view-video { + flex: 1 0 21%; + margin: 5px; + } +} From 73f0337e7158ef2810195e73e91da56b02b8f2d0 Mon Sep 17 00:00:00 2001 From: Ganaa Ravdan Date: Tue, 1 Jan 2019 16:41:34 +0000 Subject: [PATCH 03/12] 1518: Added media query to conference video section to make it responsive --- web/themes/custom/tube_theme/css/style.css | 78 +++++++++++---- web/themes/custom/tube_theme/scss/misc.scss | 105 ++++++++++++++++---- 2 files changed, 145 insertions(+), 38 deletions(-) diff --git a/web/themes/custom/tube_theme/css/style.css b/web/themes/custom/tube_theme/css/style.css index 3c50b8ab..d2620365 100644 --- a/web/themes/custom/tube_theme/css/style.css +++ b/web/themes/custom/tube_theme/css/style.css @@ -8052,31 +8052,75 @@ h3, h4, h5, h6 { color: black; font-size: 1em; } -.recent-video-view .field--name-name a { - font-weight: 700; +.recent-video-view .field--name-name h2 a { + font-weight: 600; font-family: 'Open sans', sans-serif; font-size: 16px; color: #222222; text-align: left; - text-transform: none; } - .recent-video-view .field--name-name a:hover { + text-transform: none; + margin-right: 12px; } + .recent-video-view .field--name-name h2 a:hover { text-decoration: none; } -.block-views h2 { +.recent h2 { font-size: 36px; - line-height: 41px; - font-weight: 500; - font-family: 'Ubuntu', sans-serif; - color: #222222; - text-align: left; - margin-left: 48px; } + font-weight: 500; } -.conf-view-row { - display: flex; - flex-wrap: wrap; } - .conf-view-row.confer-view-video { - flex: 1 0 21%; - margin: 5px; } +@media (max-width: 1281px) { + .views-col.col-3 { + width: 48.4%; } + .views-col.col-3:nth-of-type(3n+1) { + margin-left: 0%; + clear: none; } + .views-col.col-3:nth-of-type(2n+1) { + margin-left: 18%; + margin-right: 20%; + clear: left; } } + +@media (max-width: 1010px) { + .views-col.col-3 { + width: 48.4%; } + .views-col.col-3:nth-of-type(3n+1) { + margin-left: 0%; + clear: none; } + .views-col.col-3:nth-of-type(2n+1) { + margin-left: 10%; + margin-right: 20%; + clear: left; } } + +@media (max-width: 850px) { + .views-col.col-3 { + width: 48.4%; } + .views-col.col-3:nth-of-type(3n+1) { + margin-left: 0%; + clear: none; } + .views-col.col-3:nth-of-type(2n+1) { + margin-left: 10%; + margin-right: 20%; + clear: left; } } + +@media (max-width: 740px) { + .views-col.col-3 { + width: 100%; } + .views-col.col-3:nth-of-type(3n+1) { + margin-left: 0%; + clear: none; } + .views-col.col-3:nth-of-type(n+1) { + margin-left: 28.5%; + margin-right: 20%; + clear: left; } } + +@media (max-width: 600px) { + .views-col.col-3 { + width: 100%; } + .views-col.col-3:nth-of-type(3n+1) { + margin-left: 0%; + clear: none; } + .views-col.col-3:nth-of-type(n+1) { + margin-left: 10%; + margin-right: 20%; + clear: left; } } .callout-outer { min-width: 320px; diff --git a/web/themes/custom/tube_theme/scss/misc.scss b/web/themes/custom/tube_theme/scss/misc.scss index f8c7299c..a80cce21 100644 --- a/web/themes/custom/tube_theme/scss/misc.scss +++ b/web/themes/custom/tube_theme/scss/misc.scss @@ -478,32 +478,95 @@ h3, h4, h5, h6 { .recent-video-view { .field--name-name { - a { - @include open-sans-font(700); - font-size: 16px; - color: $black; - text-align: left; - text-transform: none; - &:hover { - text-decoration: none; + h2 { + a { + @include open-sans-font(600); + font-size: 16px; + color: $black; + text-align: left; + text-transform: none; + margin-right: 12px; + &:hover { + text-decoration: none; + } } } } -} -.block-views { + } + +.recent { h2 { - @include font-size(36px, 41px); - @include heading-font(500); - color: $black; - text-align: left; - margin-left: 48px; + font-size: 36px; + font-weight: 500; } } -.conf-view-row { - display: flex; - flex-wrap: wrap; - &.confer-view-video { - flex: 1 0 21%; - margin: 5px; +@media(max-width: 1281px) { + .views-col.col-3 { + width: 48.4%; + } + .views-col.col-3:nth-of-type(3n+1) { + margin-left: 0%; + clear: none; + } + .views-col.col-3:nth-of-type(2n+1) { + margin-left: 18%; + margin-right: 20%; + clear: left; + } +} +@media(max-width: 1010px) { + .views-col.col-3 { + width: 48.4%; + } + .views-col.col-3:nth-of-type(3n+1) { + margin-left: 0%; + clear: none; + } + .views-col.col-3:nth-of-type(2n+1) { + margin-left: 10%; + margin-right: 20%; + clear: left; + } +} +@media(max-width: 850px) { + .views-col.col-3 { + width: 48.4%; + } + .views-col.col-3:nth-of-type(3n+1) { + margin-left: 0%; + clear: none; + } + .views-col.col-3:nth-of-type(2n+1) { + margin-left: 10%; + margin-right: 20%; + clear: left; + } +} +@media(max-width: 740px) { + .views-col.col-3 { + width: 100%; + } + .views-col.col-3:nth-of-type(3n+1) { + margin-left: 0%; + clear: none; + } + .views-col.col-3:nth-of-type(n+1) { + margin-left: 28.5%; + margin-right: 20%; + clear: left; + } +} +@media(max-width: 600px) { + .views-col.col-3 { + width: 100%; + } + .views-col.col-3:nth-of-type(3n+1) { + margin-left: 0%; + clear: none; + } + .views-col.col-3:nth-of-type(n+1) { + margin-left: 10%; + margin-right: 20%; + clear: left; } } From 4a8cb6de3cc12b174fe1027cf9f804c3e51f2f60 Mon Sep 17 00:00:00 2001 From: Ganaa Ravdan Date: Tue, 1 Jan 2019 16:43:51 +0000 Subject: [PATCH 04/12] Installed responsive grid module, but I still had to add media query to make it responsive --- composer.json | 1 + 1 file changed, 1 insertion(+) diff --git a/composer.json b/composer.json index 2a8d5a4e..82e089ec 100644 --- a/composer.json +++ b/composer.json @@ -29,6 +29,7 @@ "drupal/fontawesome": "^2.9", "drupal/pathauto": "^1.0", "drupal/recaptcha": "^2.3", + "drupal/responsive_views_grid": "^1.1", "drupal/search_api": "^1.11", "drupal/search_api_autocomplete": "^1.1", "drupal/video_embed_field": "^2.0", From 1248ad376981ba1285cf483d970f90b7394f0a84 Mon Sep 17 00:00:00 2001 From: Ganaa Ravdan Date: Tue, 1 Jan 2019 16:44:20 +0000 Subject: [PATCH 05/12] 1518 Updated composer.lock --- composer.lock | 58 +++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 52 insertions(+), 6 deletions(-) diff --git a/composer.lock b/composer.lock index d19c3655..9ffe7e97 100644 --- a/composer.lock +++ b/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "864e6a96af50ac2e0776a8a86345705b", + "content-hash": "8249b47295dc4a53d74dc6573cbc2851", "packages": [ { "name": "alchemy/zippy", @@ -2927,6 +2927,57 @@ "issues": "https://www.drupal.org/project/issues/recaptcha" } }, + { + "name": "drupal/responsive_views_grid", + "version": "1.1.0", + "source": { + "type": "git", + "url": "https://git.drupal.org/project/responsive_views_grid", + "reference": "8.x-1.1" + }, + "dist": { + "type": "zip", + "url": "https://ftp.drupal.org/files/projects/responsive_views_grid-8.x-1.1.zip", + "reference": "8.x-1.1", + "shasum": "dfa63dc73d3c703a910bc1210255453a37d9c2ec" + }, + "require": { + "drupal/core": "*" + }, + "type": "drupal-module", + "extra": { + "branch-alias": { + "dev-1.x": "1.x-dev" + }, + "drupal": { + "version": "8.x-1.1", + "datestamp": "1538999580", + "security-coverage": { + "status": "covered", + "message": "Covered by Drupal's security advisory policy" + } + } + }, + "notification-url": "https://packages.drupal.org/8/downloads", + "license": [ + "GPL-2.0+" + ], + "authors": [ + { + "name": "imalabya", + "homepage": "https://www.drupal.org/user/2641255" + } + ], + "description": "A view style plugin for responsive grids.", + "homepage": "https://www.drupal.org/project/responsive_views_grid", + "keywords": [ + "Drupal" + ], + "support": { + "source": "http://cgit.drupalcode.org/responsive_views_grid", + "issues": "https://www.drupal.org/project/issues/responsive_views_grid" + } + }, { "name": "drupal/search_api", "version": "1.11.0", @@ -9050,11 +9101,6 @@ { "name": "webflo/drupal-core-require-dev", "version": "8.6.2", - "source": { - "type": "git", - "url": "https://github.com/webflo/drupal-core-require-dev.git", - "reference": "3fa727e875f73906f7e9325619b540f7012876ee" - }, "require": { "behat/mink": "1.7.x-dev", "behat/mink-goutte-driver": "^1.2", From 84896356e6f9ac6b212d38301cc5d214fda2432f Mon Sep 17 00:00:00 2001 From: Ganaa Ravdan Date: Tue, 1 Jan 2019 16:45:46 +0000 Subject: [PATCH 06/12] 1518 Added new template file --- ...k--recently-added-videos-block-5.html.twig | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 web/themes/custom/tube_theme/templates/block--views-block--recently-added-videos-block-5.html.twig diff --git a/web/themes/custom/tube_theme/templates/block--views-block--recently-added-videos-block-5.html.twig b/web/themes/custom/tube_theme/templates/block--views-block--recently-added-videos-block-5.html.twig new file mode 100644 index 00000000..d8804752 --- /dev/null +++ b/web/themes/custom/tube_theme/templates/block--views-block--recently-added-videos-block-5.html.twig @@ -0,0 +1,39 @@ +{# +/** + * @file + * Default theme implementation to display a block. + * + * Available variables: + * - plugin_id: The ID of the block implementation. + * - label: The configured label of the block if visible. + * - configuration: A list of the block's configuration values. + * - label: The configured label for the block. + * - label_display: The display settings for the label. + * - provider: The module or other provider that provided this block plugin. + * - Block plugin specific settings will also be stored here. + * - content: The content of this block. + * - attributes: array of HTML attributes populated by modules, intended to + * be added to the main container tag of this template. + * - id: A valid HTML ID and guaranteed unique. + * - title_attributes: Same as attributes, except applied to the main title + * tag that appears in the template. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the main title tag that appears in the template. + * + * @see template_preprocess_block() + * + * @ingroup themeable + */ +#} + + {{ title_prefix }} + {% if label %} + {{ label }} + {% endif %} + {{ title_suffix }} + {% block content %} + {{ content }} + {% endblock %} + From e647a0711706b6bdd84d3df4a00d0087c28450a4 Mon Sep 17 00:00:00 2001 From: Ganaa Ravdan Date: Tue, 1 Jan 2019 19:06:20 +0000 Subject: [PATCH 07/12] 1518 Styled conference video title and subtitle --- web/themes/custom/tube_theme/css/style.css | 46 ++++++++++++----- web/themes/custom/tube_theme/scss/misc.scss | 55 ++++++++++++++------- 2 files changed, 69 insertions(+), 32 deletions(-) diff --git a/web/themes/custom/tube_theme/css/style.css b/web/themes/custom/tube_theme/css/style.css index d2620365..31793128 100644 --- a/web/themes/custom/tube_theme/css/style.css +++ b/web/themes/custom/tube_theme/css/style.css @@ -8052,20 +8052,40 @@ h3, h4, h5, h6 { color: black; font-size: 1em; } -.recent-video-view .field--name-name h2 a { - font-weight: 600; - font-family: 'Open sans', sans-serif; - font-size: 16px; - color: #222222; - text-align: left; - text-transform: none; - margin-right: 12px; } - .recent-video-view .field--name-name h2 a:hover { - text-decoration: none; } - -.recent h2 { +.conf_video-title { + font-family: "Ubuntu", sans-serif; + font-weight: 500; + text-transform: uppercase; font-size: 36px; - font-weight: 500; } + line-height: 42px; + margin-left: 15px; + margin-bottom: 28px; } + @media (max-width: 1270px) { + .conf_video-title .conf_video-title { + margin-left: 225px; } } + +.views-col.col-3.col-6.col-12 { + display: inline-block; } + .views-col.col-3.col-6.col-12 h2 { + font-size: 0; } + .views-col.col-3.col-6.col-12 h2 a { + font-weight: 600; + font-family: 'Open sans', sans-serif; + font-size: 16px; + width: 100%; + color: #222222; + text-align: left; + text-transform: none; + line-height: 25px; } + .views-col.col-3.col-6.col-12 h2 a:hover { + text-decoration: none; } + @media (max-width: 1033px) { + .views-col.col-3.col-6.col-12 h2 a h2 a { + text-align: left; + margin: 0 auto; } } + +.views-col.col-3 { + margin-bottom: 40px; } @media (max-width: 1281px) { .views-col.col-3 { diff --git a/web/themes/custom/tube_theme/scss/misc.scss b/web/themes/custom/tube_theme/scss/misc.scss index a80cce21..d642aab8 100644 --- a/web/themes/custom/tube_theme/scss/misc.scss +++ b/web/themes/custom/tube_theme/scss/misc.scss @@ -475,31 +475,48 @@ h3, h4, h5, h6 { } // Conference Videos from Conference Landing Page - -.recent-video-view { - .field--name-name { - h2 { - a { - @include open-sans-font(600); - font-size: 16px; - color: $black; - text-align: left; - text-transform: none; - margin-right: 12px; - &:hover { - text-decoration: none; - } +.conf_video-title { + font-family: $font-ubuntu; + font-weight: 500; + text-transform: uppercase; + @include font-size(36px, 42px); + margin-left: 15px; + margin-bottom: 28px; + @media(max-width: 1270px) { + .conf_video-title { + margin-left: 225px; } } } - } - -.recent { +.views-col.col-3.col-6.col-12 { + display: inline-block; h2 { - font-size: 36px; - font-weight: 500; + font-size: 0; + a { + @include open-sans-font(600); + font-size: 16px; + width: 100%; + color: $black; + text-align: left; + text-transform: none; + line-height: 25px; + &:hover { + text-decoration: none; + } + @media(max-width: 1033px) { + h2 { + a { + text-align: left; + margin: 0 auto; + } + } + } + } } } +.views-col.col-3 { + margin-bottom: 40px; +} @media(max-width: 1281px) { .views-col.col-3 { width: 48.4%; From b0a45cae868821d3610fad4ec4d8d95911356af0 Mon Sep 17 00:00:00 2001 From: Ganaa Ravdan Date: Wed, 2 Jan 2019 14:02:14 +0000 Subject: [PATCH 08/12] 1518: Added media query to conference title --- web/themes/custom/tube_theme/css/style.css | 59 +++++++++++---------- web/themes/custom/tube_theme/scss/misc.scss | 47 ++++++++-------- 2 files changed, 56 insertions(+), 50 deletions(-) diff --git a/web/themes/custom/tube_theme/css/style.css b/web/themes/custom/tube_theme/css/style.css index 31793128..47b1b103 100644 --- a/web/themes/custom/tube_theme/css/style.css +++ b/web/themes/custom/tube_theme/css/style.css @@ -8058,31 +8058,22 @@ h3, h4, h5, h6 { text-transform: uppercase; font-size: 36px; line-height: 42px; - margin-left: 15px; + margin-left: 13px; margin-bottom: 28px; } - @media (max-width: 1270px) { - .conf_video-title .conf_video-title { - margin-left: 225px; } } -.views-col.col-3.col-6.col-12 { - display: inline-block; } - .views-col.col-3.col-6.col-12 h2 { - font-size: 0; } - .views-col.col-3.col-6.col-12 h2 a { - font-weight: 600; - font-family: 'Open sans', sans-serif; - font-size: 16px; - width: 100%; - color: #222222; - text-align: left; - text-transform: none; - line-height: 25px; } - .views-col.col-3.col-6.col-12 h2 a:hover { - text-decoration: none; } - @media (max-width: 1033px) { - .views-col.col-3.col-6.col-12 h2 a h2 a { - text-align: left; - margin: 0 auto; } } +.views-col.col-3 h2 { + font-size: 0; } + .views-col.col-3 h2 a { + font-weight: 600; + font-family: 'Open sans', sans-serif; + font-size: 16px; + width: 100%; + color: #222222; + text-align: left; + text-transform: none; + line-height: 25px; } + .views-col.col-3 h2 a:hover { + text-decoration: none; } .views-col.col-3 { margin-bottom: 40px; } @@ -8096,7 +8087,9 @@ h3, h4, h5, h6 { .views-col.col-3:nth-of-type(2n+1) { margin-left: 18%; margin-right: 20%; - clear: left; } } + clear: left; } + .conf_video-title { + margin-left: 200px; } } @media (max-width: 1010px) { .views-col.col-3 { @@ -8107,7 +8100,9 @@ h3, h4, h5, h6 { .views-col.col-3:nth-of-type(2n+1) { margin-left: 10%; margin-right: 20%; - clear: left; } } + clear: left; } + .conf_video-title { + margin-left: 108px; } } @media (max-width: 850px) { .views-col.col-3 { @@ -8118,7 +8113,9 @@ h3, h4, h5, h6 { .views-col.col-3:nth-of-type(2n+1) { margin-left: 10%; margin-right: 20%; - clear: left; } } + clear: left; } + .conf_video-title { + margin-left: 90px; } } @media (max-width: 740px) { .views-col.col-3 { @@ -8129,7 +8126,10 @@ h3, h4, h5, h6 { .views-col.col-3:nth-of-type(n+1) { margin-left: 28.5%; margin-right: 20%; - clear: left; } } + clear: left; } + .conf_video-title { + margin-left: 180px; + font-size: 30px; } } @media (max-width: 600px) { .views-col.col-3 { @@ -8140,7 +8140,10 @@ h3, h4, h5, h6 { .views-col.col-3:nth-of-type(n+1) { margin-left: 10%; margin-right: 20%; - clear: left; } } + clear: left; } + .conf_video-title { + margin-left: 48px; + font-size: 26px; } } .callout-outer { min-width: 320px; diff --git a/web/themes/custom/tube_theme/scss/misc.scss b/web/themes/custom/tube_theme/scss/misc.scss index d642aab8..a0b650b0 100644 --- a/web/themes/custom/tube_theme/scss/misc.scss +++ b/web/themes/custom/tube_theme/scss/misc.scss @@ -476,20 +476,14 @@ h3, h4, h5, h6 { // Conference Videos from Conference Landing Page .conf_video-title { - font-family: $font-ubuntu; - font-weight: 500; - text-transform: uppercase; - @include font-size(36px, 42px); - margin-left: 15px; - margin-bottom: 28px; - @media(max-width: 1270px) { - .conf_video-title { - margin-left: 225px; - } - } - } -.views-col.col-3.col-6.col-12 { - display: inline-block; + font-family: $font-ubuntu; + font-weight: 500; + text-transform: uppercase; + @include font-size(36px, 42px); + margin-left: 13px; + margin-bottom: 28px; +} +.views-col.col-3 { h2 { font-size: 0; a { @@ -503,14 +497,6 @@ h3, h4, h5, h6 { &:hover { text-decoration: none; } - @media(max-width: 1033px) { - h2 { - a { - text-align: left; - margin: 0 auto; - } - } - } } } } @@ -530,6 +516,9 @@ h3, h4, h5, h6 { margin-right: 20%; clear: left; } + .conf_video-title { + margin-left: 200px; + } } @media(max-width: 1010px) { .views-col.col-3 { @@ -544,6 +533,9 @@ h3, h4, h5, h6 { margin-right: 20%; clear: left; } + .conf_video-title { + margin-left: 108px; + } } @media(max-width: 850px) { .views-col.col-3 { @@ -558,6 +550,9 @@ h3, h4, h5, h6 { margin-right: 20%; clear: left; } + .conf_video-title { + margin-left: 90px; + } } @media(max-width: 740px) { .views-col.col-3 { @@ -572,6 +567,10 @@ h3, h4, h5, h6 { margin-right: 20%; clear: left; } + .conf_video-title { + margin-left: 180px; + font-size: 30px; + } } @media(max-width: 600px) { .views-col.col-3 { @@ -586,4 +585,8 @@ h3, h4, h5, h6 { margin-right: 20%; clear: left; } + .conf_video-title { + margin-left: 48px; + font-size: 26px; + } } From 42e66c3d1c7794399eccea6d7bdc21c24ed8ce50 Mon Sep 17 00:00:00 2001 From: Ganaa Ravdan Date: Wed, 2 Jan 2019 14:03:19 +0000 Subject: [PATCH 09/12] 1518: Added class to h2 element --- .../block--views-block--recently-added-videos-block-5.html.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/themes/custom/tube_theme/templates/block--views-block--recently-added-videos-block-5.html.twig b/web/themes/custom/tube_theme/templates/block--views-block--recently-added-videos-block-5.html.twig index d8804752..4da67820 100644 --- a/web/themes/custom/tube_theme/templates/block--views-block--recently-added-videos-block-5.html.twig +++ b/web/themes/custom/tube_theme/templates/block--views-block--recently-added-videos-block-5.html.twig @@ -30,7 +30,7 @@ {{ title_prefix }} {% if label %} - {{ label }} + {{ label }} {% endif %} {{ title_suffix }} {% block content %} From 853557982fd72ca0ad4e8cbcae3e9afd817adecb Mon Sep 17 00:00:00 2001 From: Ganaa Ravdan Date: Wed, 2 Jan 2019 14:10:37 +0000 Subject: [PATCH 10/12] 1518: Created new view for conference video section --- config/sync/core.extension.yml | 1 + .../sync/views.view.recently_added_videos.yml | 21 +++++++++++++++++++ 2 files changed, 22 insertions(+) diff --git a/config/sync/core.extension.yml b/config/sync/core.extension.yml index 2406f121..f4f36d50 100644 --- a/config/sync/core.extension.yml +++ b/config/sync/core.extension.yml @@ -43,6 +43,7 @@ module: quickedit: 0 rdf: 0 recaptcha: 0 + responsive_views_grid: 0 search: 0 search_api: 0 search_api_autocomplete: 0 diff --git a/config/sync/views.view.recently_added_videos.yml b/config/sync/views.view.recently_added_videos.yml index 874a16bc..f8ef0132 100644 --- a/config/sync/views.view.recently_added_videos.yml +++ b/config/sync/views.view.recently_added_videos.yml @@ -17,6 +17,7 @@ dependencies: - image - media - node + - responsive_views_grid - taxonomy - user id: recently_added_videos @@ -1274,6 +1275,8 @@ display: arguments: false pager: false sorts: false + style: false + row: false relationships: field_conference: id: field_conference @@ -1338,6 +1341,24 @@ display: label: '' granularity: second plugin_id: datetime + style: + type: responsive_grid + options: + uses_fields: false + columns: '4' + automatic_width: 1 + alignment: horizontal + col_class_default: 0 + col_class_custom: 'views-col col-3, col-6, col-12' + row_class_default: 1 + row_class_custom: '' + row: + type: 'entity:media' + options: + relationship: none + view_mode: teaser + allow: + items_per_page: true cache_metadata: max-age: -1 contexts: From 6847b3bb9d119a9fd19c15e21edf0385b99a2f67 Mon Sep 17 00:00:00 2001 From: Ganaa Ravdan Date: Thu, 3 Jan 2019 23:10:37 +0000 Subject: [PATCH 11/12] 1518 Styled conference video section using flexbox and made a responsive --- web/themes/custom/tube_theme/css/style.css | 141 ++++++++++---------- web/themes/custom/tube_theme/scss/misc.scss | 137 +++++++++---------- 2 files changed, 132 insertions(+), 146 deletions(-) diff --git a/web/themes/custom/tube_theme/css/style.css b/web/themes/custom/tube_theme/css/style.css index 47b1b103..b422170e 100644 --- a/web/themes/custom/tube_theme/css/style.css +++ b/web/themes/custom/tube_theme/css/style.css @@ -8058,91 +8058,84 @@ h3, h4, h5, h6 { text-transform: uppercase; font-size: 36px; line-height: 42px; - margin-left: 13px; margin-bottom: 28px; } + @media (max-width: 1281px) { + .conf_video-title .conf_video-title { + margin-left: 213px; } } -.views-col.col-3 h2 { - font-size: 0; } - .views-col.col-3 h2 a { - font-weight: 600; - font-family: 'Open sans', sans-serif; - font-size: 16px; - width: 100%; - color: #222222; - text-align: left; - text-transform: none; - line-height: 25px; } - .views-col.col-3 h2 a:hover { - text-decoration: none; } +.field--name-name { + width: 310px; + display: inline-block; } + .field--name-name h2 { + font-size: 0; } + .field--name-name h2 a { + font-weight: 600; + font-family: 'Open sans', sans-serif; + font-size: 16px; + width: 100%; + color: #222222; + text-align: left; + text-transform: none; + line-height: 25px; } + @media (max-width: 1281px) { + .field--name-name h2 a a { + display: inline-block; } } + .field--name-name h2 a:hover { + text-decoration: none; } -.views-col.col-3 { - margin-bottom: 40px; } +.view-content { + overflow: hidden; + display: flex; + flex-wrap: wrap; } + .view-content .views-row { + margin-bottom: 40px; + float: left; + width: 25%; + flex: 1 0 25%; } @media (max-width: 1281px) { - .views-col.col-3 { - width: 48.4%; } - .views-col.col-3:nth-of-type(3n+1) { - margin-left: 0%; - clear: none; } - .views-col.col-3:nth-of-type(2n+1) { - margin-left: 18%; - margin-right: 20%; - clear: left; } + .view-content { + margin-left: 200px; } + .view-content .views-row { + max-width: calc(50% - 10px); + flex: 1 0 50%; } .conf_video-title { - margin-left: 200px; } } - -@media (max-width: 1010px) { - .views-col.col-3 { - width: 48.4%; } - .views-col.col-3:nth-of-type(3n+1) { - margin-left: 0%; - clear: none; } - .views-col.col-3:nth-of-type(2n+1) { - margin-left: 10%; - margin-right: 20%; - clear: left; } + margin-left: 213px; } } + +@media (max-width: 1060px) { + .view-content { + margin-left: 160px; } + .view-content .views-row { + max-width: calc(50% - 10px); + flex: 1 0 50%; } .conf_video-title { - margin-left: 108px; } } - -@media (max-width: 850px) { - .views-col.col-3 { - width: 48.4%; } - .views-col.col-3:nth-of-type(3n+1) { - margin-left: 0%; - clear: none; } - .views-col.col-3:nth-of-type(2n+1) { - margin-left: 10%; - margin-right: 20%; - clear: left; } + margin-left: 170px; } } + +@media (max-width: 904px) { + .view-content { + margin-left: 82px; } + .view-content .views-row { + max-width: calc(50% - 10px); + flex: 1 0 50%; } .conf_video-title { - margin-left: 90px; } } - -@media (max-width: 740px) { - .views-col.col-3 { - width: 100%; } - .views-col.col-3:nth-of-type(3n+1) { - margin-left: 0%; - clear: none; } - .views-col.col-3:nth-of-type(n+1) { - margin-left: 28.5%; - margin-right: 20%; - clear: left; } + margin-left: 93px; } } + +@media (max-width: 808px) { + .view-content { + margin-left: 25px; } + .view-content .views-row { + max-width: calc(50% - 0px); + flex: 1 0 50%; } .conf_video-title { - margin-left: 180px; - font-size: 30px; } } + margin-left: 48px; } } -@media (max-width: 600px) { - .views-col.col-3 { - width: 100%; } - .views-col.col-3:nth-of-type(3n+1) { - margin-left: 0%; - clear: none; } - .views-col.col-3:nth-of-type(n+1) { - margin-left: 10%; - margin-right: 20%; - clear: left; } +@media (max-width: 713px) { + .view-content .views-row { + width: 100%; + flex: 1 0 100%; + margin-right: 20%; } .conf_video-title { - margin-left: 48px; + margin-left: 50px; font-size: 26px; } } .callout-outer { diff --git a/web/themes/custom/tube_theme/scss/misc.scss b/web/themes/custom/tube_theme/scss/misc.scss index a0b650b0..cf2b46fc 100644 --- a/web/themes/custom/tube_theme/scss/misc.scss +++ b/web/themes/custom/tube_theme/scss/misc.scss @@ -480,10 +480,16 @@ h3, h4, h5, h6 { font-weight: 500; text-transform: uppercase; @include font-size(36px, 42px); - margin-left: 13px; margin-bottom: 28px; + @media(max-width: 1281px) { + .conf_video-title { + margin-left: 213px; //I am not sure why this media query is not picking up. Is this the right way, right? + } + } } -.views-col.col-3 { +.field--name-name { + width: 310px; + display:inline-block; h2 { font-size: 0; a { @@ -494,99 +500,86 @@ h3, h4, h5, h6 { text-align: left; text-transform: none; line-height: 25px; + @media(max-width: 1281px) { + a { + display: inline-block; + } + } &:hover { text-decoration: none; } } } } -.views-col.col-3 { - margin-bottom: 40px; +.view-content { + overflow: hidden; + display: flex; + flex-wrap: wrap; + .views-row { + margin-bottom: 40px; + float: left; + width: 25%; + flex: 1 0 25%; + } } @media(max-width: 1281px) { - .views-col.col-3 { - width: 48.4%; - } - .views-col.col-3:nth-of-type(3n+1) { - margin-left: 0%; - clear: none; - } - .views-col.col-3:nth-of-type(2n+1) { - margin-left: 18%; - margin-right: 20%; - clear: left; - } - .conf_video-title { + .view-content { margin-left: 200px; - } -} -@media(max-width: 1010px) { - .views-col.col-3 { - width: 48.4%; - } - .views-col.col-3:nth-of-type(3n+1) { - margin-left: 0%; - clear: none; - } - .views-col.col-3:nth-of-type(2n+1) { - margin-left: 10%; - margin-right: 20%; - clear: left; + .views-row { + max-width: calc(50% - 10px); + flex: 1 0 50%; + } } .conf_video-title { - margin-left: 108px; + margin-left: 213px; } } -@media(max-width: 850px) { - .views-col.col-3 { - width: 48.4%; - } - .views-col.col-3:nth-of-type(3n+1) { - margin-left: 0%; - clear: none; - } - .views-col.col-3:nth-of-type(2n+1) { - margin-left: 10%; - margin-right: 20%; - clear: left; +@media(max-width: 1060px) { + .view-content { + margin-left: 160px; + .views-row { + max-width: calc(50% - 10px); + flex: 1 0 50%; + } } .conf_video-title { - margin-left: 90px; + margin-left: 170px; } } -@media(max-width: 740px) { - .views-col.col-3 { - width: 100%; - } - .views-col.col-3:nth-of-type(3n+1) { - margin-left: 0%; - clear: none; - } - .views-col.col-3:nth-of-type(n+1) { - margin-left: 28.5%; - margin-right: 20%; - clear: left; +@media(max-width: 904px) { + .view-content { + margin-left: 82px; + .views-row { + max-width: calc(50% - 10px); + flex: 1 0 50%; + } } .conf_video-title { - margin-left: 180px; - font-size: 30px; + margin-left: 93px; } } -@media(max-width: 600px) { - .views-col.col-3 { - width: 100%; - } - .views-col.col-3:nth-of-type(3n+1) { - margin-left: 0%; - clear: none; - } - .views-col.col-3:nth-of-type(n+1) { - margin-left: 10%; - margin-right: 20%; - clear: left; +@media(max-width: 808px) { + .view-content { + margin-left: 25px; + .views-row { + max-width: calc(50% - 0px); + flex: 1 0 50%; + } } .conf_video-title { margin-left: 48px; - font-size: 26px; } } +@media(max-width: 713px) { + .view-content { + .views-row { + width: 100%; + flex: 1 0 100%; + margin-right: 20%; + } + } + .conf_video-title { + margin-left: 50px; + font-size: 26px; + } + } \ No newline at end of file From 3a6cf1d09931ab5c1722ff948f33a668109d231d Mon Sep 17 00:00:00 2001 From: Ganaa Ravdan Date: Thu, 3 Jan 2019 23:12:18 +0000 Subject: [PATCH 12/12] 1518 Added class to h2 title --- config/sync/views.view.recently_added_videos.yml | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/config/sync/views.view.recently_added_videos.yml b/config/sync/views.view.recently_added_videos.yml index f8ef0132..f046a2a6 100644 --- a/config/sync/views.view.recently_added_videos.yml +++ b/config/sync/views.view.recently_added_videos.yml @@ -17,7 +17,6 @@ dependencies: - image - media - node - - responsive_views_grid - taxonomy - user id: recently_added_videos @@ -1342,16 +1341,11 @@ display: granularity: second plugin_id: datetime style: - type: responsive_grid + type: default options: + row_class: '' + default_row_class: true uses_fields: false - columns: '4' - automatic_width: 1 - alignment: horizontal - col_class_default: 0 - col_class_custom: 'views-col col-3, col-6, col-12' - row_class_default: 1 - row_class_custom: '' row: type: 'entity:media' options: