Skip to content

Instantly share code, notes, and snippets.

@mrtag23
mrtag23 / css-siblings-count.scss
Last active February 8, 2018 00:57
Switch styles depending on siblings total number.
/* one item */
li:first-child:nth-last-child(1) {
/* -or- li:only-child { */
width: 100%;
}
/* two items */
li:first-child:nth-last-child(2),
@mrtag23
mrtag23 / hide_scroll.html
Created February 15, 2018 19:27
Hides vertical scroll.
// Initial source
// https://blogs.msdn.microsoft.com/kurlak/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari/
<div class="outer-container">
<div class="inner-container">
<div class="element">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie vel justo. Sed molestie nunc
@mrtag23
mrtag23 / region-render.php
Created April 11, 2018 23:50
Drupal 8 - display a specific region with a block inside into a node template.
/**
* Implements hook_preprocess_node() for NODE document templates.
*/
function THEME_preprocess_node(&$variables) {
// Allowed view modes
$view_mode = $variables['view_mode']; // Retrieve view mode
$allowed_view_modes = ['full']; // Array of allowed view modes (for performance so as to not execute on unneeded nodes)
// If view mode is in allowed view modes list, pass to THEME_add_regions_to_node()
if(in_array($view_mode, $allowed_view_modes)) {
@mrtag23
mrtag23 / select-reset.scss
Created April 12, 2018 16:01
Resets select dropdown default styles.
select {
appearance: none;
border: 1px solid black;
border-radius: 0;
font-size: 20px;
padding: 5px 40px 5px 5px;
font-family: Helvetica;
background: white url(http://www.8bitsports.net/wp-content/themes/meeta/functions/wpzoom/assets/images/jquery.selectBox-arrow.gif) no-repeat 95% center;
text-indent: 0.01px;
text-overflow: '';
@mrtag23
mrtag23 / set_active.php
Created April 13, 2018 17:32
Drupal 8 - Set active class name for active link.
function theme_preprocess_menu(&$variables, $hook) {
if ($hook == 'menu') {
$current_path = \Drupal::request()->getRequestUri();
$items = $variables['items'];
foreach ($items as $key => $item) {
// Set active to dom element if path of menu item matches current path
if ($item['url']->toString() == $current_path) {
// Add active link.
$variables['items'][$key]['attributes']['class'][] = 'active';
@mrtag23
mrtag23 / checkbox.scss
Created April 19, 2018 16:55
Pure CSS checkbox styling.
// Custom checkbox styling.
.checkbox-wrapper {
$checkbox-height: 16px;
$checkbox-width: 16px;
label {
display: inline-block;
padding-left: ($checkbox-width + 15px);
position: relative;
@mrtag23
mrtag23 / trianglw_shadow.scss
Created December 8, 2017 19:29
Triangle with shadow
.tooltip {
background-color: #fff;
&:after {
bottom: -9px;
border: 8px solid;
border-color: transparent transparent #fff #fff;
box-shadow: -3px 3px 3px 0 #aaa;
content: "";
height: 0;
@mrtag23
mrtag23 / chosen_icons.js
Last active July 19, 2018 21:35
Chosen with icons
(function ($) {
// Alter chosen markup for dropdowns with icons.
$('.dropdown--hasIcons .dropdown__select').on('chosen:showing_dropdown', function (event, data) {
// Since items are not initially created in DOM we will alter the markup on dropdown show.
var resultsData = data.chosen.results_data,
$dropdownItems = data.chosen.dropdown.find('li');
resultsData.forEach(function (result, i) {
$dropdownItems.eq(i).prepend('<i class="dropdown__icon dropdown__icon-' + result.value + '"></i>')
});
// doesn't work with ios, but works with everything else.
var keys = {
37: 1,
38: 1,
39: 1,
40: 1
},
preventDefault = function (e) {
e = e || window.event;
@mrtag23
mrtag23 / drupal_toolbar_offset.js
Created August 24, 2018 20:22
Adjusts top offset value depending on drupal toolbar status.
// Adjusts top offset depending on additional fixed positioned elements.
var windowOffsetAdjust = function() {
if ($window.width() < 1200) {
if ($body.hasClass('toolbar-vertical')) {
return 0;
} else {
// Adds header height.
return 60;
}
} else {