Skip to content

GitLab

Commit 7457b5de authored by vikas-parashar's avatar vikas-parashar
Browse files

buttons and forms done

parent ccbdf9f8
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 231 additions and 301 deletions
plonetheme/spot/theme/css/main.css
View file @ 7457b5de
This diff is collapsed.
plonetheme/spot/theme/less/main.less
View file @ 7457b5de
......@@ -97,7 +97,7 @@
@import "partials/navbar.less";
// @import "partials/header.less";
@import "partials/search.less";
// @import "partials/portlets.less";
@import "partials/portlets.less";
@import "partials/inputs.less";
@import "partials/buttons.less";
@import "partials/alerts.less";
......
plonetheme/spot/theme/less/partials/buttons.less
View file @ 7457b5de
......@@ -19,7 +19,7 @@
padding: 12px;
border: 0;
border-radius: 0;
box-shadow: none;
box-shadow: 0 2px 4px @gray;
font-weight: 700;
margin-top: 10px;
......@@ -29,24 +29,24 @@
background-color: darken(@button-default, 10%);
border: 0;
outline: 0;
box-shadow: 0 1px 4px @gray;
}
}
}
.context{
background-color: @button-context;
background-color: @button-context !important;
font-size: 18px;
padding: 12px;
border: 0;
border: 0 !important;
border-radius: 0;
box-shadow: none;
font-weight: 700;
margin-top: 10px;
&:hover,
&:focus{
background-color: darken(@button-context, 10%);
background-color: darken(@button-context, 10%) !important;
border: 0;
outline: 0;
}
......@@ -54,38 +54,37 @@
.standalone{
background-color: @button-standalone;
background-color: @button-standalone !important;
color: @white-faded;
font-size: 18px;
padding: 12px;
border: 0;
border: 0 !important;
border-radius: 0;
box-shadow: none;
font-weight: 700;
margin-top: 10px;
&:hover,
&:focus{
background-color: darken(@button-standalone, 10%);
background-color: darken(@button-standalone, 10%) !important;
border: 0;
outline: 0;
color: @white-faded;
}
}
.destructive{
background-color: @button-destructive;
background-color: @button-destructive !important;
font-size: 18px;
padding: 12px;
border: 0;
border-radius: 0;
box-shadow: none;
border-radius: 0 !important;
font-weight: 700;
margin-top: 10px;
&:hover,
&:focus{
background-color: darken(@button-destructive, 5%);
background-color: darken(@button-destructive, 5%) !important;
border: 0;
outline: 0;
}
......
plonetheme/spot/theme/less/partials/portlets.less 0 → 100644
View file @ 7457b5de
/* ==========================================================================
PORTLETS
========================================================================== */
/* DEFAULT STYLING FOR ALL PORTLETS
========================================================================== */
aside {
section.portlet {
margin-bottom: 20px;
border: 1px solid @gray-light;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) ;
border-radius: 0;
/* portlet header */
.portletHeader{
color: @color-portlet-header;
background-color: @bg-portlet-header;
text-align: center;
text-transform: uppercase;
font-weight: 500;
text-shadow: none;
font-family: @font-raleway;
a{
color: @color-portlet-header;
&:hover{
}
}
}
.portletContent{
// background-color: transparent;
}
/* portlet item and content */
.portletItem{
a{
color: @color-portlet-link;
&:before{
content: "/2014";
position: absolute;
left: 12px;
}
}
}
// .portletContent{
// padding: 15px 10px;
// font-size: 18px;
// list-style: none;
// form{
// margin: 5px;
// }
// }
// /* portlet footer */
// .portletFooter{
// font-size: 16px;
// background: @gray-light;
// padding: 10px 20px;
// border-top: 1px solid @gray-dark;
// }
}
}
/* News, RSS, Events, Recent portlets
========================================================================== */
.portletNews,
.portletRss,
.portletEvents,
.portletRecent{
section.portletContent{
ul{
li{
a{
color: @color-portlet-link;
&:before{
content: "—";
position: absolute;
left: 12px;
font-size: inherit;
margin-top: 0;
color: @color-portlet-link;
}
&:hover{
color: darken(@color-portlet-link, 10%)
}
}
}
}
}
}
/* NavigationTree Portlet
========================================================================== */
.portletNavigationTree{
border: 0 !important;
box-shadow: none !important;
.portletContent{
background-color: transparent;
ul.navTree{
list-style: none;
li.navTreeItem{
a{
background-color: @white-faded;
font-size: 16px;
text-transform: uppercase;
color: @color-portlet-link;
}
}
}
}
}
/* Search Portlet
========================================================================== */
.portletSearch{
// .portletContent{
// padding: 15px 0 !important;
// .LSBox input:not([type="submit"]){
// color: @gray-dark;
// &:focus{
// color: @gray-dark;
// }
// }
// .searchButton{
// margin-left: 2px !important;
// }
// }
}
/* Control Panel Portlets
========================================================================== */
.portletSiteSetup {
// nav ul li{
// border-bottom: none ;
// }
// a {
// font-size: 16px;
// text-decoration: none !important;
// }
}
.managedPortletActions{
margin-top: -15px;
}
plonetheme/spot/theme/less/partials/variables.less
View file @ 7457b5de
......@@ -28,13 +28,16 @@
@bg-navbar-inverse: @gray-darker;
@bg-navbar-link: @tomato;
@bg-footer: @gray-darker;
@bg-portlet-header: @gray-faded;
/* Font colors */
@color-body: @gray;
@color-headings: @gray-dark;
@color-link: @orange;
@color-link-hover: @gray;
@color-icon: @tomato;
@color-body: @gray;
@color-headings: @gray-dark;
@color-link: @orange;
@color-link-hover: @gray;
@color-icon: @tomato;
@color-portlet-header: darken(@gray-darkest, 0%);
@color-portlet-link: @blue;
/* border colors */
@border-navbar-inverse: @gray-darker;
......
plonetheme/spot/theme/less/spot.css
View file @ 7457b5de
......@@ -6,7 +6,7 @@
* Version: 1.0
* URL: http://blacktie.co
*/
/* FONTS */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,900);
@import url(http://fonts.googleapis.com/css?family=Raleway:400,300,700,900);
......@@ -22,14 +22,14 @@ body {
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
margin-top: 70px;
}
/* Titles */
h1, h2, h3, h4, h5, h6 {
font-family: "Raleway";
font-weight: 300;
font-weight: 500;
color: #333;
}
......@@ -111,37 +111,17 @@ a:after {
letter-spacing: 1px;
}
/*TILT*/
.tilt {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.tilt:hover {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
/* ==========================================================================
Wrap Sections
========================================================================== */
#headerwrap {
background: url(../img/header-bg.jpg) no-repeat center top;
margin-top: -10px;
padding-top:20px;
text-align:center;
background-attachment: relative;
background-position: center center;
min-height: 500px;
width: 100%;
background: url(../img/header-bg.jpg) no-repeat center top;
margin-top: -10px;
padding-top:20px;
text-align:center;
background-attachment: relative;
background-position: center center;
min-height: 500px;
width: 100%;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
......@@ -154,259 +134,18 @@ a:after {
}
#headerwrap h1 {
margin-top: 100px;
color: white;
font-size: 70px;
font-weight: 300;
letter-spacing: 3px;
}
#headerwrap h2 {
color: white;
font-size: 40px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
/* Dark Grey Wrap */
#dg {
background: #e0e0e0;
padding-top: 70px;
padding-bottom: 70px;
text-align: center;
}
#dg h4 {
font-weight: 700;
}
/* Light Grey */
#lg {
background: #ebebeb;
padding-top: 70px;
padding-bottom: 70px;
text-align: center;
}
#lg h4 {
font-weight: 700;
}
/* Red Wrap */
#r {
background: #ff7878;
padding-top: 35px;
padding-bottom: 35px;
}
#r h4 {
color: white;
font-weight: 700;
}
#r p {
color: white;
}
/* Blue Wrap */
#blue {
background: #3498db;
padding-top: 35px;
padding-bottom: 35px;
}
#blue h4 {
color: white;
font-weight: 700;
}
#blue p {
color: white;
}
/* Footer Wrap */
#f {
background: #2d2d2d;
padding-top: 30px;
padding-bottom: 30px;
}
#f i {
color: #bdbdbd;
font-size: 30px;
padding: 20px;
}
#f i:hover {
color: #ff7878;
}
/****** SECTIONS *****/
.w {
padding-top: 35px;
}
.w h4 {
font-weight: 700;
}
.w i {
color: #ff7878;
font-size: 30px;
}
.wb {
padding-top: 35px;
margin-bottom: 0px;
}
.wb h4 {
font-weight: 700;
}
.desc {
padding-top: 35px;
}
.desc h4 {
font-weight: 700;
}
.desc i {
color: #ff7878;
font-size: 12px;
padding: 5px;
}
/***** MODAL CONTACT *****/
.modal-content {
border-radius: 0px;
}
.modal-header {
background: #bdbdbd;
color: white;
}
.modal-header h4 {
font-weight: 700;
}
.modal-body {
background: #f2f2f2;
font-family: "Lato";
margin-top: 100px;
color: white;
font-size: 70px;
font-weight: 300;
font-size: 16px;
color: #555;
}
.modal-footer {
background: #f2f2f2;
margin-top: 0px;
}
/* ==========================================================================
Pricing Tables
========================================================================== */
.pricing-option {
padding-bottom: 40px;
letter-spacing: 3px;
}
.pricing-option .pricing-top {
position: relative;
background: #222;
#headerwrap h2 {
color: white;
text-align: center;
font-weight: bold;
padding: 40px 20px 30px 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.pricing-option .pricing-top .special-label {
display: block;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: #1abc9c;
font-size: 40px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 15px;
font-weight: bold;
padding: 3px 0;
}
.special .pricing-top {
background: black;
}
.pricing-option .pricing-edition {
text-transform: uppercase;
display: block;
font-size: 25px;
letter-spacing: 8px;
}
.pricing-option .price {
display: inline-block;
position: relative;
}
.pricing-option .price sup {
position: absolute;
top: 50px;
left: -10px;
font-size: 24px;
}
.pricing-option .price .price-amount {
font-size: 108px;
letter-spacing: -4px;
}
.pricing-option .price small {
position: relative;
left: -10px;
font-size: 18px;
}
.pricing-option ul {
list-style: none;
margin: 0;
background: #eee;
text-align: center;
padding-left: 0px;
}
.pricing-option ul li {
border-bottom: solid 1px #e1e1e1;
padding-top: 20px;
padding-bottom: 20px;
}