|
@ -7,13 +7,13 @@ $white: #FFF !default; |
|
|
$black: #333 !default; |
|
|
$black: #333 !default; |
|
|
|
|
|
|
|
|
.pen-icon { |
|
|
.pen-icon { |
|
|
font-size: 16px; |
|
|
font-size: 1.15em; |
|
|
line-height: 40px; |
|
|
line-height: 2.5em; |
|
|
min-width: 20px; |
|
|
min-width: 1.25em; |
|
|
font-style: normal; |
|
|
font-style: normal; |
|
|
display: block; |
|
|
display: block; |
|
|
float: left; |
|
|
float: left; |
|
|
padding: 0 10px; |
|
|
padding: 0 0.625em; |
|
|
height: 2.2em; |
|
|
height: 2.2em; |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
color: $white; |
|
|
color: $white; |
|
@ -31,8 +31,8 @@ $black: #333 !default; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.pen-menu, .pen-input { |
|
|
.pen-menu, .pen-input { |
|
|
font-size: 14px; |
|
|
font-size: 1.16rem; |
|
|
line-height:1; |
|
|
line-height: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.pen-input { |
|
|
.pen-input { |
|
@ -42,7 +42,7 @@ $black: #333 !default; |
|
|
left: 0; |
|
|
left: 0; |
|
|
top: 0; |
|
|
top: 0; |
|
|
height: 2.6em; |
|
|
height: 2.6em; |
|
|
line-height: 20px; |
|
|
line-height: 125em; |
|
|
background-color: $black; |
|
|
background-color: $black; |
|
|
color: $white; |
|
|
color: $white; |
|
|
border: none; |
|
|
border: none; |
|
@ -56,15 +56,15 @@ $black: #333 !default; |
|
|
.pen-textarea { |
|
|
.pen-textarea { |
|
|
display: block; |
|
|
display: block; |
|
|
background: $white; |
|
|
background: $white; |
|
|
padding: 20px; |
|
|
padding: 1.25em; |
|
|
} |
|
|
} |
|
|
.pen textarea { |
|
|
.pen textarea { |
|
|
font-size: 14px; |
|
|
font-size: 2.86em; |
|
|
border: none; |
|
|
border: none; |
|
|
background: none; |
|
|
background: none; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
_height: 200px; |
|
|
_height: 70em; |
|
|
min-height: 200px; |
|
|
min-height: 70em; |
|
|
resize: none; |
|
|
resize: none; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
@ -78,12 +78,13 @@ $black: #333 !default; |
|
|
|
|
|
|
|
|
.pen-menu { |
|
|
.pen-menu { |
|
|
white-space: nowrap; |
|
|
white-space: nowrap; |
|
|
box-shadow:1px 2px 3px -2px #222; |
|
|
box-shadow: 1px 2px 3px -2px #222; |
|
|
background: #333; |
|
|
background: #333; |
|
|
background-image: linear-gradient(to bottom, #222, #333); |
|
|
background-image: linear-gradient(to bottom, #222, #333); |
|
|
opacity: 0.9; |
|
|
opacity: 0.9; |
|
|
position: fixed; |
|
|
position: fixed; |
|
|
height: 5.2em; |
|
|
height: 5.2em; |
|
|
|
|
|
width: 18.4em; |
|
|
border: 1px solid #333; |
|
|
border: 1px solid #333; |
|
|
border-radius: 0.5em; |
|
|
border-radius: 0.5em; |
|
|
display:none; |
|
|
display:none; |
|
@ -210,3 +211,17 @@ $black: #333 !default; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@include breakpoint(0, medium) { |
|
|
|
|
|
.pen-menu { |
|
|
|
|
|
top: 0 !important; |
|
|
|
|
|
left: 0 !important; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
font-size: 5.1vw; |
|
|
|
|
|
border-radius: 0; |
|
|
|
|
|
|
|
|
|
|
|
@include after { |
|
|
|
|
|
display: none; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|