Skip to content

B
bem-sample
Commit 155b4124 authored by Kazuhiko Shiozaki's avatar Kazuhiko Shiozaki
Browse files
Options

initial commit.

parents
Hide whitespace changes
Inline Side-by-side
Showing with 1497 additions and 0 deletions
README.md 0 → 100644
View file @ 155b4124
This is a sample HTML/CSS/JavaScript that strictly follows our naming convention.
Reference for the guideline of CSS :
* https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/
* http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
faq.html 0 → 100644
View file @ 155b4124
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="images/favicon.ico">
<title>FAQ</title>
<link href="styles/normalize.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cabin:400,600" rel="stylesheet">
<link rel="stylesheet/less" type="text/css" href="styles/styles.less" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.min.js" type="text/javascript"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="styles/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
<![endif]-->
</head>
<body class="faq">
<header class="header">
<div class="l-wrapper-header">
<div class="header-phone">Need for support? <img src="images/phone_icon.png" alt="" class="header-phone__image" /> 1-800-123-4567</div>
<div class="header-logo"><a href="landing.html"><img src="http://placehold.it/188x49?text=logo" alt="logo" class="header-logo__image" /></a></div>
<nav class="header-nav">
<div class="header-nav__toggle"></div>
<ul class="header-nav__list">
<li class="header-nav__item">
<a href="laning.html" class="header-nav__link">Home</a>
</li>
<li class="header-nav__item">
<a href="about.html" class="header-nav__link">About Us</a>
</li>
<li class="header-nav__item">
<a href="about.html" class="header-nav__link">FAQ</a>
</li>
<li class="header-nav__item">
<a href="about.html" class="header-nav__link">Contact</a>
</li>
<li class="header-nav__item">
<a href="about.html" class="header-nav__link--sign-up">Sign Up</a>
</li>
<li class="header-nav__item">
<span class="header-nav__link--my-account"><i class="fa fa-bars"></i>First Last</span>
<ul class="header-my-account__list">
<li class="header-my-account__item">
<a class="header-my-account__link" href="my_account/summary"><i class="fa fa-user"></i>My Account</a>
</li>
<li class="header-my-account__item">
<a class="header-my-account__link" href="logout"><i class="fa fa-power-off"></i>Logout</a>
</li>
</ul>
</li>
</ul>
</nav>
<h1 class="header-title">Frequent Asked Questions</h1>
<h2 class="header-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
</div>
</header>
<div class="main">
<div class="l-wrapper-faq">
<div class="faq">
<div class="faq-side">
<ul class="faq-menu__list">
<li class="faq-menu__item">
<a href="#" class="faq-menu__link">Foo</a>
</li>
<li class="faq-menu__item">
<a href="#" class="faq-menu__link">Foo</a>
</li>
<li class="faq-menu__item__selected">
<a href="#" class="faq-menu__link">Foo</a>
</li>
<li class="faq-menu__item">
<a href="#" class="faq-menu__link">Foo</a>
</li>
</ul>
</div>
<div class="faq-body">
<div class="faq-entry">
<h1 class="faq-entry__title">Foo<span class="faq-entry__toggle"></span></h1>
<div class="faq-entry__content">
<p>Bar.</p>
<p>Bar.</p>
</div>
</div>
<div class="faq-entry">
<h1 class="faq-entry__title">Foo<span class="faq-entry__toggle"></span></h1>
<div class="faq-entry__content">
<p>Bar.</p>
<p>Bar.</p>
</div>
</div>
<div class="faq-entry">
<h1 class="faq-entry__title">Foo<span class="faq-entry__toggle"></span></h1>
<div class="faq-entry__content">
<p>Bar.</p>
<p>Bar.</p>
</div>
</div>
<div class="faq-entry">
<h1 class="faq-entry__title">Foo<span class="faq-entry__toggle"></span></h1>
<div class="faq-entry__content">
<p>Bar.</p>
<p>Bar.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="footer-information">
<div class="l-wrapper-footer">
<div class="footer-links-box">
<div class="footer-links">
<div class="footer-links__title">About Us</div>
<ul class="footer-links__list">
<li class="footer-links__item">
<a href="#" class="footer-links__link">About Foo</a>
</li>
<li class="footer-links__item">
<a href="#" class="footer-links__link">Our Partners</a>
</li>
</ul>
</div>
<div class="footer-links">
<div class="footer-links__title">Foo Program</div>
<ul class="footer-links__list">
<li class="footer-links__item">
<a href="#" class="footer-links__link">About Foo</a>
</li>
<li class="footer-links__item">
<a href="#" class="footer-links__link">Our Partners</a>
</li>
</ul>
</div>
<div class="footer-links">
<div class="footer-links__title">Fine Prints</div>
<ul class="footer-links__list">
<li class="footer-links__item">
<a href="#" class="footer-links__link">About Foo</a>
</li>
<li class="footer-links__item">
<a href="#" class="footer-links__link">Our Partners</a>
</li>
</ul>
</div>
</div>
<div class="footer-logo">
<img src="http://placehold.it/188x49?text=logo" alt="logo" class="footer-logo__image" />
<div class="footer-logo__phone"><span class="footer-logo__phone-number">1-800-123-4567</span></div>
<div class="footer-logo__open-hours">Open hours:<br />From 8:00 am to 5:00 pm PT</div>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="l-wrapper-footer">
<div class="footer-copyright__text">
Foo is a registered trade mark of Foo Inc.
</div>
<div class="footer-copyright__image">
<img src="images/odot_logo_white_transparent.png" alt="" />
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/main.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
js/ie10-viewport-bug-workaround.js 0 → 100644
View file @ 155b4124
/*!
* IE10 viewport hack for Surface/desktop Windows 8 bug
* Copyright 2014-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
// See the Getting Started docs for more information:
// http://getbootstrap.com/getting-started/#support-ie10-width
(function () {
'use strict';
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement('style')
msViewportStyle.appendChild(
document.createTextNode(
'@-ms-viewport{width:auto!important}'
)
)
document.querySelector('head').appendChild(msViewportStyle)
}
})();
js/main.js 0 → 100644
View file @ 155b4124
$(document).ready(function(){
// header
$(".header-nav__toggle").on("click", function(){
$(this).toggleClass("is-active");
$(".header-nav__list").slideToggle(50);
});
// header my account (for non-mobile)
$(".header-nav__link--my-account").on("click", function(){
if ($('.header-nav__toggle').is(':hidden')) {
$(this).toggleClass("is-active");
$(".header-my-account__list").slideToggle(50);
}
});
// faq
$(".faq-entry__title").on("click", function(){
$(this).children().toggleClass("is-active");
$(this).siblings().slideToggle(50);
});
});
styles/_box-sizing.less 0 → 100644
View file @ 155b4124
/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
styles/_clearfix.less 0 → 100644
View file @ 155b4124
// Clearfix
//
// For modern browsers
// 1. The space content is one way to avoid an Opera bug when the
// contenteditable attribute is included anywhere else in the document.
// Otherwise it causes space to appear at the top and bottom of elements
// that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using
// `:before` to contain the top-margins of child elements.
//
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
.clearfix {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
styles/_faq.less 0 → 100644
View file @ 155b4124
body.faq {
.header {
background-image: url("http://placehold.it/1920x409/333366?text=bg");
}
.main {
background-image: url("http://placehold.it/1920x1337/101213?text=bg");
}
}
.l-wrapper-faq {
.l-wrapper-main();
padding-bottom: 20px;
}
// followings are for cancelling margins by .field in web page renderer.
.field .l-wrapper-faq {
margin-left: -16px;
margin-right: -16px;
}
.faq-side {
padding: 16px;
}
.faq-body {
padding: 16px;
}
.faq-menu__list {
padding: 0;
}
.faq-menu__item {
padding: 0;
list-style: none;
width: 80%;
margin-bottom: 10px;
background-color: @bg-color3;
border-radius: 40px;
}
.faq-menu__item__selected {
&:extend(.faq-menu__item);
background-color: @hi-color1;
width: 90%;
}
.faq-menu__link {
display: block;
padding: 10px 20px;
color: @fg-color1;
text-decoration: none;
}
.faq-entry {
margin-top: 36px;
&:first-child {
margin-top: 0;
}
}
.faq-entry__title {
border-bottom: 1px solid @fg-color1;
cursor: pointer;
font-size: 18px;
padding-bottom: 8px;
padding-right: 24px;
}
.faq-entry__toggle {
float: right;
font-weight: normal;
margin-right: -30px;
&:before {
font-family: 'FontAwesome';
color: @fg-color1;
content: '\f067'; // fa-plus
margin:0 10px 0 -15px;
}
&.is-active {
&:before {
content: '\f068'; // fa-minus
}
}
}
.faq-entry__content {
display: none;
color: @fg-color2;
margin-bottom: 24px;
a {
color: inherit;
text-decoration: underline;
&:active,
&:hover {
color: white;
}
}
}
.faq-side {
.grid-responsive-column(4);
}
.faq-body {
.grid-responsive-column(8);
}
@media (max-width: @screen-sm-max) {
.faq-menu__item {
width: 100%;
text-align: center;
}
.faq-menu__item__selected {
width: 100%;
}
}
styles/_footer.less 0 → 100644
View file @ 155b4124
.l-wrapper-footer {
.l-wrapper-main();
}
.footer-information {
background: @bg-color2;
}
.footer-copyright {
padding: 20px 10px;
color: @fg-color1;
}
.footer-links-box {
@media (min-width: @screen-md-min) {
width: 70%;
float: right;
}
}
.footer-logo {
@media (min-width: @screen-md-min) {
width: 30%;
float: left;
}
padding: 30px 16px;
}
.footer-logo__image {
max-width: 100%;
display: inline-block;
}
.footer-logo__phone {
margin: 20px 0 10px;
}
.footer-logo__phone-number {
padding: 10px 20px;
border-radius: 40px;
border: 1px solid @fg-color1;
color: @fg-color1;
}
.footer-logo__open-hours {
color: @fg-color1;
padding: 10px;
}
.footer-links {
@media (min-width: @screen-md-min) {
float: left;
width: 20%;
}
margin: 30px 5%;
}
.footer-links__title {
text-transform: uppercase;
color: @fg-color3;
border-bottom: 1px solid @fg-color3;
padding: 10px 0;
}
.footer-links__list {
padding-left: 16px;
}
.footer-links__item {
list-style: none;
:before {
font-family: 'FontAwesome';
color: @fg-color3;
content: '\f0da'; // fa-caret-right
margin:0 10px 0 -15px;
}
}
.footer-links__link {
color: @fg-color2;
text-decoration: none;
&:hover,
&:active {
color: white;
}
}
.footer-copyright__text {
width: 60%;
margin: 6px 16px 0;
float: left;
text-align: right;
}
.footer-copyright__image {
width: 30%;
float: left;
}
@media (max-width: @screen-sm-max) {
.footer-copyright__text {
float: right;
text-align: left;
margin: 0 16px;
}
}
styles/_grids.less 0 → 100644
View file @ 155b4124
/* --------------------------------------------------------------------
Simple grid mixin supporting one break point.
Usage :
<div class="my-row">
<div class="my-column">...</div>
<div class="my-column">...</div>
<div class="my-column">...</div>
</div>
Example 1 : 3 columns grid regardless the window width
.my-row {
.grid-row();
}
.my-column {
.grid-column(4); // 12 (total columns) / 3 (number of columns) => 4
}
Example 2 : 3 columns responsive grid
.my-row {
.grid-responsive-row();
}
.my-column {
.grid-responsive-column(4);
}
Example 3 : 3 columns responsive grid regardless the window width
.my-row {
.grid-gutter-row();
}
.my-column {
.grid-gutter-column(4);
}
Example 4 : 3 columns responsive grid with gutter
.my-row {
.grid-responsive-gutter-row();
}
.my-column {
.grid-responsive-gutter-column(4);
}
-------------------------------------------------------------------- */
// variables
@grid-total-columns: 12;
@grid-gutter: 16px;
@grid-break-point: 992px;
// mixin definitions.
.grid-row() {
.clearfix();
width: auto;
margin: 0;
}
.grid-responsive-row() {
.clearfix();
width: auto;
margin: 0;
}
.grid-column(@span) {
width: 100% * (@span / @grid-total-columns);
float: left;
}
.grid-responsive-column(@span, @grid-break-point:@grid-break-point) {
@media (min-width: @grid-break-point) {
.grid-column(@span);
}
}
.grid-gutter-row() {
.clearfix();
width: auto;
margin: 0 (-@grid-gutter / 2);
}
.grid-responsive-gutter-row() {
.clearfix();
width: auto;
@media (min-width: @grid-break-point) {
margin: 0 (-@grid-gutter / 2);
}
}
.grid-gutter-column(@span) {
.grid-column(@span);
padding: (@grid-gutter / 2);
}
.grid-responsive-gutter-column(@span, @grid-break-point:@grid-break-point) {
@media (min-width: @grid-break-point) {
.grid-gutter-column(@span);
}
}
styles/_header.less 0 → 100644
View file @ 155b4124
.l-wrapper-header {
.l-wrapper();
height: 409px;
}
.header-phone {
float: right;
font-size: 13px;
color: @fg-color1;
margin: 10px 5px 0 0;
}
.header-phone__image {
padding: 0 5px 0 10px;
vertical-align: bottom;
}
.header-logo {
clear: right;
float: left;
}
.header-nav {
.clearfix();
position: relative;
}
.header-nav__toggle {
display: none;
cursor: pointer;
}
.header-nav__list {
padding: 0;
float: right;
margin-top: 30px;
}
.header-nav__item {
list-style: none;
display: inline-block;
position: relative;
}
.header-nav__link {
display: block;
padding: 10px 0px;
margin-left: 16px;
text-decoration: none;
text-transform: uppercase;
color: @fg-color1;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.1em;
border-bottom: 2px solid transparent;
&:hover,
&:active {
color: white;
border-bottom-color: @hi-color1;
}
}
.header-nav__link--sign-up {
&:extend(.header-nav__link);
padding: 9px 20px;
border-radius: 40px;
border: 2px solid @fg-color1;
&:hover,
&:active {
color: white;
border-color: white;
}
}
.header-nav__link--login,
.header-nav__link--my-account {
&:extend(.header-nav__link);
padding: 9px 20px;
border-radius: 40px;
border: 2px solid @hi-color1;
background-color: @hi-color1;
color: @fg-color1;
text-transform: none;
text-transform: uppercase;
cursor: pointer;
&:hover,
&:active {
color: white;
background-color: @hi-color2;
border-color: @hi-color2;
}
&.is-active {
border-radius: 0 !important;
}
}
.header-nav__link--login {
text-transform: uppercase;
}
.header-my-account__list {
display: none;
position: absolute;
padding: 0;
right: 0;
background-color: @bg-color3;
}
.header-my-account__item {
list-style: none;
border-bottom: 1px solid @fg-color3;
&:last-child {
border-bottom: none;
}
}
.header-my-account__link {
display: block;
padding: 10px 20px;
text-decoration: none;
text-transform: uppercase;
color: @fg-color1;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.1em;
&:hover,
&:active {
color: white;
}
}
.header-title {
.clearfix();
clear: both;
margin: 50px 0 5px;
font-size: 54px;
color: white;
text-align: center;
}
.header-description {
margin: 5px 0;
font-size: 24px;
font-weight: 400;
color: @fg-color1;
text-align: center;
}
@media (max-width: @screen-sm-max) {
.l-wrapper-header {
height: 205px;
}
.header-phone {
display: none;
}
.header-logo {
height: 48px;
padding: 10px 16px;
background-color: @bg-color1;
margin-top: 0;
width: 100%;
}
.header-logo__image {
height: 100%;
}
.header-nav__toggle {
display: block;
position: absolute;
color: white;
top: 8px;
right: 8px;
font-size: 24px;
float: right;
&:before {
font-family: 'FontAwesome';
color: @fg-color1;
content: '\f0c9'; // fa-bars
margin:0 8px 0 -15px;
}
&.is-active {
&:before {
content: '\f00d'; // fa-times
}
}
}
.header-nav__list {
display: none;
width: 100%;
position: absolute;
top: 48px;
background-color: @bg-color3;
margin-top: 0;
}
.header-nav__item {
width: 100%;
}
.header-nav__link {
margin-right: 16px;
text-align: center;
border: none;
&:active,
&:hover {
color: white;
}
}
.header-nav__link--sign-up {
border: none;
}
.header-nav__link--login,
.header-nav__link--my-account {
background: inherit;
color: @fg-color3;
text-transform: uppercase;
border: none;
> .fa {
display: none;
}
&:active,
&:hover {
border-radius: 0;
background: inherit;
color: @fg-color3;
cursor: default;
}
}
.header-my-account__list {
display: block;
width: 100%;
text-align: center;
border-bottom: 2px solid @bg-color2;
}
.header-my-account__item {
border-bottom: none;
}
.header-my-account__link {
> .fa {
display: none;
}
}
.header-title {
font-size: 24px;
}
.header-description {
display: none;
}
}
styles/ie10-viewport-bug-workaround.css 0 → 100644
View file @ 155b4124
/*!
* IE10 viewport hack for Surface/desktop Windows 8 bug
* Copyright 2014-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/@-ms-viewport{width:device-width}@-o-viewport{width:device-width}@viewport{width:device-width}
\ No newline at end of file
styles/normalize.css 0 → 100644
View file @ 155b4124
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Change the default font family in all browsers (opinionated).
* 2. Prevent adjustments of font size after orientation changes in IE and iOS.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
* 2. Add the correct display in IE.
*/
article,
aside,
details, /* 1 */
figcaption,
figure,
footer,
header,
main, /* 2 */
menu,
nav,
section,
summary { /* 1 */
display: block;
}
/**
* Add the correct display in IE 9-.
*/
audio,
canvas,
progress,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Add the correct display in IE 10-.
* 1. Add the correct display in IE.
*/
template, /* 1 */
[hidden] {
display: none;
}
/* Links
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
}
/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/
a:active,
a:hover {
outline-width: 0;
}
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the bottom border in Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/* Forms
========================================================================== */
/**
* 1. Change font properties to `inherit` in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
select,
textarea {
font: inherit; /* 1 */
margin: 0; /* 2 */
}
/**
* Restore the font weight unset by the previous rule.
*/
optgroup {
font-weight: bold;
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Change the border, margin, and padding in all browsers (opinionated).
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Correct the text style of placeholders in Chrome, Edge, and Safari.
*/
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
styles/styles.less 0 → 100644
View file @ 155b4124
// global setting
body {
font-family: Cabin, sans-serif;
font-size: 14px;
color: @fg-color1;
background-color: @bg-color1;
.header {
background-image: url("http://placehold.it/1920x409/333366?text=bg");
background-repeat: no-repeat;
}
.main {
background-image: url("http://placehold.it/1920x1337/101213?text=bg");
background-repeat: repeat-y;
}
}
// useful setting
@import "_box-sizing";
// useful mixin
@import "_clearfix";
@import "_grids";
// variables
@fg-color1: #dcdfdf;
@fg-color2: darken(@fg-color1, 7%);
@fg-color3: darken(@fg-color1, 15%);
@bg-color1: #202427;
@bg-color2: lighten(@bg-color1, 5%);
@bg-color3: lighten(@bg-color1, 10%);
@bg-color4: lighten(@bg-color1, 15%);
@hi-color1: #9c278f;
@hi-color2: darken(@hi-color1, 7%);
@sub-color1: #93dffe; // light sky blue
@sub-color2: #6aaac4; // sky blue
@sub-color3: #c49123; // dark yellow
@sub-color4: #c35751; // dark red
@sub-color5: #ee3741; // light red
@screen-lg-min: 1184px;
@screen-md-min: 992px;
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
@total-columns: 12;
@break-point: @screen-md-min;
// background
body {
.header {
background-position: center top;
background-repeat: no-repeat;
}
.main {
background-position: center top;
background-repeat: repeat-y;
}
}
// Layouts
// .l-*
.l-wrapper {
.clearfix();
@media (max-width: @screen-sm-max) {
width: auto;
}
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
width: 960px;
}
@media (min-width: @screen-md-max) {
width: 1152px;
}
margin: 0 auto;
}
.l-wrapper-main {
.l-wrapper();
@media (min-width: @screen-md-max) {
width: 960px;
}
}
// Components
// .c-*
.c-button {
display: inline-block;
padding: 10px 20px;
text-decoration: none !important;
text-transform: uppercase;
border-radius: 40px;
background-color: @hi-color1;
color: white;
font-weight: bold;
&:hover,
&:focus {
background-color: @hi-color2;
}
}
.c-button--large {
&:extend(.c-button all);
padding: 15px 30px;
font-size: 110%;
}
.listbox,
.c-listbox {
width: 100%;
overflow-x: scroll;
border-collapse: collapse;
> thead > tr > th,
> tbody > tr > th {
color: @fg-color3;
background-color: @bg-color4;
padding: 10px;
text-align: left;
}
> tbody > tr > td {
color: @fg-color1;
background-color: @bg-color3;
border-top: 1px solid @bg-color4;
padding: 10px;
text-align: left;
}
.sort-button {
color: @fg-color3;
background: none;
border: none;
cursor: pointer;
&.sort-button-asc:after {
font-family: 'FontAwesome';
content: "\f0de"; // fa-sort-asc
}
&.sort-button-desc:after {
font-family: 'FontAwesome';
content: "\f0dd"; // fa-sort-desc
}
}
}
.listbox-page-navigation {
> button {
cursor: pointer;
&:after {
font-family: 'FontAwesome';
}
&.listbox_first_page:after {
content: "\f100"; // fa-angle-double-left
}
&.listbox_previous_page:after {
content: "\f104"; // fa-angle-left
}
&.listbox_next_page:after {
content: "\f105"; // fa-angle-right
}
&.listbox_last_page:after {
content: "\f101"; // fa-angle-double-right
}
> span.image {
display: none;
}
}
}
@media (max-width: @screen-sm-max) {
.c-listbox {
font-size: 90%;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
}
// header
@import "_header";
// footer
@import "_footer";
// faq
@import "_faq";
@media (max-width: @screen-sm-max) {
body {
.header,
.body {
background-size: @screen-md-min auto;
background-position-x: center;
}
}
.c-button--large {
&:extend(.c-button all);
padding: 10px 20px;
font-size: 100%;
}
}
// global
.is-invisible {
visibility: none;
height: 0;
}
.u-pre-wrap {
white-space:pre-wrap;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7