Main

main.css provides base structure and common interfaces around Loupe.

Box Model

Loupe set 'border-box' box model in universal selector. So, if you want to use the other box model (like content-box), you need to set style explicitly.

Configuration

Loupe set the basic Styles in body element, you can change it by changing the following configurations.

  • Font Size ($font-size) : 100% (equal to 16px in most browsers);
  • Font Color ($font-color) : #444444;
  • Background Color ($bg-color) : #f6f5f4

rem value is assigned according to the Modulear Scale calicuration More deitails, check _helpers.scss.

Base Structure

Loupe has two main area, #menu and #app.

  • #menu element contains menus for common operaiton in loupe, selecting blog, singout and so on.
  • #app element has two main parts, #header and #main
  • #header usually has general information about screen and global navigation.
  • #main usually has main contents around Card which is main feature in Loupe.
    #main has max-width 450px as a default. You can change it with $content-max-width paramater.
    When window width is smaller than $content-max-width, use $content-min-width(default is 320px) instead.
@charset "UTF-8";
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  outline: none;
}

html {
  font-size: 100%;
}

body {
  background-color: #f6f5f4;
  color: #444444;
  font-family: "Helvetica Neue", sans-serif;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body.hide {
  overflow: hidden;
}

textarea,
input {
  font-size: 16px;
  font-size: 1rem;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

.container {
  height: 100%;
  position: absolute;
  width: 100%;
}

.main-container {
  -webkit-overflow-scrolling: touch;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  background-color: #f6f5f4;
  overflow: auto;
  padding: 0 0 1px 0;
  top: 60px;
  z-index: 100;
}

.main {
  display: block;
  margin: 0 auto;
  width: 450px;
}
.main > div {
  padding-bottom: 1px;
}

@media screen and (max-width: 450px) {
  .main {
    width: 100%;
    min-width: 320px;
  }
}
.move #header {
  -webkit-transition: all 0.3s ease;
  -webkit-transition-delay: 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  -webkit-transform: translate3d(0, 0, 0);
}
.move .main-container {
  -webkit-transition: left 0.3s ease;
  -webkit-transition-delay: 0s;
  -moz-transition: left 0.3s ease 0s;
  -o-transition: left 0.3s ease 0s;
  transition: left 0.3s ease 0s;
  -webkit-transform: translate3d(0, 0, 0);
  overflow: hidden;
}
.move #app .container {
  overflow: hidden;
}

Loading

.loading class shows loading image on background.

.loading class is positioned absolutely, so if you want to show loading image in restricted area, set position:relative to parent block.

.loading,
.content-loading {
  background-color: #f3f3f5;
  background-color: rgba(243, 243, 245, 0.8);
  background-image: url("../assets/images/loading.gif");
  background-repeat: no-repeat;
  background-size: 45px 45px;
  background-position: center center;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  z-index: 300;
}

#app-building {
  background-color: #f6f5f4;
  background-color: rgba(246, 245, 244, 0.5);
  z-index: 2000;
}

Loupe Circle

loupe circle is the circle like loupe with CSS

You can customize circle based on loupe circle as follows.

Note: loupe circle uses border-radius property which is not supported in IE8

.circle {
  background-color: white;
  border: 6px solid white;
  display: block;
  height: 44px;
  overflow: hidden;
  width: 44px;
  -webkit-border-radius: 1000px;
  -moz-border-radius: 1000px;
  -ms-border-radius: 1000px;
  -o-border-radius: 1000px;
  border-radius: 1000px;
}

.circle-inner {
  background-color: #e6e6e6;
  background-position: center center;
  background-size: cover;
  border: 1px solid #dddddd;
  display: block;
  height: 100%;
  width: 100%;
  -webkit-border-radius: 1000px;
  -moz-border-radius: 1000px;
  -ms-border-radius: 1000px;
  -o-border-radius: 1000px;
  border-radius: 1000px;
}

Message

If you want to some message in the card or anywhere, you can use .message class as follows.

.message {
  border: 1px solid #979797;
  -webkit-box-shadow: white 0 1px 0 0, rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
  -moz-box-shadow: white 0 1px 0 0, rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
  box-shadow: white 0 1px 0 0, rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
  color: #666;
  display: block;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
  -webkit-border-radius: 0.488rem;
  -moz-border-radius: 0.488rem;
  -ms-border-radius: 0.488rem;
  -o-border-radius: 0.488rem;
  border-radius: 0.488rem;
}
.message .message-inner {
  background-color: gainsboro;
  background-color: rgba(127, 127, 127, 0.2);
  display: block;
  padding: 16px;
  padding: 1rem;
  word-break: break-all;
}

OverLay

If you want to cover some block to prevent from user operation, you can use .overlay class as follows.

You can also use .message class in overlay block

If you want to add a button in overlay block, .with-button class helps to control .overlay-content heigth

.overlay {
  background-color: #ededf0;
  background-color: rgba(243, 243, 245, 0.95);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  z-index: 200;
  padding: 16px;
  padding: 1rem;
}
.overlay .overlay-inner {
  height: 100%;
}
.overlay .overlay-content {
  display: table;
  height: 100%;
  margin: 0;
  text-align: center;
  width: 100%;
}
.overlay .overlay-content .overlay-content-inner {
  display: table-cell;
  vertical-align: middle;
}
.overlay.with-button .overlay-content {
  height: 66.666666%;
}