Skip to content

Instantly share code, notes, and snippets.

@rymizuki
Created April 15, 2015 00:17
Show Gist options
  • Save rymizuki/e4a760a47632b5b1d164 to your computer and use it in GitHub Desktop.
Save rymizuki/e4a760a47632b5b1d164 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
div.wrapper
article.contents
header.contents__header
h1.title title
div.contents__body
section.section
h3.section__title 超長い文章
div.section__body.iscroll-content
div.scroller
p ぶんしょう
div.contents__action
button.btn-submit(type="button") キャンセル
button.btn-cancel(type="button") 決定
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----
* {
margin: 0;
padding: 0;
box-sizing: border-box;
line-height: 1;
}
// layouts
.wrapper {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
}
.contents {
position: absolute;
top: 10px;
left: 0;
right: 0;
margin: auto;
padding: 10px;
background: #fff;
// 大事なのここから
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
width: 420px;
height: 200px;
%fixed-content {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}
&__header {
@extend %fixed-content;
height: 40px;
}
&__body {
position: relative;
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
$_body-header-height: 20px;
.section {
position: absolute;
width: 100%;
height: 100%;
padding-top: $_body-header-height;
&__title {
position: relative;
top: -$_body-header-height;
height: $_body-header-height;
}
.iscroll-content {
position: relative;
top: -$_body-header-height;
height: 100%;
width: 100%;
background: rgba(255, 0, 0, 0.1);
}
}
}
&__action {
@extend %fixed-content;
height: 10px;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
line-height: 1;
}
.wrapper {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
}
.contents {
position: absolute;
top: 10px;
left: 0;
right: 0;
margin: auto;
padding: 10px;
background: #fff;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
width: 420px;
height: 200px;
}
.contents .contents__header, .contents .contents__action {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}
.contents__header {
height: 40px;
}
.contents__body {
position: relative;
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
}
.contents__body .section {
position: absolute;
width: 100%;
height: 100%;
padding-top: 20px;
}
.contents__body .section__title {
position: relative;
top: -20px;
height: 20px;
}
.contents__body .section .iscroll-content {
position: relative;
top: -20px;
height: 100%;
width: 100%;
background: rgba(255, 0, 0, 0.1);
}
.contents__action {
height: 10px;
}
<div class="wrapper">
<article class="contents">
<header class="contents__header">
<h1 class="title">title</h1>
</header>
<div class="contents__body">
<section class="section">
<h3 class="section__title">超長い文章</h3>
<div class="section__body iscroll-content">
<div class="scroller">
<p>ぶんしょう</p>
</div>
</div>
</section>
</div>
<div class="contents__action">
<button type="button" class="btn-submit">キャンセル</button>
<button type="button" class="btn-cancel">決定</button>
</div>
</article>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment