petr/www.tagesschule-elementa.ch
2
1
Fork 0
forked from TagesschuleElementa/www.tagesschule-elementa.ch
Code Issues Pull Requests Releases Wiki Activity

login bereich

Browse Source
This commit is contained in:
Simon Caminada
2018-03-22 20:13:07 +01:00
parent a74f6d0ee4
commit 5e1b34bfef
65 changed files with 1540 additions and 1057 deletions
Download Patch File Download Diff File Expand all files Collapse all files

464
private/js/lib/01_modernizr.js
View File

@@ -1,6 +1,6 @@
/*!
* modernizr v3.5.0
* Build https://modernizr.com/download?-touchevents-setclasses-dontmin
* modernizr v3.6.0
* Build https://modernizr.com/download?-cssanimations-touchevents-setclasses-dontmin
*
* Copyright (c)
* Faruk Ates
@@ -39,7 +39,7 @@
var ModernizrProto = {
// The current version, dummy
_version: '3.5.0',
_version: '3.6.0',
// Any settings that don't work as separate modules
// can go in here as configuration.
@@ -510,6 +510,464 @@ This test will also return `true` for Firefox 4 Multitouch support.
});
/**
* If the browsers follow the spec, then they would expose vendor-specific styles as:
* elem.style.WebkitBorderRadius
* instead of something like the following (which is technically incorrect):
* elem.style.webkitBorderRadius
* WebKit ghosts their properties in lowercase but Opera & Moz do not.
* Microsoft uses a lowercase `ms` instead of the correct `Ms` in IE8+
* erik.eae.net/archives/2008/03/10/21.48.10/
* More here: github.com/Modernizr/Modernizr/issues/issue/21
*
* @access private
* @returns {string} The string representing the vendor-specific style properties
*/
var omPrefixes = 'Moz O ms Webkit';
var cssomPrefixes = (ModernizrProto._config.usePrefixes ? omPrefixes.split(' ') : []);
ModernizrProto._cssomPrefixes = cssomPrefixes;
/**
* List of JavaScript DOM values used for tests
*
* @memberof Modernizr
* @name Modernizr._domPrefixes
* @optionName Modernizr._domPrefixes
* @optionProp domPrefixes
* @access public
* @example
*
* Modernizr._domPrefixes is exactly the same as [_prefixes](#modernizr-_prefixes), but rather
* than kebab-case properties, all properties are their Capitalized variant
*
* ```js
* Modernizr._domPrefixes === [ "Moz", "O", "ms", "Webkit" ];
* ```
*/
var domPrefixes = (ModernizrProto._config.usePrefixes ? omPrefixes.toLowerCase().split(' ') : []);
ModernizrProto._domPrefixes = domPrefixes;
/**
* contains checks to see if a string contains another string
*
* @access private
* @function contains
* @param {string} str - The string we want to check for substrings
* @param {string} substr - The substring we want to search the first string for
* @returns {boolean}
*/
function contains(str, substr) {
return !!~('' + str).indexOf(substr);
}
;
/**
* fnBind is a super small [bind](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) polyfill.
*
* @access private
* @function fnBind
* @param {function} fn - a function you want to change `this` reference to
* @param {object} that - the `this` you want to call the function with
* @returns {function} The wrapped version of the supplied function
*/
function fnBind(fn, that) {
return function() {
return fn.apply(that, arguments);
};
}
;
/**
* testDOMProps is a generic DOM property test; if a browser supports
* a certain property, it won't return undefined for it.
*
* @access private
* @function testDOMProps
* @param {array.<string>} props - An array of properties to test for
* @param {object} obj - An object or Element you want to use to test the parameters again
* @param {boolean|object} elem - An Element to bind the property lookup again. Use `false` to prevent the check
* @returns {false|*} returns false if the prop is unsupported, otherwise the value that is supported
*/
function testDOMProps(props, obj, elem) {
var item;
for (var i in props) {
if (props[i] in obj) {
// return the property name as a string
if (elem === false) {
return props[i];
}
item = obj[props[i]];
// let's bind a function
if (is(item, 'function')) {
// bind to obj unless overriden
return fnBind(item, elem || obj);
}
// return the unbound function or obj or value
return item;
}
}
return false;
}
;
/**
* cssToDOM takes a kebab-case string and converts it to camelCase
* e.g. box-sizing -> boxSizing
*
* @access private
* @function cssToDOM
* @param {string} name - String name of kebab-case prop we want to convert
* @returns {string} The camelCase version of the supplied name
*/
function cssToDOM(name) {
return name.replace(/([a-z])-([a-z])/g, function(str, m1, m2) {
return m1 + m2.toUpperCase();
}).replace(/^-/, '');
}
;
/**
* Create our "modernizr" element that we do most feature tests on.
*
* @access private
*/
var modElem = {
elem: createElement('modernizr')
};
// Clean up this element
Modernizr._q.push(function() {
delete modElem.elem;
});
var mStyle = {
style: modElem.elem.style
};
// kill ref for gc, must happen before mod.elem is removed, so we unshift on to
// the front of the queue.
Modernizr._q.unshift(function() {
delete mStyle.style;
});
/**
* domToCSS takes a camelCase string and converts it to kebab-case
* e.g. boxSizing -> box-sizing
*
* @access private
* @function domToCSS
* @param {string} name - String name of camelCase prop we want to convert
* @returns {string} The kebab-case version of the supplied name
*/
function domToCSS(name) {
return name.replace(/([A-Z])/g, function(str, m1) {
return '-' + m1.toLowerCase();
}).replace(/^ms-/, '-ms-');
}
;
/**
* wrapper around getComputedStyle, to fix issues with Firefox returning null when
* called inside of a hidden iframe
*
* @access private
* @function computedStyle
* @param {HTMLElement|SVGElement} - The element we want to find the computed styles of
* @param {string|null} [pseudoSelector]- An optional pseudo element selector (e.g. :before), of null if none
* @returns {CSSStyleDeclaration}
*/
function computedStyle(elem, pseudo, prop) {
var result;
if ('getComputedStyle' in window) {
result = getComputedStyle.call(window, elem, pseudo);
var console = window.console;
if (result !== null) {
if (prop) {
result = result.getPropertyValue(prop);
}
} else {
if (console) {
var method = console.error ? 'error' : 'log';
console[method].call(console, 'getComputedStyle returning null, its possible modernizr test results are inaccurate');
}
}
} else {
result = !pseudo && elem.currentStyle && elem.currentStyle[prop];
}
return result;
}
;
/**
* nativeTestProps allows for us to use native feature detection functionality if available.
* some prefixed form, or false, in the case of an unsupported rule
*
* @access private
* @function nativeTestProps
* @param {array} props - An array of property names
* @param {string} value - A string representing the value we want to check via @supports
* @returns {boolean|undefined} A boolean when @supports exists, undefined otherwise
*/
// Accepts a list of property names and a single value
// Returns `undefined` if native detection not available
function nativeTestProps(props, value) {
var i = props.length;
// Start with the JS API: http://www.w3.org/TR/css3-conditional/#the-css-interface
if ('CSS' in window && 'supports' in window.CSS) {
// Try every prefixed variant of the property
while (i--) {
if (window.CSS.supports(domToCSS(props[i]), value)) {
return true;
}
}
return false;
}
// Otherwise fall back to at-rule (for Opera 12.x)
else if ('CSSSupportsRule' in window) {
// Build a condition string for every prefixed variant
var conditionText = [];
while (i--) {
conditionText.push('(' + domToCSS(props[i]) + ':' + value + ')');
}
conditionText = conditionText.join(' or ');
return injectElementWithStyles('@supports (' + conditionText + ') { #modernizr { position: absolute; } }', function(node) {
return computedStyle(node, null, 'position') == 'absolute';
});
}
return undefined;
}
;
// testProps is a generic CSS / DOM property test.
// In testing support for a given CSS property, it's legit to test:
// `elem.style[styleName] !== undefined`
// If the property is supported it will return an empty string,
// if unsupported it will return undefined.
// We'll take advantage of this quick test and skip setting a style
// on our modernizr element, but instead just testing undefined vs
// empty string.
// Property names can be provided in either camelCase or kebab-case.
function testProps(props, prefixed, value, skipValueTest) {
skipValueTest = is(skipValueTest, 'undefined') ? false : skipValueTest;
// Try native detect first
if (!is(value, 'undefined')) {
var result = nativeTestProps(props, value);
if (!is(result, 'undefined')) {
return result;
}
}
// Otherwise do it properly
var afterInit, i, propsLength, prop, before;
// If we don't have a style element, that means we're running async or after
// the core tests, so we'll need to create our own elements to use
// inside of an SVG element, in certain browsers, the `style` element is only
// defined for valid tags. Therefore, if `modernizr` does not have one, we
// fall back to a less used element and hope for the best.
// for strict XHTML browsers the hardly used samp element is used
var elems = ['modernizr', 'tspan', 'samp'];
while (!mStyle.style && elems.length) {
afterInit = true;
mStyle.modElem = createElement(elems.shift());
mStyle.style = mStyle.modElem.style;
}
// Delete the objects if we created them.
function cleanElems() {
if (afterInit) {
delete mStyle.style;
delete mStyle.modElem;
}
}
propsLength = props.length;
for (i = 0; i < propsLength; i++) {
prop = props[i];
before = mStyle.style[prop];
if (contains(prop, '-')) {
prop = cssToDOM(prop);
}
if (mStyle.style[prop] !== undefined) {
// If value to test has been passed in, do a set-and-check test.
// 0 (integer) is a valid property value, so check that `value` isn't
// undefined, rather than just checking it's truthy.
if (!skipValueTest && !is(value, 'undefined')) {
// Needs a try catch block because of old IE. This is slow, but will
// be avoided in most cases because `skipValueTest` will be used.
try {
mStyle.style[prop] = value;
} catch (e) {}
// If the property value has changed, we assume the value used is
// supported. If `value` is empty string, it'll fail here (because
// it hasn't changed), which matches how browsers have implemented
// CSS.supports()
if (mStyle.style[prop] != before) {
cleanElems();
return prefixed == 'pfx' ? prop : true;
}
}
// Otherwise just return true, or the property name if this is a
// `prefixed()` call
else {
cleanElems();
return prefixed == 'pfx' ? prop : true;
}
}
}
cleanElems();
return false;
}
;
/**
* testPropsAll tests a list of DOM properties we want to check against.
* We specify literally ALL possible (known and/or likely) properties on
* the element including the non-vendor prefixed one, for forward-
* compatibility.
*
* @access private
* @function testPropsAll
* @param {string} prop - A string of the property to test for
* @param {string|object} [prefixed] - An object to check the prefixed properties on. Use a string to skip
* @param {HTMLElement|SVGElement} [elem] - An element used to test the property and value against
* @param {string} [value] - A string of a css value
* @param {boolean} [skipValueTest] - An boolean representing if you want to test if value sticks when set
* @returns {false|string} returns the string version of the property, or false if it is unsupported
*/
function testPropsAll(prop, prefixed, elem, value, skipValueTest) {
var ucProp = prop.charAt(0).toUpperCase() + prop.slice(1),
props = (prop + ' ' + cssomPrefixes.join(ucProp + ' ') + ucProp).split(' ');
// did they call .prefixed('boxSizing') or are we just testing a prop?
if (is(prefixed, 'string') || is(prefixed, 'undefined')) {
return testProps(props, prefixed, value, skipValueTest);
// otherwise, they called .prefixed('requestAnimationFrame', window[, elem])
} else {
props = (prop + ' ' + (domPrefixes).join(ucProp + ' ') + ucProp).split(' ');
return testDOMProps(props, prefixed, elem);
}
}
// Modernizr.testAllProps() investigates whether a given style property,
// or any of its vendor-prefixed variants, is recognized
//
// Note that the property names must be provided in the camelCase variant.
// Modernizr.testAllProps('boxSizing')
ModernizrProto.testAllProps = testPropsAll;
/**
* testAllProps determines whether a given CSS property is supported in the browser
*
* @memberof Modernizr
* @name Modernizr.testAllProps
* @optionName Modernizr.testAllProps()
* @optionProp testAllProps
* @access public
* @function testAllProps
* @param {string} prop - String naming the property to test (either camelCase or kebab-case)
* @param {string} [value] - String of the value to test
* @param {boolean} [skipValueTest=false] - Whether to skip testing that the value is supported when using non-native detection
* @example
*
* testAllProps determines whether a given CSS property, in some prefixed form,
* is supported by the browser.
*
* ```js
* testAllProps('boxSizing') // true
* ```
*
* It can optionally be given a CSS value in string form to test if a property
* value is valid
*
* ```js
* testAllProps('display', 'block') // true
* testAllProps('display', 'penguin') // false
* ```
*
* A boolean can be passed as a third parameter to skip the value check when
* native detection (@supports) isn't available.
*
* ```js
* testAllProps('shapeOutside', 'content-box', true);
* ```
*/
function testAllProps(prop, value, skipValueTest) {
return testPropsAll(prop, undefined, undefined, value, skipValueTest);
}
ModernizrProto.testAllProps = testAllProps;
/*!
{
"name": "CSS Animations",
"property": "cssanimations",
"caniuse": "css-animation",
"polyfills": ["transformie", "csssandpaper"],
"tags": ["css"],
"warnings": ["Android < 4 will pass this test, but can only animate a single property at a time"],
"notes": [{
"name" : "Article: 'Dispelling the Android CSS animation myths'",
"href": "https://goo.gl/OGw5Gm"
}]
}
!*/
/* DOC
Detects whether or not elements can be animated using CSS
*/
Modernizr.addTest('cssanimations', testAllProps('animationName', 'a', true));
// Run each test
testRunner();

8
private/js/modules/__util.js
View File

@@ -1,5 +1,13 @@
window.transitionend = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend';
window.on_transitionend = function($element, do_function) {
if (Modernizr.csstransitions) {
$element.on(window.transitionend, do_function);
} else {
do_function(false)
}
};
$(function() {
var $body = $('body');

4
private/js/modules/_reveal.js
View File

@@ -29,7 +29,7 @@ $(function() {
create_reveal_elements($('html'));
function remove_reveal_animation(event) {
if (event.target === this) {
if (!event || event.target === this) {
$(this).removeClass('reveal_animation');
$(this).off(window.transitionend, remove_reveal_animation);
}
@@ -43,7 +43,7 @@ $(function() {
function reveal_element(element) {
window.requestAnimationFrame(function() {
$(element).on(window.transitionend, remove_reveal_animation);
window.on_transitionend($(element), remove_reveal_animation);
$(element).removeClass('reveal');
});
}

55
private/js/modules/control-panel.js
View File

@@ -55,17 +55,13 @@ $(function() {
$body.on('submit', '.control__item form', function(event) {
event.preventDefault();
var $form = $(this);
$form.addClass('loading');
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serialize(),
success: function(data) {
if ($(data).hasClass('control__item__success')) {
var $control_item = $form.parents('.control__item');
$control_item.find('.control__item__close').trigger('click');
} else {
$form.replaceWith(data);
}
$form.replaceWith(data);
}
});
});
@@ -76,7 +72,7 @@ $(function() {
window.location = '#form';
}
$task_form.formset();
// $task_form.formset();
$task_form.on('formAdded', function(event) {
var $title = $(event.target).find('h3');
var id = parseInt($title.attr('data-id').match(/\d+/)[0]);
@@ -86,4 +82,49 @@ $(function() {
$task_form.on('formDeleted', function(event) {
$(event.target).hide();
});
/* DOWNLOADS */
var download_texts = [];
$('.download__item__title').each(function() {
var text = $(this).text().toLowerCase();
text = text + ' ' + $(this).next().text().toLowerCase();
text = text + ' ' + $(this).next().next().text().toLowerCase();
download_texts.push({
$element: $(this).parents('li'),
text: text
});
});
$body.on('input', '#downloads_search', function(event) {
var query = $(this).val().toLowerCase();
var query_list = $.trim(query).split(' ');
var matches = [];
for (var i = 0; i < download_texts.length; i++) {
var download_text_item = download_texts[i];
var matched = false;
if (!matched) {
for (var ii = 0; ii < query_list.length; ii++) {
var query_item = query_list[ii];
if (download_text_item.text.indexOf(query_item) >= 0) {
matched = true;
matches.push(download_text_item.$element);
}
}
}
}
$('#downloads li').each(function() {
$(this).parents('.downloads__section').css('display', 'none');
$(this).css('display', 'none');
});
for (i = 0; i < matches.length; i++) {
matches[i].removeAttr('style');
matches[i].parents('.downloads__section').removeAttr('style');
}
});
$('#downloads_search').trigger('input');
});

47
private/js/modules/downloads.js
View File

@@ -1,47 +0,0 @@
$(function() {
'use strict';
var $body = $('body');
var download_texts = [];
$('.downloads__item__text').each(function() {
var text = $(this).text().toLowerCase();
text = text + '' + $(this).next().text().toLowerCase();
download_texts.push({
$element: $(this).parents('.downloads__item__frame'),
text: text
});
});
$body.on('input', '#downloads_search', function(event) {
var query = $(this).val().toLowerCase();
var query_list = $.trim(query).split(' ');
var matches = [];
for (var i = 0; i < download_texts.length; i++) {
var download_text_item = download_texts[i];
var matched = false;
if (!matched) {
for (var ii = 0; ii < query_list.length; ii++) {
var query_item = query_list[ii];
if (download_text_item.text.indexOf(query_item) >= 0) {
matched = true;
matches.push(download_text_item.$element);
}
}
}
}
$('.downloads__item__frame').each(function() {
$(this).parents('.downloads__section').css('display', 'none');
$(this).css('display', 'none');
});
for (i = 0; i < matches.length; i++) {
matches[i].removeAttr('style');
matches[i].parents('.downloads__section').removeAttr('style');
}
});
$('#downloads_search').trigger('input');
});

53
private/js/modules/list.js Normal file
View File

@@ -0,0 +1,53 @@
var search = window.location.search;
if (search.indexOf('?page=1') === -1 && (search.indexOf('?page=') >= 0 || search.indexOf('&page=') >= 0)) {
document.getElementsByTagName("body")[0].classList.add('hidden');
window.location = window.location.pathname;
}
$(function() {
'use strict';
var $body = $('body');
$body.on('click', '.list__button', function(event) {
event.preventDefault();
var $button = $(this);
var $load_frame = $button.parents('.load__frame');
$button.width($button.width());
window.requestAnimationFrame(function() {
$load_frame.addClass('loading');
$load_frame.height($load_frame.outerHeight());
var load_frame_id = $load_frame.attr('id');
var $load_replace = $button.parents('.load__replace');
$.get($button.attr('href'), function(data) {
var loaded_data = $(data).find('#' + load_frame_id + ' .load__main').html();
$load_frame.addClass('loaded');
window.setTimeout(function() {
$load_replace.replaceWith(loaded_data);
window.on_transitionend($load_frame, function(event) {
if (!event || event.target === this) {
$load_frame.removeAttr('style');
$load_frame.removeClass('loading loaded');
$load_frame.off(window.transitionend)
}
});
$load_frame.height($load_frame.find('.load__main').height());
window.create_reveal_elements($load_frame);
init_auto_load();
}, 200);
});
});
});
function init_auto_load() {
$('.load__replace--auto').each(function() {
var that = this;
var elementWatcher = scrollMonitor.create(that);
elementWatcher.enterViewport(function() {
$(that).find('a').trigger('click');
});
});
}
init_auto_load();
});

5
private/js/modules/navigation.js
View File

@@ -13,7 +13,8 @@ $(function() {
var href = $(this).attr('href');
var target = $(this).attr('target');
var is_event = $(this).hasClass('event');
if (href.indexOf('/') === 0 && !target && !is_event && !event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey && !$('html').hasClass('cms-ready')) {
var is_load = $(this).hasClass('button--load');
if (href.indexOf('/') === 0 && !is_load && !target && !is_event && !event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey && !$('html').hasClass('cms-ready')) {
event.preventDefault();
$body.addClass('unload loading');
window.setTimeout(function() {
@@ -86,7 +87,7 @@ $(function() {
window.navigation_is_open = true;
$body.removeClass('notification_open');
$navigation.one(window.transitionend, function() {
window.on_transitionend($navigation, function() {
window.requestAnimationFrame(function() {
$navigation.css('position', 'relative');
$navigation.off(window.transitionend);

1
private/scss/_config.scss
View File

@@ -4,6 +4,7 @@ $light_gray: #F4F4F4;
$medium_light_gray: #E6E6E6;
$gray: #ADADAD;
$dark_gray: #8f8f8f;
$black_gray: #737373;
$near_black: #444444;
$black: #000000;

8
private/scss/_typography.scss
View File

@@ -39,4 +39,12 @@ h2, .h2 {
@media screen and (max-width: $medium_breakpoint) {
font-size: em(30px);
}
}
h3, .h3 {
font-size: em(18px);
color: $dark_gray;
font-weight: 700;
line-height: 1.45;
letter-spacing: 0.01em;
}

1
private/scss/main.scss
View File

@@ -13,7 +13,6 @@
@import "modules/_contact.scss";
@import "modules/_content.scss";
@import "modules/_admin_editor.scss";
@import "modules/_downloads.scss";
@import "modules/_control-panel.scss";
@import "modules/plugins/_quote.scss";
@import "modules/plugins/_slider.scss";

59
private/scss/modules/_content.scss
View File

@@ -7,6 +7,27 @@ $max-width: 100%;
padding-top: em(50px);
}
.content__frame--dialog {
display: table;
width: 100%;
height: 100%;
.content__container {
display: table-cell;
width: 100%;
height: 100%;
vertical-align: middle;
text-align: center;
}
}
.content__dialog {
display: inline-block;
width: 100%;
max-width: em(600px);
padding: em(100px) em(30px);
text-align: left;
}
.content__intro {
width: 100%;
height: 70vh;
@@ -17,14 +38,6 @@ $max-width: 100%;
padding: em(50px) 10% 0;
background: $light_gray;
transition: background 0.5s $easeOutQuart;
h1 {
width: 100%;
z-index: 3;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%) translateY(em(40px));
}
&.reveal {
transform: none;
}
@@ -48,8 +61,34 @@ $max-width: 100%;
}
@media screen and (max-width: $medium_breakpoint) {
height: 50vh;
h1 {
transform: translateY(-50%) translateY(em(25px));
}
}
.content__intro__content {
width: 100%;
z-index: 3;
position: absolute;
left: 0;
top: 50%;
text-align: center;
color: $white;
padding: 0 em(30px);
p {
line-height: 1.3;
font-size: em(18px);
margin: em(20px) 0 0;
}
a {
margin: em(40px) em(10px) 0;
}
transform: translateY(-50%) translateY(em(40px));
&.reveal {
transform: translateX(100px) translateY(-50%) translateY(em(40px));
}
@media screen and (max-width: $medium_breakpoint) {
transform: translateY(-50%) translateY(em(25px));
&.reveal {
transform: translateX(100px) translateY(-50%) translateY(em(25px));
}
}
}

162
private/scss/modules/_control-panel.scss
View File

@@ -1,17 +1,12 @@
.control_panel {
width: 100%;
padding: em(100px) 0;
padding: em(100px) 0 0;
will-change: transform, height;
&.reveal_animation {
transition: background $reveal_duration $reveal_timing_function;
&.reveal {
background: transparent;
}
}
.load__replace {
margin-top: em(40px);
text-align: left;
}
text-align: left;
}
.task__form {
margin-top: em(50px);
}
.control__list {
@@ -21,26 +16,27 @@
}
.control_panel__content {
max-width: em(1440px);
margin: 0 auto;
padding: 0 em(80px);
font-size: 0;
@media screen and (max-width: $large_breakpoint) {
padding: 0 em(60px);
}
@media screen and (max-width: $medium_breakpoint) {
max-width: em(600px);
padding: 0 em(30px);
}
}
.control__item {
display: block;
background: $white_gray;
color: $black_gray;
text-decoration: none;
width: 100%;
margin-bottom: em(15px);
position: relative;
line-height: 1.3;
border-bottom: 3px solid $white_gray;
&.loading {
&:before {
top: 50%;
width: em(30px);
height: em(30px);
margin-top: em(-15px);
}
}
}
.control__item__open {
@@ -76,10 +72,8 @@
.control__item__title {
display: block;
width: 100%;
padding: em(22px) em(30px);
padding: em(23px) em(30px) em(20px);
position: relative;
font-size: em(18px);
color: $dark_gray;
.control__item--button & {
padding-right: em(240px);
.button {
@@ -100,10 +94,10 @@
}
}
.control__item--status & {
padding-left: em(85px);
padding-left: em(80px);
}
.control__item--arrow & {
padding-right: em(85px);
padding-right: em(80px);
&:hover {
.control__item__arrow {
transform: translateX(em(5px));
@@ -123,8 +117,10 @@
}
.control__item__content__main {
border-top: 1px solid $gray;
border: 3px solid $white_gray;
border-bottom: 0;
padding: em(30px);
background: $white;
}
.control__item__fields {
@@ -135,23 +131,24 @@
display: inline-block;
position: absolute;
top: 50%;
left: em(20px);
margin-top: em(-20px);
border-radius: 50%;
left: em(22px);
width: em(34px);
height: em(34px);
margin-top: em(-16px);
border: 2px solid $gray;
svg {
display: block;
width: em(36px);
height: em(36px);
display: none;
width: 60%;
height: 60%;
margin: 20%;
fill: $white;
}
.control__item--status--active & {
background: $green;
border-color: $green;
}
.control__item--status--expired & {
background: $red;
border-color: $red;
svg {
display: block;
}
}
}
@@ -160,36 +157,95 @@
position: absolute;
top: 50%;
right: em(20px);
margin-top: em(-20px);
margin-top: em(-13px);
transform: none;
transition: transform 0.3s $easeOutQuart;
svg {
display: block;
width: em(40px);
height: em(40px);
transform: rotate(-90deg);
}
.fill {
width: em(26px);
height: em(26px);
fill: $green;
}
}
.todo {
.control_panel__content__item {
display: inline-block;
vertical-align: top;
width: 48%;
margin-right: 4%;
font-size: em(18px);
position: relative;
&:first-child {
margin-right: 4%;
}
@media screen and (max-width: $large_breakpoint) {
display: block;
width: 100%;
margin: 0 0 em(40px) 0;
margin: 0 0 em(50px) 0;
}
}
.settings {
display: inline-block;
vertical-align: top;
width: 48%;
@media screen and (max-width: $large_breakpoint) {
width: 100%;
.downloads__frame {
width: 100%;
padding: em(150px) 0;
position: relative;
will-change: transform;
.downloads {
li {
width: 33.3333%;
@media screen and (max-width: $large_breakpoint) {
width: 50%;
}
@media screen and (max-width: $medium_breakpoint) {
width: 100%;
}
}
}
}
@media screen and (max-width: $large_breakpoint) {
padding-top: 0;
}
}
.downloads__section {
margin-top: em(80px);
.downloads--flat & {
margin-top: 0;
}
}
.downloads__section__title {
width: 100%;
overflow: hidden;
h3 {
display: inline-block;
position: relative;
&:after {
content: '';
display: block;
position: absolute;
background: $medium_light_gray;
width: 100vw;
height: em(3px);
top: em(15px);
left: 100%;
margin-left: em(20px);
}
}
}
.downloads__section__title--flat {
h3 {
&:after {
display: none;
}
}
}
.downloads__list {
display: block;
margin: 0 em(-10px);
font-size: 0;
}
.downloads__item__tags {
display: none;
}

66
private/scss/modules/_downloads.scss
View File

@@ -1,66 +0,0 @@
.downloads__frame {
width: 100%;
padding: em(80px) 0 em(150px);
position: relative;
will-change: transform;
.downloads {
li {
width: 33.3333%;
}
}
}
.downloads__content {
max-width: em(1440px);
margin: 0 auto;
padding: 0 em(80px);
@media screen and (max-width: $large_breakpoint) {
padding: 0 em(60px);
}
@media screen and (max-width: $medium_breakpoint) {
max-width: em(600px);
padding: 0 em(30px);
}
}
.downloads__section {
margin-top: em(80px);
.downloads--flat & {
margin-top: 0;
}
}
.downloads__section__title {
width: 100%;
overflow: hidden;
h3 {
display: inline-block;
position: relative;
&:after {
content: '';
display: block;
position: absolute;
background: $white;
width: 100vw;
height: em(3px);
opacity: 0.15;
top: em(10.5px);
left: 100%;
margin-left: em(20px);
}
}
}
.downloads__section__title--flat {
h3 {
&:after {
display: none;
}
}
}
.downloads__list {
display: block;
margin: 0 em(-10px);
font-size: 0;
}

4
private/scss/modules/_footer.scss
View File

@@ -57,8 +57,8 @@
@media screen and (min-width: $medium_breakpoint + 1) {
padding: 0 em(30px) !important;
.header__button__icon {
width: em(16px);
height: em(16px);
width: em(12px);
height: em(12px);
top: em(-1px);
margin-right: em(10px);
}

3
private/scss/modules/plugins/_download_section.scss
View File

@@ -68,7 +68,8 @@
color: $white;
font-weight: 500;
padding: 0 em(5px);
text-shadow: 0 1px 0 $green, 1px 0 0 $green, 0 -1px 0 $green, -1px 0 0 $green;
text-shadow: 1px 0 0 $green, 0 1px 0 $green, -1px 0 0 $green, 0 -1px 0 $green,
2px 0 0 $green, 0 2px 0 $green, -2px 0 0 $green, 0 -2px 0 $green;
&:before, &:after {
display: block;
content: '';

106
private/scss/modules/plugins/_form.scss
View File

@@ -44,6 +44,10 @@
.form__submit {
text-align: right;
.button {
vertical-align: top;
margin-left: em(10px);
}
}
.button {
@@ -76,6 +80,31 @@
}
}
.button--small {
height: em(35px);
line-height: em(35px);
font-size: em(14px);
}
.button--ghost {
background: none;
color: $green;
svg {
fill: $green !important;
}
&:after {
content: '';
position: absolute;
z-index: -1;
display: block;
top: 0;
right: 0;
left: 0;
bottom: 0;
border: 2px solid $green;
}
}
.button__icon {
display: block;
position: absolute;
@@ -90,6 +119,9 @@
width: em(36px);
fill: $white;
margin: em(12px) 0;
.button--small & {
margin: em(7px) 0;
}
}
}
@@ -104,6 +136,78 @@
width: 100%;
display: block;
margin-bottom: em(15px);
position: relative;
}
.form__field--label {
padding-left: 30%;
label {
display: block;
position: absolute;
top: 0;
left: 0;
width: 30%;
line-height: em(40px);
font-weight: 400;
padding-right: em(20px);
font-size: em(12px);
letter-spacing: 0.03em;
text-transform: uppercase;
span {
line-height: 1.3;
display: inline-block;
vertical-align: middle;
}
}
@media screen and (max-width: $small_breakpoint) {
padding: 0;
label {
position: relative;
width: 100%;
padding: 0;
margin-bottom: em(2px);
}
}
}
.form__field--icon {
input {
height: em(70px);
padding: 0 em(90px) 0 em(15px);
}
button, a {
display: block;
-webkit-appearance: none;
position: absolute;
top: 0;
right: 0;
width: em(70px);
height: em(70px);
line-height: em(65px);
border: none;
font-size: 0;
text-align: center;
padding: em(3px);
border-top-right-radius: em(5px);
border-bottom-right-radius: em(5px);
background: transparent;
color: inherit;
cursor: pointer;
svg {
vertical-align: middle;
width: em(36px);
height: em(36px);
display: inline-block;
transform: none;
fill: $green;
transition: transform 0.3s $easeOutQuart;
}
&:hover {
svg {
transform: scale(1.1);
}
}
}
}
input, textarea {
@@ -161,7 +265,7 @@ textarea {
.form__success, .form__errors, .form__field__errors {
display: block;
width: 100%;
font-size: em(16px);
font-size: em(14px);
font-weight: 700;
line-height: 1.5;
}

1
private/scss/modules/plugins/_slider.scss
View File

@@ -233,6 +233,7 @@
font-weight: 700;
margin-bottom: em(5px);
line-height: 1.3;
color: $white;
}
.slider__text__item__subline {