Use checkbox instead of changing text
This commit is contained in:
Stéphane Goetz
bovenliggende
364ce8893d
commit
ef36a953b4
@ -7,10 +7,10 @@
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-less": "^3.1.0",
|
||||
"gulp-plumber": "^1.1.0",
|
||||
"gulp-postcss": "^6.1.1",
|
||||
"gulp-postcss": "^7.0.0",
|
||||
"gulp-rename": "^1.2.2",
|
||||
"gulp-stylelint": "^3.0.0",
|
||||
"stylelint-config-standard": "^16.0.0"
|
||||
"gulp-stylelint": "^5.0.0",
|
||||
"stylelint-config-standard": "^17.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "gulp",
|
||||
|
||||
@ -1,38 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
|
||||
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
|
||||
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
|
||||
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
|
||||
<html class="no-js" lang="en">
|
||||
<head>
|
||||
<title><?= $page['title']; ?> <?php if ($page['title'] != $params['title']) {
|
||||
echo '- ' . $params['title'];
|
||||
} ?></title>
|
||||
<meta name="description" content="<?= $params['tagline']; ?>" />
|
||||
<title><?= $page['title']; ?> <?= ($page['title'] != $params['title'])? '- ' . $params['title'] : "" ?></title>
|
||||
<meta name="description" content="<?= $params['tagline']; ?>">
|
||||
<meta name="author" content="<?= $params['author']; ?>">
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
|
||||
<link rel="icon" href="<?= $params['theme']['favicon']; ?>" type="image/x-icon">
|
||||
|
||||
<!-- Mobile -->
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<!-- Font -->
|
||||
<?php foreach ($params['theme']['fonts'] as $font) {
|
||||
echo "<link href='$font' rel='stylesheet' type='text/css'>";
|
||||
} ?>
|
||||
echo "<link href='$font' rel='stylesheet' type='text/css'>";
|
||||
} ?>
|
||||
|
||||
<!-- CSS -->
|
||||
<?php foreach ($params['theme']['css'] as $css) {
|
||||
echo "<link href='$css' rel='stylesheet' type='text/css'>";
|
||||
} ?>
|
||||
echo "<link href='$css' rel='stylesheet' type='text/css'>";
|
||||
} ?>
|
||||
|
||||
<?php if ($params['html']['search']) {
|
||||
?>
|
||||
<?php if ($params['html']['search']) { ?>
|
||||
<!-- Tipue Search -->
|
||||
<link href="<?= $base_url; ?>tipuesearch/tipuesearch.css" rel="stylesheet">
|
||||
<?php
|
||||
|
||||
} ?>
|
||||
<?php } ?>
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="<?= $base_url; ?>themes/daux/js/html5shiv-3.7.3.min.js"></script>
|
||||
@ -64,8 +58,7 @@
|
||||
|
||||
<script src="<?= $base_url; ?>themes/daux/js/daux.js"></script>
|
||||
|
||||
<?php if ($params['html']['search']) {
|
||||
?>
|
||||
<?php if ($params['html']['search']) { ?>
|
||||
<!-- Tipue Search -->
|
||||
<script type="text/javascript" src="<?php echo $base_url; ?>tipuesearch/tipuesearch.js"></script>
|
||||
|
||||
@ -77,9 +70,7 @@
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<?php
|
||||
|
||||
} ?>
|
||||
<?php } ?>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -25,61 +25,43 @@
|
||||
|
||||
|
||||
<div class="Links">
|
||||
<?php if (!empty($params['html']['links'])) {
|
||||
?>
|
||||
<?php if (!empty($params['html']['links'])) { ?>
|
||||
<hr/>
|
||||
<?php foreach ($params['html']['links'] as $name => $url) {
|
||||
?>
|
||||
<?php foreach ($params['html']['links'] as $name => $url) { ?>
|
||||
<a href="<?= $url ?>" target="_blank"><?= $name ?></a>
|
||||
<br />
|
||||
<?php
|
||||
<?php } ?>
|
||||
<?php } ?>
|
||||
|
||||
} ?>
|
||||
<?php
|
||||
|
||||
} ?>
|
||||
|
||||
<?php if ($params['html']['toggle_code']) {
|
||||
?>
|
||||
<?php if ($params['html']['toggle_code']) { ?>
|
||||
<div class="CodeToggler">
|
||||
<hr/>
|
||||
<?php if ($params['html']['float']) {
|
||||
?>
|
||||
<?php if ($params['html']['float']) { ?>
|
||||
<span class="CodeToggler__text">Code blocks</span>
|
||||
<div class="ButtonGroup" role="group">
|
||||
<button class="Button Button--default Button--small CodeToggler__button CodeToggler__button--hide">No</button>
|
||||
<button class="Button Button--default Button--small CodeToggler__button CodeToggler__button--below">Below</button>
|
||||
<button class="Button Button--default Button--small CodeToggler__button CodeToggler__button--float">Inline</button>
|
||||
</div>
|
||||
<?php
|
||||
|
||||
} else {
|
||||
?>
|
||||
<a class="CodeToggler__button CodeToggler__button--main" href="#">Show Code Blocks Inline</a><br>
|
||||
<?php
|
||||
|
||||
} ?>
|
||||
<?php } else { ?>
|
||||
<label class="Checkbox">Show Code Blocks
|
||||
<input type="checkbox" class="CodeToggler__button--main" checked="checked"/>
|
||||
<div class="Checkbox__indicator"></div>
|
||||
</label>
|
||||
<?php } ?>
|
||||
</div>
|
||||
<?php
|
||||
<?php } ?>
|
||||
|
||||
} ?>
|
||||
|
||||
<?php if (!empty($params['html']['twitter'])) {
|
||||
?>
|
||||
<?php if (!empty($params['html']['twitter'])) { ?>
|
||||
<hr/>
|
||||
<div class="Twitter">
|
||||
<?php foreach ($params['html']['twitter'] as $handle) {
|
||||
?>
|
||||
<?php foreach ($params['html']['twitter'] as $handle) { ?>
|
||||
<iframe allowtransparency="true" frameborder="0" scrolling="no" style="width:162px; height:20px;" src="https://platform.twitter.com/widgets/follow_button.html?screen_name=<?= $handle; ?>&show_count=false"></iframe>
|
||||
<br />
|
||||
<br />
|
||||
<?php
|
||||
|
||||
} ?>
|
||||
<?php } ?>
|
||||
</div>
|
||||
<?php
|
||||
|
||||
} ?>
|
||||
<?php } ?>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
4
themes/daux/css/theme-blue.min.css
vendored
4
themes/daux/css/theme-blue.min.css
vendored
Bestand-diff onderdrukt omdat een of meer regels te lang zijn
4
themes/daux/css/theme-green.min.css
vendored
4
themes/daux/css/theme-green.min.css
vendored
Bestand-diff onderdrukt omdat een of meer regels te lang zijn
4
themes/daux/css/theme-navy.min.css
vendored
4
themes/daux/css/theme-navy.min.css
vendored
Bestand-diff onderdrukt omdat een of meer regels te lang zijn
4
themes/daux/css/theme-red.min.css
vendored
4
themes/daux/css/theme-red.min.css
vendored
Bestand-diff onderdrukt omdat een of meer regels te lang zijn
@ -30,14 +30,14 @@ $(function () {
|
||||
break;
|
||||
case 1: // Show code blocks below
|
||||
toggleCodeBlockBtnBelow.addClass("Button--active");
|
||||
toggleCodeBlockBtn.html("Hide Code Blocks");
|
||||
toggleCodeBlockBtn.prop('checked', true);
|
||||
codeBlockView.removeClass('Columns__right--float');
|
||||
codeBlocks.removeClass('hidden');
|
||||
break;
|
||||
case 0: // Hidden code blocks
|
||||
default:
|
||||
toggleCodeBlockBtnHide.addClass("Button--active");
|
||||
toggleCodeBlockBtn.html("Show Code Blocks");
|
||||
toggleCodeBlockBtn.prop('checked', false);
|
||||
codeBlockView.removeClass('Columns__right--float');
|
||||
codeBlocks.addClass('hidden');
|
||||
break;
|
||||
|
||||
@ -363,3 +363,76 @@ Components
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.Checkbox {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding-left: 30px;
|
||||
cursor: pointer;
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.Checkbox__indicator {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #e6e6e6;
|
||||
|
||||
/* Check mark */
|
||||
&::after {
|
||||
position: absolute;
|
||||
display: none;
|
||||
content: '';
|
||||
}
|
||||
|
||||
/* Hover and focus states */
|
||||
.Checkbox:hover input ~ &,
|
||||
.Checkbox input:focus ~ & {
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
/* Checked state */
|
||||
.Checkbox input:checked ~ & {
|
||||
background: @dark;
|
||||
|
||||
/* Show check mark */
|
||||
&::after {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hover state whilst checked */
|
||||
.Checkbox:hover input:not([disabled]):checked ~ &, .Checkbox input:checked:focus ~ & {
|
||||
background: @light;
|
||||
}
|
||||
|
||||
/* Disabled state */
|
||||
.Checkbox input:disabled ~ & {
|
||||
pointer-events: none;
|
||||
opacity: 0.6;
|
||||
background: #e6e6e6;
|
||||
}
|
||||
|
||||
/* Checkbox tick */
|
||||
.Checkbox &::after {
|
||||
top: 4px;
|
||||
left: 8px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
transform: rotate(45deg);
|
||||
border: solid #fff;
|
||||
border-width: 0 2px 2px 0;
|
||||
}
|
||||
|
||||
/* Disabled tick colour */
|
||||
.Checkbox input:disabled ~ &::after {
|
||||
border-color: #7b7b7b;
|
||||
}
|
||||
}
|
||||
|
||||
Laden…
x
Verwijs in nieuw issue
Block a user