added contrib theme basic
This commit is contained in:
Bachir Soussi Chiadmi
+32
@@ -0,0 +1,32 @@
|
||||
// Button styles
|
||||
#{$all-buttons}
|
||||
appearance: none
|
||||
background-color: $action-color
|
||||
border: 0
|
||||
border-radius: $base-border-radius
|
||||
color: #fff
|
||||
cursor: pointer
|
||||
display: inline-block
|
||||
font-family: $base-font-family
|
||||
font-size: $base-font-size
|
||||
-webkit-font-smoothing: antialiased
|
||||
font-weight: 600
|
||||
line-height: 1
|
||||
padding: $small-spacing $base-spacing
|
||||
text-decoration: none
|
||||
transition: background-color $base-duration $base-timing
|
||||
user-select: none
|
||||
vertical-align: middle
|
||||
white-space: nowrap
|
||||
|
||||
&:hover,
|
||||
&:focus
|
||||
background-color: shade($action-color, 20%)
|
||||
color: #fff
|
||||
|
||||
&:disabled
|
||||
cursor: not-allowed
|
||||
opacity: 0.5
|
||||
|
||||
&:hover
|
||||
background-color: $action-color
|
||||
+71
@@ -0,0 +1,71 @@
|
||||
// Form styles
|
||||
fieldset
|
||||
background-color: transparent
|
||||
border: 0
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
legend
|
||||
font-weight: 600
|
||||
margin-bottom: $small-spacing / 2
|
||||
padding: 0
|
||||
|
||||
label
|
||||
display: block
|
||||
font-weight: normal
|
||||
margin-bottom: $small-spacing / 2
|
||||
|
||||
input,
|
||||
select
|
||||
display: block
|
||||
font-family: $base-font-family
|
||||
font-size: $base-font-size
|
||||
|
||||
#{$all-text-inputs},
|
||||
select[multiple]
|
||||
background-color: $base-background-color
|
||||
border: $base-border
|
||||
border-radius: $base-border-radius
|
||||
box-shadow: $form-box-shadow
|
||||
box-sizing: border-box
|
||||
font-family: $base-font-family
|
||||
font-size: $base-font-size
|
||||
margin-bottom: $small-spacing
|
||||
padding: $base-spacing / 3
|
||||
transition: border-color $base-duration $base-timing
|
||||
width: 100%
|
||||
|
||||
&:hover
|
||||
border-color: shade($base-border-color, 20%)
|
||||
|
||||
&:focus
|
||||
border-color: $action-color
|
||||
box-shadow: $form-box-shadow-focus
|
||||
outline: none
|
||||
|
||||
&:disabled
|
||||
background-color: shade($base-background-color, 5%)
|
||||
cursor: not-allowed
|
||||
|
||||
&:hover
|
||||
border: $base-border
|
||||
|
||||
textarea
|
||||
resize: vertical
|
||||
|
||||
[type="search"]
|
||||
appearance: none
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"]
|
||||
display: inline
|
||||
margin-right: $small-spacing / 2
|
||||
|
||||
[type="file"]
|
||||
margin-bottom: $small-spacing
|
||||
width: 100%
|
||||
|
||||
select
|
||||
margin-bottom: $base-spacing
|
||||
max-width: 100%
|
||||
width: auto
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
// List styles
|
||||
ul,
|
||||
ol
|
||||
list-style-type: none
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
dl
|
||||
margin-bottom: $small-spacing
|
||||
|
||||
dt
|
||||
font-weight: 600
|
||||
margin-top: $small-spacing
|
||||
|
||||
dd
|
||||
margin: 0
|
||||
@@ -0,0 +1,9 @@
|
||||
// Media styles
|
||||
figure
|
||||
margin: 0
|
||||
|
||||
img,
|
||||
picture
|
||||
max-width: 100%
|
||||
height: auto
|
||||
vertical-align: top
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
// Table styles
|
||||
table
|
||||
border-collapse: collapse
|
||||
margin: $small-spacing 0
|
||||
table-layout: fixed
|
||||
width: 100%
|
||||
|
||||
th
|
||||
border-bottom: 1px solid shade($base-border-color, 25%)
|
||||
font-weight: 600
|
||||
padding: $small-spacing 0
|
||||
text-align: left
|
||||
|
||||
td
|
||||
border-bottom: $base-border
|
||||
padding: $small-spacing 0
|
||||
|
||||
tr,
|
||||
td,
|
||||
th
|
||||
vertical-align: middle
|
||||
@@ -0,0 +1,71 @@
|
||||
// Typographic styles
|
||||
body
|
||||
color: $base-font-color
|
||||
font-family: $base-font-family
|
||||
font-size: $base-font-size
|
||||
line-height: $base-line-height
|
||||
letter-spacing: $base-letter-spacing
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6
|
||||
font-family: $heading-font-family
|
||||
font-size: $base-font-size
|
||||
line-height: $heading-line-height
|
||||
margin: 0 0 $small-spacing
|
||||
|
||||
h1
|
||||
font-size: 2.2em
|
||||
|
||||
h2
|
||||
font-size: 1.8em
|
||||
|
||||
h3
|
||||
font-size: 1.4em
|
||||
|
||||
h4
|
||||
font-size: 1.2em
|
||||
|
||||
h5
|
||||
font-size: 1.1em
|
||||
|
||||
p
|
||||
margin: 0 0 $small-spacing
|
||||
|
||||
a
|
||||
color: $action-color
|
||||
text-decoration: none
|
||||
transition: color $base-duration $base-timing
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover
|
||||
color: shade($action-color, 25%)
|
||||
|
||||
hr
|
||||
border-bottom: $base-border
|
||||
border-left: 0
|
||||
border-right: 0
|
||||
border-top: 0
|
||||
margin: $base-spacing 0
|
||||
|
||||
// Code
|
||||
pre, code, tt
|
||||
font: 1em "andale mono", "lucida console", monospace
|
||||
line-height: 1.5
|
||||
|
||||
pre
|
||||
background-color: #efefef
|
||||
display: block
|
||||
padding: 5px
|
||||
margin: 5px 0
|
||||
border: 1px solid #aaaaaa
|
||||
|
||||
// Abbreviation
|
||||
abbr
|
||||
border-bottom: 1px dotted #666666
|
||||
cursor: help
|
||||
white-space: nowrap
|
||||
@@ -0,0 +1,13 @@
|
||||
@import "../config/config"
|
||||
|
||||
// BASE: HTML element styling Read more about SMACSS categorization for Drupal
|
||||
// Themes: https://www.drupal.org/node/1887922
|
||||
|
||||
// This file is complied separately so we can pull in config dependencies above
|
||||
// while also maintaining Drupal SMACSS structure.
|
||||
@import "buttons"
|
||||
@import "forms"
|
||||
@import "lists"
|
||||
@import "media"
|
||||
@import "tables"
|
||||
@import "typography"
|
||||
@@ -0,0 +1,5 @@
|
||||
// Breadcrumb styles
|
||||
.breadcrumb
|
||||
li
|
||||
list-style-type: none
|
||||
display: inline-block
|
||||
@@ -0,0 +1,5 @@
|
||||
// Navigation styles
|
||||
#navigation
|
||||
li
|
||||
list-style-type: none
|
||||
display: inline-block
|
||||
@@ -0,0 +1,5 @@
|
||||
.pager__item
|
||||
display: inline
|
||||
|
||||
a
|
||||
display: inline-block
|
||||
@@ -0,0 +1,7 @@
|
||||
// Site name
|
||||
.site-name
|
||||
font-size: 2.2em
|
||||
line-height: 1.3em
|
||||
font-weight: 300
|
||||
padding: 0 0 0.5em
|
||||
margin: 0
|
||||
@@ -0,0 +1,11 @@
|
||||
@import "../config/config"
|
||||
|
||||
// COMPONENTS: Discrete, reusable UI elements
|
||||
// Read more about SMACSS categorization for Drupal themes: https://www.drupal.org/node/1887922
|
||||
|
||||
// This file is complied separately so we can pull in config dependencies above
|
||||
// while also maintaining Drupals SMACSS structure.
|
||||
@import "breadcrumb"
|
||||
@import "navigation"
|
||||
@import "site-name"
|
||||
@import "pager"
|
||||
@@ -0,0 +1,33 @@
|
||||
@import "../config/config"
|
||||
|
||||
// Messages.
|
||||
.messages
|
||||
padding: 9px
|
||||
margin: 1em 0
|
||||
color: darken($light-gray, 30%)
|
||||
background-color: $light-gray
|
||||
border: 1px solid darken($light-gray, 10%)
|
||||
word-wrap: break-word
|
||||
pre
|
||||
border: 0
|
||||
|
||||
.messages--warning
|
||||
color: darken($error-color, 15%)
|
||||
background-color: $warning-color
|
||||
border-color: darken($warning-color, 10%)
|
||||
pre
|
||||
background-color: darken($warning-color, 10%)
|
||||
|
||||
.messages--error
|
||||
color: white
|
||||
background-color: $error-color
|
||||
border-color: darken($error-color, 10%)
|
||||
pre
|
||||
background-color: darken($error-color, 10%)
|
||||
|
||||
.messages--status
|
||||
color: darken($status-color, 35%)
|
||||
background-color: $status-color
|
||||
border-color: darken($status-color, 10%)
|
||||
pre
|
||||
background-color: darken($status-color, 10%)
|
||||
@@ -0,0 +1,16 @@
|
||||
@import "../config/config"
|
||||
|
||||
// Tabs.
|
||||
ul.tabs
|
||||
width: 100%
|
||||
margin: 0 0 5px
|
||||
border-bottom: 1px solid $light-gray
|
||||
|
||||
li
|
||||
display: inline-block
|
||||
|
||||
a
|
||||
display: block
|
||||
border: 1px solid $light-gray
|
||||
border-bottom: 0
|
||||
border-radius: 3px 3px 0 0
|
||||
@@ -0,0 +1,36 @@
|
||||
// Config
|
||||
// ---------
|
||||
// Use the same color all over the place? Need to do
|
||||
// some math with height and width and text size?
|
||||
// Sass supports variables as well as basic math
|
||||
// operations and many useful functions.
|
||||
//
|
||||
// For setting variables, see:
|
||||
// /sass/config/_variables.sass
|
||||
//
|
||||
// For setting mixins:
|
||||
// /sass/config/_mixins.sass
|
||||
//
|
||||
// For complete documentation:
|
||||
// http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#variables_
|
||||
//
|
||||
// Available functions:
|
||||
// http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
|
||||
|
||||
// Bourbon and Bourbon Neat documentation:
|
||||
// Bourbon: http://bourbon.io/docs/
|
||||
// Bourbon Neat (grid): http://neat.bourbon.io/docs/
|
||||
|
||||
// Import variables and mixins to be used (Bourbon)
|
||||
@import "../../node_modules/bourbon/app/assets/stylesheets/bourbon"
|
||||
@import "../../node_modules/bourbon-neat/app/assets/stylesheets/neat-helpers"
|
||||
|
||||
// Import grid to be used (Bourbon Neat)
|
||||
@import "grid-settings"
|
||||
|
||||
// We load this after we provide our overrides
|
||||
@import "../../node_modules/bourbon-neat/app/assets/stylesheets/neat"
|
||||
|
||||
// Import local files
|
||||
@import "variables"
|
||||
@import "mixins"
|
||||
@@ -0,0 +1,27 @@
|
||||
// Bourbon grid display. Set to "true" to turn on.
|
||||
// $visual-grid: false
|
||||
// $visual-grid-color: #EEEEEE
|
||||
// $visual-grid-index: back
|
||||
// $visual-grid-opacity: 0.4
|
||||
|
||||
// Set to false if you'd like to remove the responsiveness
|
||||
$responsive: true
|
||||
|
||||
// Neat Overrides
|
||||
$column: 60px
|
||||
$gutter: 20px
|
||||
$grid-columns: 4
|
||||
|
||||
// We set the max width of the page.
|
||||
$font-size: 16px
|
||||
$max-width: 1200px
|
||||
|
||||
// Breakpoints
|
||||
$small-screen: 320px
|
||||
$medium-screen: 720px
|
||||
$large-screen: 960px
|
||||
|
||||
// Define your mobile first breakpoints using min-width
|
||||
$small-screen-up: new-breakpoint(min-width #{$small-screen/$font-size}em 4)
|
||||
$medium-screen-up: new-breakpoint(min-width #{$medium-screen/$font-size}em 8)
|
||||
$large-screen-up: new-breakpoint(min-width #{$large-screen/$font-size}em 12)
|
||||
@@ -0,0 +1,19 @@
|
||||
// Mixins
|
||||
// --------
|
||||
// Mixins allow you to define styles that can be re-used / throughout the
|
||||
// stylesheet without needing to resort to / non-semantic classes like .float-
|
||||
// left. Mixins can also / contain full CSS rules, and anything else allowed /
|
||||
// elsewhere in a Sass document. They can even take / arguments which allows you
|
||||
// to produce a wide variety / of styles with very few mixins.
|
||||
|
||||
// For complete documentation:
|
||||
// Sass mixins: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins
|
||||
// Bourbon mixins: http://bourbon.io/docs/
|
||||
|
||||
// Omega Reset for Bourbon Neat grid
|
||||
// Read more: http://www.joshfry.me/blog/2013/05/13/omega-reset-for-bourbon-neat
|
||||
@mixin omega-reset($nth)
|
||||
&:nth-child(#{$nth})
|
||||
margin-right: flex-gutter()
|
||||
&:nth-child(#{$nth}+1)
|
||||
clear: none
|
||||
@@ -0,0 +1,65 @@
|
||||
// Variables
|
||||
// -----------
|
||||
// Use the same color all over the place? Need to do some math with height and
|
||||
// width and text size? Sass supports variables as well as basic math operations
|
||||
// and many useful functions.
|
||||
|
||||
// For complete documentation:
|
||||
// http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#variables_
|
||||
|
||||
// Margin/Padding
|
||||
$margin: $gutter
|
||||
$padding: $gutter
|
||||
|
||||
// Typography
|
||||
$base-font-family: $helvetica
|
||||
$heading-font-family: $base-font-family
|
||||
|
||||
// Font Sizes
|
||||
$base-font-size: $font-size
|
||||
|
||||
// Line height
|
||||
$base-line-height: 1.5
|
||||
$heading-line-height: 1.3
|
||||
|
||||
// Letter spacing
|
||||
$base-letter-spacing: 0.03em
|
||||
|
||||
// Other Sizes
|
||||
$base-border-radius: 2px
|
||||
$base-spacing: $base-line-height * 1em
|
||||
$small-spacing: $base-spacing / 2
|
||||
$base-z-index: 0
|
||||
|
||||
// Colors
|
||||
$dark-gray: #333
|
||||
$medium-gray: #999
|
||||
$light-gray: #ddd
|
||||
|
||||
// Brand Colors
|
||||
$primary-color: #555
|
||||
|
||||
// Action Colors
|
||||
$status-color: #8dbe51
|
||||
$warning-color: #ddc44f
|
||||
$error-color: #cd4533
|
||||
|
||||
// Font Colors
|
||||
$base-font-color: $dark-gray
|
||||
$action-color: $primary-color
|
||||
|
||||
// Border
|
||||
$base-border-color: $light-gray
|
||||
$base-border: 1px solid $base-border-color
|
||||
|
||||
// Background Colors
|
||||
$base-background-color: #fff
|
||||
$secondary-background-color: tint($base-border-color, 75%)
|
||||
|
||||
// Forms
|
||||
$form-box-shadow: inset 0 1px 3px rgba(#000, 0.06)
|
||||
$form-box-shadow-focus: $form-box-shadow, 0 0 5px adjust-color($action-color, $lightness: -5%, $alpha: -0.3)
|
||||
|
||||
// Animations
|
||||
$base-duration: 150ms
|
||||
$base-timing: ease
|
||||
@@ -0,0 +1,101 @@
|
||||
// Layout
|
||||
// ------
|
||||
// Using a negative margin technique, made possible with Bourbon Neat, the page
|
||||
// is loaded in this order:
|
||||
|
||||
// 1. Header
|
||||
// 2. Content
|
||||
// 3. Navigation menus
|
||||
// 4. Sidebar Left
|
||||
// 5. Sideabr Right
|
||||
//
|
||||
// Layout rules.
|
||||
// (Disclaimer: do not change if you're not sure you know what you're doing.)
|
||||
|
||||
.container
|
||||
@include outer-container
|
||||
width: auto
|
||||
|
||||
#content
|
||||
.no-sidebar &
|
||||
// 100% width for small screens. No definitions required.
|
||||
// Same logic for medium screens. No definitions required.
|
||||
// Same logic for large screens. No definitions required.
|
||||
|
||||
.one-sidebar.sidebar-second &
|
||||
// 100% width for small screens. No definitions required.
|
||||
// Span this div 6 columns wide for medium screens.
|
||||
@include media($medium-screen-up)
|
||||
@include span-columns(6)
|
||||
// Span this div 8 columns wide for large screens.
|
||||
@include media($large-screen-up)
|
||||
@include span-columns(8)
|
||||
|
||||
.one-sidebar.sidebar-first &
|
||||
// 100% width for small screens. No definitions required.
|
||||
// Span this div 6 columns wide for medium screens.
|
||||
@include media($medium-screen-up)
|
||||
@include span-columns(6)
|
||||
@include shift(2)
|
||||
// Span this div 9 columns wide for large screens.
|
||||
@include media($large-screen-up)
|
||||
@include span-columns(9)
|
||||
@include shift(3)
|
||||
|
||||
.two-sidebars &
|
||||
// 100% width for small screens. No definitions required.
|
||||
// Span this div 4 columns wide for medium screens.
|
||||
@include media($medium-screen-up)
|
||||
@include span-columns(4)
|
||||
@include shift(2)
|
||||
// Span this div 5 columns wide for large screens.
|
||||
@include media($large-screen-up)
|
||||
@include span-columns(5)
|
||||
@include shift(3)
|
||||
|
||||
#sidebar-first
|
||||
// 100% width for small screens. No definitions required.
|
||||
// Span this div 2 columns wide for medium screens.
|
||||
@include media($medium-screen-up)
|
||||
@include span-columns(2)
|
||||
// Shift it to the left to place it in the far left column. Different shift for two-sidebar and one-sidebar layout.
|
||||
@include shift(-6)
|
||||
.one-sidebar.sidebar-first &
|
||||
@include shift(-8)
|
||||
@include media($large-screen-up)
|
||||
// Span this div 3 columns wide for large screens.
|
||||
@include span-columns(3)
|
||||
// Shift it to the left to place it in the far left column. Different shift for two-sidebar and one-sidebar layout.
|
||||
@include shift(-8)
|
||||
.one-sidebar.sidebar-first &
|
||||
@include shift(-12)
|
||||
|
||||
#sidebar-second
|
||||
// 100% width for small screens. No definitions required.
|
||||
// Span this div 2 columns wide for medium screens.
|
||||
@include media($medium-screen-up)
|
||||
@include span-columns(2)
|
||||
@include shift(0)
|
||||
@include media($large-screen-up)
|
||||
// Span this div 4 columns wide for large screens.
|
||||
@include span-columns(4)
|
||||
@include shift(0)
|
||||
|
||||
#footer
|
||||
float: none
|
||||
clear: both
|
||||
|
||||
// Region Colors. Delete when starting a new theme.
|
||||
#header, #footer,
|
||||
#sidebar-first,
|
||||
#sidebar-second,
|
||||
#navigation
|
||||
background: rgba(#aaa, 0.2)
|
||||
|
||||
// Layout Helpers
|
||||
#header,
|
||||
#footer,
|
||||
.mission,
|
||||
.breadcrumb,
|
||||
.node
|
||||
clear: both
|
||||
@@ -0,0 +1,8 @@
|
||||
@import "../config/config"
|
||||
|
||||
// LAYOUT: Macro arrangement of a web page, including any grid systems.
|
||||
// Read more about SMACSS categorization for Drupal Themes: https://www.drupal.org/node/1887922
|
||||
|
||||
// This file is complied separately so we can pull in config dependencies above
|
||||
// while also maintaining Drupals SMACSS structure.
|
||||
@import "layout--grid"
|
||||
@@ -0,0 +1,36 @@
|
||||
// Use this stylesheet for print styles only.
|
||||
*
|
||||
background-color: transparent
|
||||
|
||||
.sidebar,
|
||||
#navigation,
|
||||
#header-region,
|
||||
#footer,
|
||||
.breadcrumb,
|
||||
.tabs,
|
||||
.feed-icon,
|
||||
.links
|
||||
display: none
|
||||
|
||||
.layout-container
|
||||
width: 100%
|
||||
|
||||
#content,
|
||||
.title
|
||||
margin: 20px 0
|
||||
width: auto
|
||||
|
||||
a
|
||||
&:hover,
|
||||
&:active,
|
||||
&:link,
|
||||
&:visited
|
||||
color: black
|
||||
|
||||
// CSS2 selector to add visible href after links.
|
||||
#content a
|
||||
&:link:after,
|
||||
&:visited:after
|
||||
content: " (" attr(href) ") "
|
||||
font-size: 0.8em
|
||||
font-weight: normal
|
||||
@@ -0,0 +1,9 @@
|
||||
@import "../config/config"
|
||||
|
||||
// THEME: purely visual styling (“look-and-feel”) for a component.
|
||||
// Read more about SMACSS categorization for Drupal Themes: https://www.drupal.org/node/1887922
|
||||
// When following SMCASS, this would be used for dark/light themes (not general styling): https://smacss.com/book/type-theme
|
||||
|
||||
// This file is complied separately so we can pull in config dependencies above
|
||||
// while also maintaining Drupals SMACSS structure.
|
||||
// @import "theme/theme--light"
|
||||
Reference in New Issue
Block a user