🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
Sign In

lite-css

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

lite-css - npm Package Compare versions

Comparing version
0.1.0
 to
0.1.1
+25
gulpfile.js
var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var sass=require('gulp-sass');
var minify = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var sequence = require('gulp-sequence');
require('gulp-stats')(gulp);
gulp.task('sass', function () {
gulp.src('src/lite.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
//.pipe(sourcemaps.write())
.pipe(gulp.dest('debug/'));
});
gulp.task('autoprefixer',function(){
gulp.src('debug/lite.css')
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('dist/'));
});
gulp.task('default',sequence('sass', 'autoprefixer'));
+59
README.md
# litecss
## api
* Core
* color
* theme
* text
* border
* bg
* assist.info
* assist.warning
* assist.danger
* assist.success
* size
* normal
* small
* big
* large
* state
* hover
* focus
* //active
* checked ()
* disabled
* reset
* Layout
* ui-grid
* ui-table
* ui-form
* Container
* ui-span
* ui-listview
* ui-frame
* ui-swiper
* Navigation
* ui-tabs
* ui-menu
* ui-pager
* ui-nav
* Status
* ui-badge
* ui-tag
* ui-tooltip
* Forms
* ui-text
* ui-textarea
* ui-checkbox
* ui-radio
* ui-select
* ui-switcher
* ui-button
* ui-range
* Widget
* ui-mask
* ui-loader
* ui-dialog
* ui-tips
* ui-calendar
* ui-time
src/core/ui-core.scss
+76
src/core/ui-reset.scss
@charset "UTF-8";
// todo: normalize.css
body {
margin: 0;
border: 0;
-webkit-touch-callout: none;
/*去除 ios safari <a>以及 <input> 选中时高亮显示，去除高亮后我们可以自定义样式*/
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
font-size: 14px;
font-family: PingFang SC, Microsoft YaHei, simhei, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
text-size-adjust: 100%;
color: #333;
}
a,
a:link {
-webkit-appearance: none;
text-decoration: none;
color: #333;
cursor: pointer;
}
div,
input,
select,
textarea, {
padding: 0;
margin: 0;
border-radius: 0;
outline-width: 0;
box-shadow: none;
font-size: 14px;
}
div,
select,
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"]{
-webkit-appearance: none;
}
input:focus,
select:focus,
textarea:focus {
outline-width: 0;
box-shadow: none;
}
input:required {
//去除 firefox 浏览器红色边框
box-shadow: none;
}
button {
border: none;
outline-width: 0;
box-shadow: none;
}
ul {
margin: 0;
padding: 0;
li {
margin: 0;
padding: 0;
list-style: none;
}
}
img {
border: none;
}
+27
src/form/ui-button.scss
@mixin uiButton ($height: 28px, $color: #ccc) {
min-width: 50px;
background-color: $color-theme;
height: $height;
border-radius: 2px;
color: #fff;
text-align: center;
display: inline-block;
cursor: pointer;
&.button-sm {
height: 25px;
font-size: 12px;
}
&.button-bg {
height: 40px;
font-size: 16px;
border-radius: 2px;
}
&.button-lg {
height: 50px;
font-size: 20px;
padding: 0 15px;
border-radius: 4px;
}
}
+9
src/form/ui-input.scss
@mixin uiInput () {
height: 20px;
line-height: 20px;
padding: 9px;
border: 1px solid $color-border;
font-size: 14px;
border-radius: 4px;
}
+24
src/form/ui-select.scss
@mixin uiSelect ($height: 40px, $color: #ccc) {
min-width: 20px;
height: $height;
line-height: $height;
display: inline-block;
width: 200px;
border: 1px solid $color-border;
position: relative;
cursor: pointer;
padding: 0 10px;
border-radius: 4px;
&::after {
content: "";
position: absolute;
border-right: 1px solid $color-border;
border-bottom: 1px solid $color-border;
width: 6px;
height: 6px;
transform: rotate(45deg);
right: 10px;
top: 50%;
margin-top: -5px;
}
}
+9
src/form/ui-textarea.scss
@mixin uiTextarea () {
min-height: 20px;
line-height: 20px;
padding: 9px;
border: 1px solid $color-border;
font-size: 14px;
border-radius: 4px;
}
+2
src/layout/ui-form.scss
@mixin uiForm () {
}
+67
src/layout/ui-table.scss
@mixin uiTable () {
width: 100%;
/*border-collapse: collapse;
border-spacing: 0;*/
border: 1px solid $color-border;
border-radius: 4px;
tr {
td {
border-right: 1px solid $color-border;
border-bottom: 1px solid $color-border;
padding: 8px;
height: 24px;
line-height: 24px;
text-align: left;
vertical-align: top;
position: relative;
&:last-child {
border-right: none;
}
}
th {
@extend td;
border-bottom: 1px solid $color-border;
background-color: #f5f5f5;
}
&:last-child {
td {
border-bottom: none;
}
}
}
&.table-form {
td {
&.has-name {
padding-left: 80px;
span {
position: absolute;
left: 0;
top: 0;
padding: 0 8px;
height: 40px;
line-height: 40px;
}
}
&.has-icon {
padding-right: 40px;
i {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
}
}
input {
height: 100%;
}
input,
textarea {
border: none;
width: 100%;
}
}
}
}
+38
src/lite.scss
$color-theme: #f4616d;
$color-border: #e8e8e8;
$color-text: #333;
$color-bg: #f7f7f7;
$color-info: #5285D6;
$color-warning: #ee9900;
$color-danger: #ea6858;
@import "core/ui-reset";
@import "form/ui-button";
@import "form/ui-select";
@import "form/ui-input";
@import "form/ui-textarea";
@import "layout/ui-table";
@import "layout/ui-form";
@import "wigdet/ui-calendar";
.ui-button {
@include uiButton();
}
.ui-select {
@include uiSelect(40px);
}
.ui-input {
@include uiInput();
}
.ui-textarea {
@include uiTextarea();
}
.ui-table {
@include uiTable();
}
.ui-form {
@include uiForm();
}
.ui-calendar {
@include uiCalendar();
}
+102
src/wigdet/ui-calendar.scss
@mixin uiCalendar ($width: 210px) {
border: 1px solid $color-border;
border-radius: 4px;
background-color: #fff;
display: inline-block;
.calendar-header {
clear: both;
height: 30px;
line-height: 34px;
text-align: center;
border-bottom: 1px solid $color-border;
}
.calendar-body {
width: $width;
display: inline-block;
.calendar-month {
clear: both;
height: 30px;
line-height: 34px;
text-align: center;
position: relative;
.btn-prev {
height: 40px;
width: 40px;
position: absolute;
left: 0px;
text-align: center;
cursor: pointer;
&::before {
content: "<";
}
}
.btn-next {
height: 40px;
width: 40px;
position: absolute;
right: 0px;
text-align: center;
cursor: pointer;
&::before {
content: ">";
}
}
}
ul.calendar-date {
padding: 0;
margin: 0;
width: 100%;
list-style: none;
li {
padding: 0;
margin: 0;
width: 14%;
height: 32px;
line-height: 30px;
float: left;
text-align: center;
position: relative;
cursor: pointer;
&:nth-of-type(7n + 1) {
width: 15%;
}
&:nth-of-type(7n) {
width: 15%;
}
&.state-checked {
background-color: $color-theme;
color: #fff;
}
&.state-disabled {
color: #ccc;
cursor: not-allowed;
&:hover {
background-color: #F2F2F2;
color: #999;
}
}
&:hover {
background-color: $color-theme;
color: #fff;
}
}
}
ul.calendar-week {
color: #aaa;
li {
cursor: default;
&:hover {
background-color: transparent !important;
color: #aaa !important;
}
}
}
}
.calendar-footer {
clear: both;
height: 36px;
line-height: 36px;
text-align: center;
border-top: 1px solid $color-border;
}
}
+13
-3
package.json
{
"name": "lite-css",
"version": "0.1.0",
"version": "0.1.1",
"description": "lite sass",
"main": "dist/core.scss",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"test": "echo \"Error: no test specified\" && exit 1",
"build": "gulp"
},
"author": "lijiakof",
"license": "ISC"
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-minify-css": "^1.2.4",
"gulp-sass": "^2.3.2",
"gulp-sequence": "^0.4.6",
"gulp-sourcemaps": "^2.2.0",
"gulp-stats": "0.0.3"
}
}
dist/lite.css→dist/lite.css