PHP Classes

File: css/style.scss

Recommend this page to a friend!
  Classes of René Mansveld   PHP HTML5 Form   css/style.scss   Download  
File: css/style.scss
Role: Auxiliary data
Content type: text/plain
Description: Uncompiled stylesheet
Class: PHP HTML5 Form
Display and validate a form that uses HTML5
Author: By
Last change:
Date: 4 months ago
Size: 16,413 bytes
 

Contents

Class file image Download
@font-face { font-family: 'Hack'; src: url('../fonts/hack-regular.eot'); src: url('../fonts/hack-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/hack-regular.otf') format('otf'), url('../fonts/hack-regular.svg#hack-regular') format('svg'), url('../fonts/hack-regular.ttf') format('truetype'), url('../fonts/hack-regular.woff') format('woff'), url('../fonts/hack-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } $text-color: rgb(0, 0, 0); $text-color-dark: rgb(204, 204, 204); $background-color: rgb(255, 255, 255); $background-color-dark: rgb(28, 28, 28); $input-fields-border: rgb(187, 187, 187); $disabled-text: rgb(127, 127, 127); $disabled-background: rgb(176, 176, 176); $correct: rgb(32, 255, 32); $correct-dark: rgb(16, 127, 16); $correct-dark-checkbox-radio: rgb(16, 143, 16); $wrong: rgb(255, 32, 32); $wrong-dark: rgb(178, 16, 16); $wrong-dark-checkbox-radio: rgb(194, 16, 16); $inputsFont: Hack,'Courier New',Courier,monospace; $breakpoints: ( "phone": 399px, "phone-wide": 479px, "phablet": 559px, "tablet-small": 639px, "tablet": 767px, 'footer': 861px, 'mobile': 942px, "tablet-wide": 1023px, 'logo': 1182px, "desktop": 1279px, "desktop-wide": 1439px ); @mixin box-shadow($args...) { -webkit-box-shadow: $args; -moz-box-shadow: $args; -ms-box-shadow: $args; -o-box-shadow: $args; box-shadow: $args; } @mixin media($width, $type: max) { @if map_has_key($breakpoints, $width) { $width: map_get($breakpoints, $width); } @media only screen and (#{$type}-width: #{$width}) { @content; } } * { box-sizing: border-box; } html.dark { color-scheme: dark; } body { margin: 0 4px; padding: 0; font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 18px; color: $text-color; background-color: $background-color; html.dark & { color: $text-color-dark; background-color: $background-color-dark; } } .center { margin: 0 auto; max-width: 1200px; } .left { float: left; } .right { float: right; } .halfWidth { width: calc(50% - 8px); @include media('mobile') { width: 100%; } } .clear { clear: both; } ul.cloud { margin: 0; padding: 0; list-style: none; & li.function { display: inline-block; margin: 0 18px 12px 0; } } #DarkBackground { display: none; position: fixed; z-index: 3; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .85); } #PopupWindow { display: none; position: fixed; z-index: 210; margin-left: 0; margin-top: 0; left: 50%; top: 50%; background-color: $background-color; border: 8px solid $background-color; box-shadow: 0 0 20px $background-color; html.dark & { background-color: $background-color-dark; border: 8px solid $text-color-dark; box-shadow: 0 0 20px $disabled-text; } & #Content { position: relative; height: 100%; overflow: auto; } & #Content div { display: block; } & #Content img { max-width: 100%; max-height: 100%; vertical-align: top; html.dark & { filter: brightness(90%); } } & #ClosePopup { position: absolute; top: -22px; right: -22px; z-index: 220; } } .message, .error, .notice { margin: 20px 0px; padding: 8px; overflow: hidden; font-weight: bold; text-align: center; } .message { color: #0C0; background-color: rgba(0, 196, 0, 0.25); border: 1px solid #0C0; } .error { color: #F00; background-color: rgba(255, 0, 0, 0.25); border: 1px solid #F00; } .notice { color: #F60; background-color: rgba(255, 102, 0, 0.247); border: 1px solid #F60; } .row { clear: both; margin-bottom: 10px; &:last-of-type { margin-bottom: 0px; } .hiddens { display: none; } label:not(.description) { display: block; } label.description:hover { filter: brightness(200%); html.dark & { filter: brightness(80%); } } input[type=text], input[type=password], input[type=number], input[type=email], input[type=date], input[type=time], input[type=tel], input[type=url], input[type=file], textarea, select, .radiogroup, .checkboxgroup { width: 100%; font: inherit; font-family: $inputsFont; font-size: .9em; border: 1px solid $input-fields-border; &:disabled { color: $disabled-text; background-color: $disabled-background; } } input[type=checkbox], input[type=radio] { margin-left: 0; } .radiogroup, .checkboxgroup { font: inherit; } .checkboxgroup { border: 0 none; } .correct { border-color: $correct !important; @include box-shadow(0 0 4px 3px $correct); html.dark & { border-color: $correct-dark !important; @include box-shadow(0 0 5px 4px $correct-dark); } } input[type=radio].correct, input[type=checkbox].correct { border: 0px none; @include box-shadow(none); &::after { border-color: $correct !important; @include box-shadow(0 0 4px 3px $correct); html.dark & { border-color: $correct-dark-checkbox-radio !important; @include box-shadow(0 0 5px 4px $correct-dark-checkbox-radio); } } } .wrong { border-color: $wrong !important; @include box-shadow(0 0 4px 3px $wrong); html.dark & { border-color: $wrong-dark !important; @include box-shadow(0 0 5px 4px $wrong-dark); } } input[type=radio].wrong, input[type=checkbox].wrong { border-color: transparent; @include box-shadow(none); &::after { border-color: $wrong !important; @include box-shadow(0 0 4px 3px $wrong); html.dark & { border-color: $wrong-dark-checkbox-radio !important; @include box-shadow(0 0 5px 4px $wrong-dark-checkbox-radio); } } } textarea { height: calc((4 * 1.2em) + 4px); } input[type=submit], input[type=reset], input[type=button] { font-size: .9em; cursor: pointer; @include media('phone-wide') { font-size: 1em; } } &.disabled { label { text-decoration: line-through; text-decoration-thickness: 2px; } } #Save, #Cancel, input.save, input.cancel, input.empty, input.copy, input.add, input.delete { margin-top: 4px; height: 24px; font: inherit; color: $text-color; background-color: transparent; border: 0px none; cursor: pointer; html.dark & { color: $text-color-dark; } } #Save:disabled, #Cancel:disabled, input.save:disabled, input.cancel:disabled, input.empty:disabled, input.copy:disabled, input.add:disabled, input.delete:disabled { color: $disabled-text !important; background-blend-mode: luminosity; cursor: default !important; } #Save, input.save { padding-left: 17px; background: url('../images/check.png') left center no-repeat; } #Cancel, input.cancel { padding-left: 16px; background: url('../images/cancel.png') left center no-repeat; } input, input::before, select, textarea { border: 1px solid $input-fields-border !important; } textarea { margin-bottom: 1px; vertical-align: bottom; } textarea.high, select.high { height: calc((10 * 1.2em) + 4px); } input[type=submit], input[type=reset], input[type=button] { border: 0 none !important; box-shadow: none; } input[type=text], input[type=password], input[type=number], input[type=email], input[type=date], input[type=time], input[type=tel], input[type=url], input[type=file], input[type=checkbox], input[type=radio], input[type=range], input[type=color], textarea, select, .radiogroup, .checkboxgroup { color: $text-color; background-color: transparent; border-radius: 2px; html.dark & { color-scheme: dark; color: $text-color-dark; } } select { option, optgroup { background-color: $background-color; html.dark & { background-color: $background-color-dark; } } &[multiple] { option, optgroup { background-color: transparent !important; } } } input[type=checkbox] { position: relative; &::after { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 2px; } } input[type=radio] { position: relative; &::after { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; } } input[type=file] { border: 0 none !important; } } .desktop { display: initial !important; @include media('mobile') { display: none !important; } } .mobile { display: none !important; @include media('mobile') { display: initial !important; } } span.mobile { @include media('mobile') { display: inline !important; } } form { margin: 0; .row:not(.wide) { margin-bottom: 6px; label:not(.description) { float: left; padding-top: 2px; width: 250px; min-height: 1em; } input[type=text], input[type=password], input[type=number], input[type=email], input[type=date], input[type=time], input[type=tel], input[type=url], input[type=file], input[type=color], textarea, select, .radiogroup, .checkboxgroup, div.input { width: calc(100% - 250px); } input[type=range] { width: calc(100% - 250px - 70px); } div.input { margin-left: 250px; } @include media('tablet') { label, label:not(.description) { float: none; width: 100%; br { content: ''; &::after { content: ' '; } } } input[type=text], input[type=password], input[type=number], input[type=email], input[type=date], input[type=time], input[type=tel], input[type=url], input[type=file], textarea, select, div.input { width: 100%; } input[type=range] { width: calc(100% - 70px); } div.input { margin-left: 0; } } } .box .row { label:not(.description) { width: 239px; } input[type=text], input[type=password], input[type=number], input[type=email], input[type=date], input[type=time], input[type=tel], input[type=url], input[type=file], textarea, select { width: calc(100% - 239px); } @include media('tablet') { label, label:not(.description) { float: none; width: 100%; @include media('mobile') { br { content: ''; &::after { content: ' '; } } } } input[type=text], input[type=password], input[type=number], input[type=email], input[type=date], input[type=time], input[type=tel], input[type=url], input[type=file], textarea, select { width: 100%; } } } } pre { margin: 6px 0; padding-left: 12px; font-family: Hack, 'Courier New', Courier, monospace; font-size: 14px; line-height: 1.1em; &::before { content: '>'; position: absolute; margin-left: -12px; } } .function-description { display: none; position: absolute; left: 0; top: 0; font-family: Hack, 'Courier New', Courier, monospace; font-size: 15px; .line { margin-left: 2.45em; text-indent: -2.45em; white-space: pre-wrap; } /* Colorizing PHP comments */ &.phpcomment { .line { color: rgb(0, 128, 0); html.dark & { color: rgb(95, 150, 80); } .keyword { color: rgb(0, 0, 255); html.dark & { color: rgb(55, 140, 200); } } .class { color: rgb(38, 127, 152); html.dark & { color: rgb(58, 201, 176); } } } } /* Coloring PHP code */ &.phpcode { .line { color: $text-color; html.dark & { color: $text-color-dark; } .php { color: rgb(136, 39, 53); html.dark & { color: rgb(52, 140, 214); } } .constant { color: rgb(0, 0, 255); html.dark & { color: rgb(52, 140, 214); } } .operator { color: rgb(175, 0, 219); html.dark & { color: rgb(218, 144, 212); } } .string { color: rgb(163, 21, 21); html.dark & { color: rgb(225, 145, 110); } } .variable { color: rgb(0, 16, 128); html.dark & { color: rgb(140, 225, 255); } } .function { color: rgb(121, 94, 38); html.dark & { color: rgb(220, 220, 170); } } .class { color: rgb(38, 127, 152); html.dark & { color: rgb(58, 201, 176); } } .number { color: rgb(9, 134, 88); html.dark & { color: rgb(200, 225, 170); } } } } }